Firefox 屏幕共享 MediaStreamTrack 到 Twilio

Question

我使用 Firefox v55.0.2

在文档 (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia) 中，通常在 successCallback 中 NavigatorUserMedia.getUserMedia() 之后，我有一个 MediaStream，但在我的例子中，我有 LocalMediaStream。

我需要 MediaStreamTrack 才能在 twilio 上提供它。

这是我的代码：

$scope.testShareFirefox = function () {
  var p = navigator.mediaDevices.getUserMedia({
    video: {
      mediaSource: 'screen',
      width: 640,
      height: 480
    },
  })
  .then(function(stream) {
    const screenLocalTrack = new twilio.Video.LocalVideoTrack(stream);
    $scope.videoConf.room.localParticipant.addTrack(screenLocalTrack);

    var video = document.createElement('video');
    $('#test-share-screen').append(video);

    video.srcObject = stream;
    video.play();
  })
  .catch(function (err) {
    console.log(err);
  });
};

谢谢。

Answer 1

我找到了解决方案。

LocalMediaStream 是 MediaStream 的继承，因此我们可以使用“.getTracks()”

这是工作解决方案：

$scope.testShareFirefox = function () {
  navigator.mediaDevices.getUserMedia({
    video: {
      mediaSource: 'screen',
      width: 640,
      height: 480
    },
  })
  .then(function(stream) {
    stream.getTracks().forEach(function(track) {
      $scope.videoConf.room.localParticipant.addTrack(track);
    });

    var video = document.createElement('video');
    $('#test-share-screen').append(video);

    video.srcObject = stream;
    video.play();
    var trackElements = document.querySelectorAll("track");
  })
  .catch(function (err) {
    console.log(err);
  });
};

Firefox 屏幕共享 MediaStreamTrack 到 Twilio

Firefox screen share MediaStreamTrack to Twilio

javascript

firefox

twilio

screensharing