Turn off webcam/camera after using getUserMedia
I'm developing a Chrome Extension that uses the background page to access the user's webcam.
Users are given the option to turn the camera off.
The stream appears to be being turned off. The relevant functions are no longer receiving the stream. However the webcam light (currently being developed and tested on a mac book pro) does not turn off.
Any ideas?
Here's my code for setting up the stream:
if (navigator.webkitGetUserMedia!=null) {
var options = {
video:true,
audio:false
};
navigator.webkitGetUserMedia(options,
function(stream) {
vid.src = window.webkitURL.createObjectURL(stream);
localstream = stream;
vid.play();
console.log("streaming");
},
function(e) {
console.log("background error : " + e);
});
}
And here's my method for turning off the stream:
function vidOff() {
clearInterval(theDrawLoop);
ExtensionData.vidStatus = 'off';
vid.pause();
vid.src = "";
localstream.stop();
DB_save();
console.log("Vid off");
}
Any obvious I'm missing?
Answer
localstream.stop() has been depreciated and no longer works. See this question and answer: Stop/Close webcam which is opened by navigator.getUserMedia
And this link:
Essentially you change localstream.stop() to localstream.getTracks()[0].stop();
Here's the source in the question updated:
<html>
<head>
<script>
var console = { log: function(msg) { div.innerHTML += "<p>" + msg + "</p>"; } };
var localstream;
if (navigator.mediaDevices.getUserMedia !== null) {
var options = {
video:true,
audio:false
};
navigator.webkitGetUserMedia(options, function(stream) {
vid.src = window.URL.createObjectURL(stream);
localstream = stream;
vid.play();
console.log("streaming");
}, function(e) {
console.log("background error : " + e.name);
});
}
function vidOff() {
//clearInterval(theDrawLoop);
//ExtensionData.vidStatus = 'off';
vid.pause();
vid.src = "";
localstream.getTracks()[0].stop();
console.log("Vid off");
}
</script>
</head>
<body>
<video id="vid" height="120" width="160" muted="muted" autoplay></video><br>
<button onclick="vidOff()">vidOff!</button><br>
<div id="div"></div>
</body>
</html>