将 "navigator.mediaDevices.getUserMedia" 替换为 "canvas.captureStream"

Question

我正在使用 Red5pro html SDK 在服务器和客户端之间创建点对点连接，视频和音频聊天非常适合 getUserMedia(). 问题是，我想使用 captureStream().

从 DOM 元素（Canvas）流式传输，而不是从用户的相机流式传输

Red5Pro 具有名为“OnGetUserMedia”的方法，其说明如下：

The onGetUserMedia method - when defined on the configuration provide to a WebRTC-based Publisher - will override the internal call to getUserMedia in the Red5 Pro HTML SDK.

You can provide your own logic on how getUserMedia is invoked and a Media Stream attained by setting the onGetUserMedia attribute to a method that conforms to the following guidelines:

No input arguments are provided to onGetUserMedia. It is expected that a Promise object is returned. A MediaStream object must be provided in the resolve of the Promise.

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

Inside of the promise returned, you can derive a MediaStream from captureStream.

参考：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 属性设置为执行 return Promise 的函数，该函数本身解析为 MediaStream。

这可能是因为他们在构建 API 时使用了 正确的 假设，即他们的用户将拥有的大多数 MediaStreams 都来自 mediaDevices.getUserMedia 方法，并且此方法执行 return 这样一个解析为 MediaStream 的 Promise。

为了遵守他们的代码，您必须将自己的 MediaStream 包装在这样的 Promise 中。
实际上，HTMLCanvasElement.captureStream 是同步的并且 return 直接是 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.

的浏览器广泛支持

将 "navigator.mediaDevices.getUserMedia" 替换为 "canvas.captureStream"

Replace "navigator.mediaDevices.getUserMedia" with "canvas.captureStream"

javascript

canvas

webrtc

getusermedia

red5pro