2

I'm currently developing a prototype that logs video chat information from third party services like Hangouts, Zoom, etc.

So far I'm unable to get a simple event to log to the console with navigator.mediaDevices.ondevicechange. Using the latest version of Chrome.

https://codepen.io/anon/pen/dqbNKR

I'm using this pen, and all I want to do is just log to the console when my video camera turns on/off. Is ondevicechange the right event?

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/ondevicechange

A devicechange event is sent to a MediaDevices instance whenever a media device such as a camera, microphone, or speaker is connected to or removed from the system. It's a generic Event with no added properties.

I know I can also look at streams of specific elements, but since it's 3rd party services I don't necessarily know which elements to look at.

So how can I detect when my webcam turns on/off in a third party app in the browser?

As I was typing this I came across this, but need to test it.

How to check with JavaScript that webcam is being used in Chrome

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Mk-Etlinger
  • 174
  • 1
  • 13
  • This event fires when the device is being plugged/unplugged from the computer (i.e when it enters/exits the MediaDevicesList). If I understand correctly, what you want is a way to tell when the device as been requested by a script, and this is an other matter. Since modern devices can now handle multiple simultaneous requests to the same device, I'm not sure you can *bulletproofly* check if it is being used. That might even be considered as a privacy threat, since you could know if an other application is using it. But if all you want to know is what happens in your own page.. – Kaiido Aug 19 '18 at 06:04
  • .. then either ask the third party apps devs to expose some event for you, or monkey patch getUserMedia method**s** so you can catch all MediaStreams generated on your page and then listen to their events. – Kaiido Aug 19 '18 at 06:05
  • Right, this callback only works when plugged/unplugged – Rubycon Aug 19 '18 at 10:48
  • Thanks for your help. I'll probably end up using getUserMedia/mediaStreams. I just assumed that since the browser is able to connect to my webcam, then it should also know when a new connection is made. An event that doesn't need to go through getUserMedia first before firing. @Kaiido This will only work on my own browser. – Mk-Etlinger Aug 19 '18 at 14:26

1 Answers1

0

One approach that seems to work on Chrome 113.0.5672.93 and and FF 113.0.1 is listening for the ended event on the video tracks:

navigator
  .mediaDevices
  .getUserMedia({video: {facingMode: "user"}})
  .then(stream => {
    stream.getVideoTracks().forEach(track => {
      track.addEventListener("ended", () => {
        console.log("disabled by user");
      });
    });
    const video = document.createElement("video");
    video.srcObject = stream;
    video.setAttribute("playsinline", true);
    video.play();
  })
  .catch(err => {
    // permission denied
    console.error(err);
  });
ggorlen
  • 44,755
  • 7
  • 76
  • 106