Turn off webcam/camera after using getUserMedia

Question

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?

I don't know about extensions or background pages, but [your code](http://jsfiddle.net/6ydedhg6) works fine in a regular content process on my macbook pro fwiw (light turns off). Do you get any errors? — jib, Jan 26 '15 at 16:32
Sadly none. I think it must be because it's a none visible process it's not updating. — Niazipan, Jan 27 '15 at 17:01

score 48 · Answer 1 · edited May 23 '17 at 12:10

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:

https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

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>

score 15 · Accepted Answer · edited Aug 12 '16 at 10:06

15

The code above works - as shown by @jib here using the above code:

function vidOff() {
    vid.pause();
    vid.src = "";
    localstream.stop();
}

The problem is to do with it being a persistent background page. I'm swapping over to event pages for the Chrome extension as a work around.

edited Aug 12 '16 at 10:06

igracia

3,543
1
18
23

answered Jan 28 '15 at 14:56

Niazipan

995
2
8
16

4

When I use the fiddle and click "video off", the video *does* stop, but the webcam is still turned on. – Walter Roman Jun 26 '18 at 12:40

Turn off webcam/camera after using getUserMedia

2 Answers2

Linked