使用Firefox WebRTC媒体录制器制作可观看的视频

我一直在尝试在网页上捕捉网络摄像头视频。我注意到我使用的方法不是创建一个可查看的视频。我不确定这是因为我做错了什么，还是Firefox中有bug

有没有办法解决或解决这个问题？我在想象更糟糕的情况，我可能需要用FFmpeg之类的工具来解决这个问题

var-recordVideo={
视频选项：{
音频：是的，
视频：真的
},
初始化：函数（选项）{
this.startMediaStream（）
},
startMediaStream:函数（）{
this.capture=navigator.mediaDevices.getUserMedia（this.videoOptions）；
this.capture.then（this.mediaStreamSuccess.bind（this））；
this.capture.catch（this.webcamErrorHandler）；
this.el_video=document.querySelector（“视频”）；
this.el_Message=document.querySelector（'.Message'）；
},
webcamErrorHandler:函数（e）{
this.el_Message.innerHTML='错误：'+e；
},
mediaStreamSuccess:函数（mediaStream）{
this.mediaStream=mediaStream；
this.mediaRecorder=新的mediaRecorder（this.mediaStream）；
this.mediaRecorder.ondataavailable=this.mediaStreamCapture.bind（this）；
this.el_video.src=window.URL.createObjectURL（this.mediaStream）；
this.startVideoHandler（）；
},
startVideoHandler:函数（）{
此.mediaRecorder.start（0）；
document.querySelector（'button'）.addEventListener（'click'，this.mediaRecordStop.bind（this））；
}, 
mediaRecordStop:函数（）{
this.mediaRecorder.stop（）；
},
mediaStreamCapture:功能（数据可用）{
this.mediaRecorder.ondataavailable=null；
var videoBlob=新Blob（[dataavailable.data]{
类型：dataavailable.data.type
});
this.mediaStream.stop（）；
var blobURL=window.URL.createObjectURL（videoBlob）；
this.el_video.src=blobURL；
this.el_Message.innerHTML=''；
},
}
recordVideo.init（）；

bugzilla中有一个问题。ffmpeg解决了这个问题，但我有一些音频同步问题

var recordVideo = {
    videoOptions: {
        audio: true,
        video: true
    },
    init: function(options){
        this.startMediaStream()
    },
    startMediaStream: function(){
        this.capture = navigator.mediaDevices.getUserMedia(this.videoOptions);
        this.capture.then(this.mediaStreamSuccess.bind(this));
        this.capture.catch(this.webcamErrorHandler);
        this.el_video = document.querySelector('video');
        this.el_Message = document.querySelector('.message');
    },
    webcamErrorHandler: function(e) {
        this.el_Message.innerHTML = 'error: ' + e;
    },
    mediaStreamSuccess: function(mediaStream) {
        this.mediaStream = mediaStream;
        this.mediaRecorder = new MediaRecorder(this.mediaStream);
        this.mediaRecorder.ondataavailable = this.mediaStreamCapture.bind(this);
        this.el_video.src = window.URL.createObjectURL(this.mediaStream);
        this.startVideoHandler();
    },
    startVideoHandler: function(){
        this.mediaRecorder.start(0); 
        document.querySelector('button').addEventListener('click', this.mediaRecordStop.bind(this));
    }, 
    mediaRecordStop: function(){
        this.mediaRecorder.stop();  
    },
    mediaStreamCapture: function(dataavailable) {
        this.mediaRecorder.ondataavailable = null;  
        var videoBlob = new Blob([dataavailable.data], {
            type: dataavailable.data.type
        });

        this.mediaStream.stop();
        var blobURL =  window.URL.createObjectURL(videoBlob);
        this.el_video.src = blobURL;
        this.el_Message.innerHTML = '<a href="' + blobURL + '">' + blobURL + '</a>';
    },
}

recordVideo.init();