将"navigator.mediaDevices.getUserMedia“改为"canvas.captureStream”

Question

我正在使用getUserMedia(). html在服务器和客户端之间创建对等连接，视频和音频聊天就像使用Red5pro的魅力一样。问题是，我想使用captureStream().从DOM元素(画布)流，而不是从用户的照相机中流

Red5Pro有一个名为"OnGetUserMedia“的方法，其说明如下：

onGetUserMedia方法--当定义在为基于WebRTC的发布服务器提供的配置上时--将覆盖Red5 provide中对getUserMedia的内部调用。您可以提供自己的逻辑，说明如何调用getUserMedia和通过将onGetUserMedia属性设置为符合以下准则的方法获得的媒体流:不向onGetUserMedia提供输入参数。预期返回的对象是“承诺”对象。必须在承诺的解析中提供MediaStream对象。

当我做了一项研究，问Red5pro支持小组时，他们说

在返回的承诺中，您可以从MediaStream派生出一个captureStream。

参考文献：Red5Pro文档

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

下面是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属性设置为确实返回承诺的函数，该函数本身将解析为MediaStream。

这可能是因为他们构建API时有正确的假设，即他们的用户将拥有的大多数MediaStreams都来自mediaDevices.getUserMedia方法，并且该方法确实返回了这样一个承诺，即向MediaStream进行解析。

为了遵守他们的代码，您必须将自己的MediaStream封装在这样的承诺中。

实际上，HTMLCanvasElement.captureStream是同步的，并且直接返回MediaStream，而没有承诺的包装器。

要做到这一点，您只需要创建一个函数，该函数将您的MediaStream封装在一个承诺中，这可以通过https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve方法来完成：

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

Ps：

() =>语法是ES6 箭头函数，受支持HTMLCanvasElement.captureStream的浏览器的广泛支持。