0

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

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

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

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

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

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

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

参考：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,
        },
      },
    });
  },
};

有什么帮助吗？

4

1 回答 1

0

您被要求做的是将onGetUserMedia属性设置为返回 Promise 的函数，该函数本身解析为 MediaStream。

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

为了遵守他们的代码，您必须将自己的 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的浏览器广泛支持。

于 2018-08-29T00:58:57.163 回答