4

我的 Web 应用程序允许用户从同一页面动态创建视频和音频文件，通常在两者之间轮换。

每个录制动作都有自己的实例化和逻辑，包括它们自己的 MediaStreams。

当我初始化音频流然后尝试初始化视频流时会出现问题。录制工作（视频和音频，一旦完成录制就可以播放），但视频流本身显示为空白。

当我在没有先实例化音频流的情况下实例化视频流时，不会发生这种情况 - 在我尝试录制音频然后回来尝试录制视频之前，它工作正常。

我已经确认视频流在实例化时同时具有音频和视频轨道。我无法弄清楚为什么视频轨道显示为空。

我错过了什么？

设置使用基本的 getUserMedia API 录制视频：

// Start stream
var constraints = {
    audio: true,
    video: true
};

navigator.mediaDevices.getUserMedia(constraints)
                  .then(function(mediaStream) { // do stuff with stream }

// Kill stream, both audio and video
mediaStream.getTracks()[0].stop();
mediaStream.getTracks()[1].stop();

设置录制音频。我正在使用 RecorderJS 进行录制： 

navigator.getUserMedia({ audio: true }, function (stream) { 
    var input = that.audio_context.createMediaStreamSource(stream);
    // Initialize the Recorder Library
          var recorder = new Recorder(input);
    recorder.record();
}

// Stop recording 
this.recorder.stop();
this.audio_stream.getTracks()[0].stop();
4

1 回答 1

1

事实证明，我的问题不在于 WebRTC 或媒体流，而在于我如何将流提供给<video>元素。我通过在每次启动流时处理和重新创建视频元素来摆脱黑色流，而不仅仅是将其分配给source流。

于 2018-05-12T20:55:10.877 回答