0

I have a project in nodeJS which I use on System as well as on Mobile.

I need to perform the below steps - 1. Add a button to turn on/off the flashlight. 2. The button should only be displayed if the feature is supported by the phone and the browser 3. The light should default to off

When I am using the below-mentioned code it is enabling my WebCam flash from my System and it is not working on my mobile.

Flash Light On/Off

//Test browser support
const SUPPORTS_MEDIA_DEVICES = 'mediaDevices' in navigator;

if (SUPPORTS_MEDIA_DEVICES) {
  //Get the environment camera (usually the second one)
  navigator.mediaDevices.enumerateDevices().then(devices => {

    const cameras = devices.filter((device) => device.kind === 'videoinput');

    if (cameras.length === 0) {
      throw 'No camera found on this device.';
    }
    const camera = cameras[cameras.length - 1];

    // Create stream and get video track
    navigator.mediaDevices.getUserMedia({
      video: true
    }).then(stream => {
      const track = stream.getVideoTracks()[0];
      track.applyConstraints({
        advanced: [{torch: false}]
      });
      //Create image capture object and get camera capabilities
      const imageCapture = new ImageCapture(track)
      const photoCapabilities = imageCapture.getPhotoCapabilities().then(() => {

        //todo: check if camera has a torch

        //let there be light!
        const btn = document.querySelector('.switch');
        btn.addEventListener('click', function(){
            isTorchOn = !isTorchOn;
          track.applyConstraints({
            advanced: [{torch: isTorchOn}]
          });
        });
      });
    });
  });
  //The light will be on as long the track exists
}

Can anyone suggest a solution?

  • If your code needs to work on every mobile I don not think this can be achieved. As far as I know only on Chrome it is possible to access the Camera controls via Browser. – Torf May 15 '20 at 07:49
  • Yes, Chrome will work for me. I am accessing it through chrome in my mobile. – Dhananjay Gour May 15 '20 at 07:52

1 Answers1

1

For Web RTC, use this for Torch support check at Device

var imageCapture = new ImageCapture(videoTrack);

var photoCapability = imageCapture.getPhotoCapabilities();

use this for Torch support check at browser

var mediaCapabilities = navigator.mediaDevices.getSupportedConstraints ()
 
 if (mediaCapabilities.torch && photoCapability.fillLightMode.length > 0){
          document.getElementById('torchButton').classList.remove("hidden");
          document.getElementById('torchButton').classList.add("block");
          console.log("Torch is enabled");
      }

then based on call in function

function startTorch(){
    var torchCheckBox = document.getElementById("torchButton");
    if(torchCheckBox.checked == true){
    videoTrack.applyConstraints({
        advanced: [{torch: true}]
      }).then(function() {
        //Do Success code here
      }).catch(handleError);
    }
    else{
        videoTrack.applyConstraints({
            advanced: [{torch: false}]
          }).then(function() {
            //success code here  
          }).catch(handleError);
    }
}

Hope this will help!