如何使用 opentok 流式传输音频文件？

Question

在 opentok 中，使用 OT.initPublisher，您只能将 deviceId 传递给 audioSource。有人知道流式传输音频文件的方法吗？

例如，我是这样做的：

navigator.getUserMedia({audio: true, video: false},
function(stream) {
    var context = new AudioContext();
    var microphone = context.createMediaStreamSource(stream);
    var backgroundMusic = context.createMediaElementSource(document.getElementById("song"));
    var mixedOutput = context.createMediaStreamDestination();
    microphone.connect(mixedOutput);
    backgroundMusic.connect(mixedOutput);
},
handleError);

像这样，我可以有一个带有声音和我的音乐的流，但是如何将此流放到发布者？有可能还是有其他方法可以做到这一点？

Answer 1

更新：现在有一种官方方法可以做到这一点，使用OT.initPublisher 提供的videoSource 和audioSource 属性，请参阅文档：https://tokbox.com/developer/sdks/js/reference/OT.html#initPublisher

这是一个如何将画布元素作为视频轨道流式传输的示例：https://github.com/opentok/opentok-web-samples/tree/master/Publish-Canvas

您可以应用相同的技术来流式传输音轨。

---

旧答案：

官方支持的 API 目前无法实现，但有办法做到这一点。

请参阅关于相机滤镜的 TokBox 博客文章：https://tokbox.com/blog/camera-filters-in-opentok-for-web/

为了在流到达 OpenTok JS SDK 之前对其进行修改，我们使用 mockGetUserMedia 函数来拦截流：

https://github.com/aullman/opentok-camera-filters/blob/master/src/mock-get-user-media.js

您可以使用进行音频混合的函数调用 mockGetUserMedia。像这样的：

mockGetUserMedia(function(originalStream) {
  var context = new AudioContext();
  var microphone = context.createMediaStreamSource(originalStream);
  var backgroundMusic = context.createMediaElementSource(document.getElementById("song"));
  var mixedOutput = context.createMediaStreamDestination();
  microphone.connect(mixedOutput);
  backgroundMusic.connect(mixedOutput);

  var stream = mixedOutput.stream;
  originalStream.getVideoTracks().map(function(track) {
    stream.addTrack(track);
  });
  return stream;
});

注意：我没有测试过这个功能，但它应该会引导你走向正确的方向。请记住，这种技术容易出错，而且 TokBox 不正式支持。

我们目前正在开发一项新功能，该功能将启用此用例，但我无法估计何时可用。

Answer 2

感谢您的帮助，但从今天早上起我们无法让它工作。

因此，我们使用此代码创建了一个不同的文件，该代码在我们的 html 中的 opentok 库之前实现：

function mockGetUserMedia(mockOnStreamAvailable) {
  var oldGetUserMedia = void 0;
  if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    oldGetUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    navigator.webkitGetUserMedia = navigator.getUserMedia = navigator.mozGetUserMedia = function getUserMedia(constraints, onStreamAvailable, onStreamAvailableError, onAccessDialogOpened, onAccessDialogClosed, onAccessDenied) {
      return oldGetUserMedia.call(navigator, constraints, function (stream) {
        onStreamAvailable(mockOnStreamAvailable(stream));
      }, onStreamAvailableError, onAccessDialogOpened, onAccessDialogClosed, onAccessDenied);
    };
  } else {
    console.warn('Could not find getUserMedia function to mock out');
  }
};

mockGetUserMedia(function(stream) {
    var context = new AudioContext();
    var bgMusic = context.createMediaElementSource(document.getElementById("song"));
    var microphone = context.createMediaStreamSource(stream);
    var destination = context.createMediaStreamDestination();
    bgMusic.connect(destination);
    microphone.connect(destination);
    var mixedStream = destination.stream;
    stream.getVideoTracks().map(function(track) {
       mixedStream.addTrack(track);
    });
    return mixedStream;
});

在我们的角度，我们初始化会话，创建一个发布者并发布它，但得到错误：

Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'BaseAudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.

我认为这个错误是抛出的，因为函数执行了两次。 js什么时候加载，什么时候发布。

我不知道这个 mockGetUserMedia 函数怎么用，你知道我们的代码有什么问题吗？

编辑

我们让它在一些 if 条件下工作。非常感谢你，非常感谢。