提问者:小点点

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


我使用Red5pro html SDK创建服务器和客户端之间的点对点连接,视频和音频聊天的工作就像一个魅力与getUserMedia()。问题是,我想从一个DOM元素(Canvas)流,而不是从用户的相机,使用captureStream()。

Red5Pro具有名为"OnGetUserMedia"的方法,具有以下说明:

onGetUserMedia方法-当在提供给基于WebRTC的Publisher的配置中定义时-将覆盖Red5 Pro超文本标记语言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,
        },
      },
    });
  },
};

任何帮助?


共1个答案

匿名用户

要求您做的是将onGetUserMedia属性设置为一个函数,该函数返回一个promise,本身解析为一个媒体流。

这可能是因为他们构建了他们的应用编程接口,并正确地假设他们的用户将拥有的大多数媒体流都来自媒体evices.get用户媒体方法,并且该方法确实返回了这样一个promise,该promise确实解析到媒体流。

为了遵守他们的代码,你必须用这样的promise包装你自己的媒体流
事实上,HTMLCanvasElement。captureStream是同步的,直接返回MediaStream,没有promise包装器。

因此,要做到这一点,您只需要创建一个函数,将您的MediaStream封装在promise中,这可以通过promise来实现。解决方法:

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

Ps:
()=