How do I change the contents of a WebRTC MediaStream video track?

Question

I use WebRTC in a scenario in which a client video stream is recorded on a third-party server https://tokbox.com/ . I would like to put some kind of watermark in the recorded video.

The investigation led me to this page http://w3c.imtqy.com/webrtc-pc/#mediastreamtrack , and it seems that it is technically possible, as it says that:

MediaStream obtained using getUserMedia () is by default available to the application. This means that the application can access the contents of the tracks, change their contents and send this media to any manufacturer that he selects.

This is exactly what I need, but I have not found examples or explanations of this function. I would like advice from WebRTC experts.

Answer 1

You need to use the canvas to route the video from getUserMedia, change it there, and then use canvas.captureStream () to return it to MediaStream. This is great - except that canvas.captureStream (), while consistent in WG has not yet been included in the specification. (There's a pull request with a proposed wording written by Mozilla.)

As for the implementations: the initial implementation of captureStream () has just landed in Firefox Nightly (41), and it is still prefixed until a bug or two is fixed. You can enable it with canvas.capturestream.enabled approximately: config. You can see the demo on the Mozilla test page for captureStream () .

Doing this without canvas.captureStream () would be tough; you would be best off doing getUserMedia-> canvas-> and then using video.captureStream () (or captureStreamUntilEnded ()), however video.captureStream is also waiting for official confirmation. However, Mozilla has had a .captureStream () video for some time, and I think it works in FF 38 (current version).