我一直在尝试在网页上捕获网络摄像头视频。我注意到我使用的方法不是创建可搜索的视频。我不确定这是因为我做错了什么,还是 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();