WebRTC getUserMedia:切换音频流和视频+音频流
WebRTC getUserMedia: Switching between Audio and Video+Audio Streams
我的 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();
原来我的问题不是 WebRTC 或媒体流,而是我如何将流提供给 <video>
元素。我通过每次启动流时处理和重新创建视频元素来摆脱黑色流,而不是仅仅将它的 source
分配给流。
我的 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();
原来我的问题不是 WebRTC 或媒体流,而是我如何将流提供给 <video>
元素。我通过每次启动流时处理和重新创建视频元素来摆脱黑色流,而不是仅仅将它的 source
分配给流。