javascript - 如何修改WebRTC MediaStream视频轨道的内容？

Question

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

调查使我进入此页面 http://w3c.github.io/webrtc-pc/#mediastreamtrack并且它似乎在技术上是可行的，因为它说:

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.

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

Answer 1

您需要使用 Canvas 将视频从 getUserMedia 路由到，在那里进行修改，然后使用 canvas.captureStream() 将其转回 MediaStream。这很棒——除了 canvas.captureStream()，虽然在 WG 中得到同意，但实际上尚未包含在规范中。 (有一个拉取请求，其中包含 Mozilla 编写的建议措辞。)

就实现而言:captureStream() 的初始实现刚刚登陆 Firefox Nightly (41)，并且在修复一两个错误之前它仍然落后于 pref。您可以在 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(当前版本)。