Programming WebRTC

Adding Video Elements: Self and Peer

With a basic heading and button in place, the only other HTML this basic app needs is for handling video: one element for a user’s own video stream, which we will refer to as self, and one element for the remote user’s video stream, which we’ll refer to as peer.

One of the many fun aspects of working with peer-to-peer streaming media is that you get to write some things in your markup that are usually big no-nos. One such thing is setting up multiple video elements to play simultaneously (one for self, one for the peer), with some attributes that might surprise you if you’re familiar with the <video> element introduced in HTML5. If you’re not familiar, that’s okay, too. We’ll walk through them.

Setting ...