Geek Answers Handbook

How to put canvas element in WebRtc?

I searched for WebRtc and I found this wonderful project on GitHub:

https://github.com/mexx91/basicVideoRTC

The connection between the two cameras works fine with node.js.

Is it possible before the getuserMedia stream to change it in the canvas element and thus pass this object?

thanks

+6
source share
2 answers

It seems this is currently not possible in cross-browser compatible mode.

But this may be in the future, you can take a look at the HTMLCanvasElement.captureStream interface implemented in the latest Firefox browsers, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream .

This allows you to capture the contents of the canvas to a stream, which can then send wia WebRTC to your peer.

+3
source

Using the getUserMedia () method, we can get the audio and video stream in codec format through a microphone and a webcam, respectively.

After converting this codec format to a custom video URL, it will be attached to the source tag under the video element to make a complete video.

So, the video that we get from getUserMedia () api looks like another regular video, for example: -

 <video width="320" height="240" controls> <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4"> <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

http://jsfiddle.net/ez3pA/2/

So, you can do different things around the video and the canvas. We can get good examples of this at http://html5doctor.com/video-canvas-magic/

-2
source

More articles:


All Articles