Menu
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?
470
You can end the stream directly using the stream object returned in the success handler to getUserMedia.
In order to put the camera and microphone permission off, tap on the three dots at the top right corner of the Chrome Page and open the Privacy and Security option. Now, tap on the Site Settings and then Microphone or Camera. Finally, select the checkbox denying access.
getUserMedia() is a part of the webRTC media capture API and is used to get access to the camera and the microphone connected to the user device (user computer, smartphone, etc.) from the browser.
getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
