Fork me on GitHub

Plugin Demo: Canvas Capture

Want to learn more about the EchoTest plugin? Check the Documentation.

Demo details

This is a variant of the Echo Test demo meant to showcase how you can use an HTML5 canvas element as a WebRTC media source: everything is exactly the same in term of available controls, features, and the like, with the substantial difference that we'll play a bit with what we'll send on the video stream.

More precisely, the demo captures the webcam feed via a getUserMedia call to use as a background in a canvas element, and then presents some basic controls to add some text dynamically; an image is also statically added to the element as well. The canvas element is then used as the actual source of media for our PeerConnection, which means the video we get back from the EchoTest plugin should reflect the tweaks we've made on the stream.

Notice that this is a very naive implementation, with many hardcoded assumptions about video resolution and other things, and may not perform very well either: it's only meant to showcase an interesting approach that can be used for WebRTC, so you're encouraged to dig deeper yourself to see how to make the canvas processing more efficient and cooler. The code for this demo comes from a Dangerous Demo we showed during a past edition of Kamailio World; you can read more details in a blog post we wrote on the Meetecho blog after the fact.

Press the Start button above to launch the demo.

Local Stream
Tweaks
Remote Stream