从 Opentok.js 订阅者获取 MediaStream

Question

我正在使用 @opentok/client 构建一个用于简单多用户视频聊天的 Angular6 应用程序。

我想使用 hark.js 进行语音检测来实现 'spotlight'（例如全屏当前正在会话中发言的用户）功能。

问题是这个库需要源 MediaStream 来处理音频并发出我将捕获和处理的事件。

我想从 OpenTok 的订户 class 那里得到 MediaStream，但是没有找到如何这样做的方法，但是由于它基于通用的 WebRTC，所以应该是可行的。

有线索吗？

示例代码：

 this.opentokService.initSession().then((session: OT.Session) => {
  this.session = session;
  this.session.on('streamCreated', (event) => {
    this.streams.push(event.stream); //creates the subscribers elements
    var speechEvents = hark(event.stream, {}); //raises error, how to get a proper MediaStream here?
  });

Answer 1

你是对的，因为 OpenTok 只是普通的 WebRTC，你可以像这样从订阅者的底层视频元素中获取 MediaStream：

const mediaStream = subscriber.element.querySelector('video').srcObject;

这将适用于 Chrome、Firefox、Safari 和 Edge 的最新版本。它在 Internet Explorer 中不起作用，因为它使用插件并且无论如何都没有 MediaStream 对象。

我还想指出，订阅者本身有 audioLevelUpdated 事件，可用于实现相同的目的。该事件为您提供介于 0 和 1 之间的 audioLevel。文档中有一个很好的示例，说明如何将其转换为 dB 范围 https://tokbox.com/developer/sdks/js/reference/Subscriber.html#events

我不确定 hark.js 是否做了一些处理以确保它是语音，如果是的话它可能仍然会更好。不管是不是语音，音频电平事件都是基于噪声。

Answer 2

您可以这样访问：

const mediaStream = subscriber._.webRtcStream()

从 Opentok.js 订阅者获取 MediaStream

Get MediaStream from Opentok.js subscriber

webrtc

opentok

mediastream

angular