1

I am working with webRTC and Using https, users can choose whether allow or deny camera and microphone access once and then their choice is saved for the next visits. I want to add some code that would let users turn on or turn off their webcam or microphone at any specific time they want as well as letting them change their camera or microphone device if they have more than one at anytime too

Please help me do that .. thanks

h_h10a
  • 449
  • 5
  • 18
  • 1
    http://stackoverflow.com/questions/15993581/reprompt-for-permissions-with-getusermedia-after-initial-denial – Alex Paramonov Aug 23 '16 at 09:25
  • You can add or not add tracks to the stream or remove them later. If you want to allow a user to disable video you add a button that removes/adds the videotrack to the stream. It's silly to try and do this through allowing/denying the camera and microphone hardware. A user (in a browser at least) can already choose another device by clicking on the camera icon after allowing access. – Kevin Aug 23 '16 at 11:18
  • Note that users of Firefox already get a built-in camera chooser much like what you describe each time `getUserMedia` is called, unless they've grant persistent permission by choosing "Always Allow". – jib Aug 23 '16 at 13:56

1 Answers1

1

Your turn off the camera and microphone by stopping the tracks you received from getUserMedia:

stream.getTracks().forEach(track => track.stop())

To turn them back on, call getUserMedia again.

You can build an in-content camera and/or microphone chooser using enumerateDevices which returns a list of, among other things, deviceIds which you can use with the deviceId constraint to pick a specific device with getUserMedia (use https fiddle in Chrome):

var log = msg => div.innerHTML += msg + "<br>";

navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    var cams = devices.filter(device => device.kind == "videoinput");
    log("You have " + cams.length + " camera(s).");
    if (cams.length) {
      return navigator.mediaDevices.getUserMedia({
        video: { deviceId: { exact: cams[0].deviceId } },
      })
      .then(stream => (video.srcObject = stream));
    }
  })
  .catch(log);
<div id="div"></div><br>
<video id="video" height="120" width="160" autoplay></video>

Note that adapter.js is needed to work with Chrome 52 (fixed in 54).

See the official device selector sample for an already complete demo of that.

jib
  • 40,579
  • 17
  • 100
  • 158
  • It's better to call myStream.removeTrack(myTrack), that way you don't have to initialize it all over again if the user wants to enable it again, you can simply add the track back to the stream. – Kevin Aug 24 '16 at 09:07
  • @Kevin No, that only has an effect on the remote end in Chrome, and not for long, as that technique is non-standard and deprecated. Use `myTrack.enabled = false` if you're only going to stop temporarily, and don't want the user to switch devices, or `pc.removeTrack` and renegotiate. – jib Aug 24 '16 at 13:22