javascript - How to modify the content of WebRTC MediaStream video track? - Stack Overflow

admin管理员组

文章数量:1356947

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

Investigation brought me to this page and it seems that it is technically possible since it says that:

A MediaStream acquired using getUserMedia() is, by default, accessible to an application. This means that the application is able to access the contents of tracks, modify their content, and send that media to any peer it chooses.

This is exactly what I need, but I didn't find any examples or explanation of this function. I'd like to get some advice from WebRTC experts.

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

Investigation brought me to this page http://w3c.github.io/webrtc-pc/#mediastreamtrack and it seems that it is technically possible since it says that:

A MediaStream acquired using getUserMedia() is, by default, accessible to an application. This means that the application is able to access the contents of tracks, modify their content, and send that media to any peer it chooses.

This is exactly what I need, but I didn't find any examples or explanation of this function. I'd like to get some advice from WebRTC experts.

• javascript
• html
• video
• browser
• webrtc

Share Improve this question Follow asked Jun 10, 2015 at 14:26 David KlassenDavid Klassen 9811 silver badge66 bronze badges 1

• WebRTC deals only with capturing and distributing the content and doesn't care about any post processing. Adding the watermark is a problem that is related to the video codec - VP8 or VP9. AFAIK there is no way to add a watermark without transcoding the video. But there might be some mercial solutions that do this without transcoding as this is a mon problem. – Svetlin Mladenov Commented Jun 11, 2015 at 9:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You need to use a canvas to route the video from getUserMedia to, modify it there, and then use canvas.captureStream() to turn it back into a MediaStream. This is great - except that canvas.captureStream(), while agreed to in the WG hasn't actually been included in the spec yet. (There's a pull request with the proposed verbiage that Mozilla wrote.)

As far as implementations: the initial implementation of captureStream() just landed in Firefox Nightly (41), and it's still behind a pref until a bug or two is fixed. You can enable it with canvas.capturestream.enabled in about:config. You can see a demo at Mozilla's test page for captureStream().

Doing it without canvas.captureStream() would be tough; you're best way would be to do getUserMedia->canvas-> and then use video.captureStream() (or captureStreamUntilEnded()) - however, video.captureStream is also waiting for formal acceptance. Mozilla has had video.captureStream() for some time, however, and I think it works in FF 38 (current release).

本文标签： javascriptHow to modify the content of WebRTC MediaStream video trackStack Overflow