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.