将“navigator.mediaDevices.getUserMedia”替换为“canvas.captureStream”

Question

我正在使用Red5pro html SDK在服务器和客户端之间创建点对点连接，视频和音频聊天工作就像使用getUserMedia（）的魅力一样。问题是，我想使用captureStream（）从DOM元素（Canvas）流式传输，而不是从用户的相机流式传输。

Red5Pro具有名为“OnGetUserMedia”的方法，其中包含以下说明：

onGetUserMedia方法 - 在配置上定义提供给基于WebRTC的Publisher时 - 将覆盖Red5 Pro HTML SDK中对getUserMedia的内部调用。

您可以通过将onGetUserMedia属性设置为符合以下准则的方法，提供有关如何调用getUserMedia和获得媒体流的逻辑：

没有为onGetUserMedia提供输入参数。期望返回Promise对象。必须在Promise的解析中提供MediaStream对象。

当我做研究并询问Red5pro支持团队时，他们说

在返回的promise内部，您可以从captureStream派生MediaStream。

参考：Red5Pro Documentation

我只是不知道该做什么或改变什么。

这是onGetUserMedia方法的一个示例：

 {
      host: "localhost",
      protocol: 8083,
      port: 8081,
      streamName: "mystream",
      iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
      onGetUserMedia: function () {
        return navigator.mediaDevices.getUserMedia({
          audio: true,
          video: {
            width: {
              max: 1920,
              ideal: 1280,
              min: 640
            },
            width: {
              max: 1080,
              ideal: 720,
              min: 360
            }
          }
        })
      }
    } 

任何帮助？

Answer 1

你被要求做的是将onGetUserMedia属性设置为一个函数，它返回一个Promise，它自己解析为一个MediaStream。

这可能是因为他们使用正确的假设构建了他们的API，他们的用户将拥有的大多数MediaStream来自mediaDevices.getUserMedia方法，并且此方法确实返回了解析为MediaStream的Promise。

为了遵守他们的代码，你必须将自己的MediaStream包装在这样的Promise中。 实际上，HTMLCanvasElement.captureStream是同步的，直接返回MediaStream，没有Promise包装器。

所以要做到这一点，你只需要创建一个将MediaStream包装在Promise中的函数，这可以通过Promise.resolve方法完成：

{
  [...]
  iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
  onGetUserMedia: () => Promise.resolve(canvas.captureStream(frameRate))
}

---

PS： () =>语法是ES6 Arrow function，广泛支持支持HTMLCanvasElement.captureStream的浏览器。