Question

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

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

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

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

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

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

在返回的承诺中，您可以从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。

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

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

因此，您只需要创建一个将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”

1 个答案: