4

我一直在尝试在网页上捕获网络摄像头视频。我注意到我使用的方法不是创建可搜索的视频。我不确定这是因为我做错了什么,还是 Firefox 中存在错误。

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

http://jsfiddle.net/2gkvddme/14/

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();
4

0 回答 0