How to get webcam video feed in a firefox addon? - firefox-addon

Question

I am currently developing an addon where the requirement is to capture the webcam video. I did some testing and noticed that navigator.mediaDevices.getUserMedia() is available within panel and hence have written the following content script for the panel to get webcam video feed from addon.
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);
Now the problem here is the code is perfectly working when from a webpage i.e. if I save the open the panel.html file directly in the browser with proper adjustment of self.options and self.port lines. But when I am using the code in the contentscript for panel in my addon, I am getting the following error
JavaScript error: resource:///modules/webrtcUI.jsm, line 186: TypeError: stringBundle is undefined
Now that is an error from the inbuilt jsm module in firefox. Is there a way I can get past that error or any other way to get webcam video feed in my addon?
Thanks