如何修改WebRTC MediaStream视频轨道的内容?

时间:2015-06-10 14:26:30

标签: javascript html5 video browser webrtc

我在客户端视频流记录在第三方服务器https://tokbox.com/上的场景中使用WebRTC。我想在录制的视频中添加某种水印。

调查带我到了这个页面http://w3c.github.io/webrtc-pc/#mediastreamtrack,似乎技术上可行,因为它说:

  

默认情况下,使用getUserMedia()获取的MediaStream可供应用程序访问。这意味着应用程序能够访问轨道内容,修改其内容,并将该媒体发送给它选择的任何对等方。

这正是我需要的,但我没有找到任何关于此功能的例子或解释。我想从WebRTC专家那里得到一些建议。

1 个答案:

答案 0 :(得分:7)

您需要使用画布将视频从getUserMedia路由到,在那里进行修改,然后使用canvas.captureStream()将其转换回MediaStream。这很好 - 除了canvas.captureStream(),虽然在WG中同意但实际上还没有包含在规范中。 (对于Mozilla写的提议的措辞,有拉动请求。)

就实现而言:captureStream()的初始实现刚刚登陆Firefox Nightly(41),并且它仍然落后于pref,直到修复了一两个bug。您可以在about:config中使用canvas.capturestream.enabled启用它。您可以在Mozilla's test page for captureStream()看到演示。

没有canvas.captureStream()这样做会很难;你最好的方法是做getUserMedia-> canvas->然后使用video.captureStream()(或captureStreamUntilEnded()) - 但是,video.captureStream也在等待正式接受。 Mozilla已经有了一段时间的video.captureStream(),我认为它适用于FF 38(当前版本)。