How to stream a canvas element in WebRtc?

6
votes

I was searching about WebRtc and I found this great project on GitHub:

https://github.com/mexx91/basicVideoRTC

The communication between 2 cameras works great using node.js.

It's possible to before stream a getuserMedia modify it in a canvas element and so stream this object?

Thanks

2
javascripthtmlcanvaswebrtc
In which way you want to modify getuserMedia in canvas element? – Suman Bogati
I Want apply any filter, like black and white or change luminosity. In a first moment, simple things. – pierophp
Please have a look answer. – Suman Bogati
Thanks for the answer. But the problem is not just modify the camera yourself, but how modify and stream to the other device connected in the peer to peer – pierophp
If i am not wrong, you want the modify videos of peer on both side? – Suman Bogati

2 Answers

3
votes

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

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

It allows you to capture the content of a canvas to a stream that can be send wia WebRTC to your peer then.

-2
votes

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

After converted this codec format in url of user video, it would assigned into source tag under the video element to make complete video.

So the video we are getting from getUserMedia() api is like other usual video eg:-

<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 various things about video and canvas element together. We can get good examples of this on a site http://html5doctor.com/video-canvas-magic/