如何在firefox插件中获取网络摄像头视频?

时间:2015-06-03 00:22:48

标签: firefox-addon webcam getusermedia

我目前正在开发一个插件,其中要求是捕获网络摄像头视频。我做了一些测试,发现navigator.mediaDevices.getUserMedia()在面板中可用,因此为面板编写了以下内容脚本,以便从插件中获取网络摄像头视频。

var mediastream;
var mediarecorder;

// Get the instance of mediaDevices object to use.
navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
    getUserMedia: function(c) {
    return new Promise(function(y, n) {
     (navigator.mozGetUserMedia ||
      navigator.webkitGetUserMedia).call(navigator, c, y, n);
    });
  }
} : null);

function startVideoCapture(width, height, framerate) {
  // Check if the browser supports video recording
  if (!navigator.mediaDevices) {
    return;
  }

  // Lets initialize the video settings for use for our video recording session
  var constraints = { audio: false, video: { width: 640, height: 320, framerate: 25 } };

  // Make request to start video capture    
  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    // Lets initialize the timestamp for this video
    var date = new Date();
    var milliseconds = "000" + date.getMilliseconds();
    var timestamp = date.toLocaleFormat("%Y-%m-%d %H:%M:%S.") + milliseconds.substr(-3);

    // Lets make the stream globally available so that we will be able to control it later.
    mediastream = stream;

    // Lets display the available stream in the video element available inside the panel.
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(stream);
    video.onloadedmetadata = function(e) {
        video.play();
    };

    // We are not here to just show the video to screen. Lets get a media recorder to store the video into memory
    mediarecorder = new MediaRecorder(stream);

    // Lets decide what to do with the recorded video once we are done with the recording
    mediarecorder.ondataavailable = function(evt) {
        // recorded video will be available as a blob in evt.data object. 
        // The only way to use it properly is through FileReader Object
        var reader = new FileReader();

        // Lets decide what we are going to do with the data that we will read from blob
        reader.onloadend = function() {
            // create a video object containing the timestamp and the binary video string
            var videoObject = new Object();
            videoObject.timestamp = timestamp;
            videoObject.video = reader.result;

            // send the video to the main script for safe keeping
            self.port.emit("videoAvailable", videoObject);
        }

        // instruct the FileReader to start reading the blob
        reader.readAsBinaryString(evt.data);
    }

    // Lets start the video capture
    mediarecorder.start();
  })
  .catch(function(err) {
    self.port.emit("VideoError", err);
  });
}

function stopVideoCapure(){
  if (mediarecorder !== undefined && mediarecorder !== null) {
    mediarecorder.stop();
  }

  if (mediastream !== undefined && mediastream !== null) {
    mediastream.stop();
  }
}

function updateVideoSettings(settings){
    stopVideoCapture();
    startVideoCapture(settings.width, settings.height, settings.framerate);
}


self.port.on("VideoPreferenceUpdated", updateVideoSettings);

// Start video capture
startVideoCapture(self.options.width, self.options.height, self.options.framerate);

现在问题是代码在网页上完全正常工作,即如果我通过适当调整self.options和self.port行直接在浏览器中保存打开panel.html文件。但是当我在我的插件中使用面板内容中的代码时,我收到以下错误

JavaScript error: resource:///modules/webrtcUI.jsm, line 186: TypeError: stringBundle is undefined

现在这是来自firefox中内置的jsm模块的错误。有没有办法可以通过该错误或任何其他方式在我的插件中获取网络摄像头视频?

由于

0 个答案:

没有答案