È possibile controllare la luce della videocamera su un telefono tramite un sito Web?

Question

È possibile controllare la luce della telecamera su un telefono tramite un sito Web? Dillo tramite Chrome o Firefox. So che è possibile utilizzare un'app per Android o iOS, che ci sono molte app torcia. E so che si può controllare le telecamere tramite la famiglia di funzioni getUserMedia. In caso contrario, qualcuno sa quando sarà disponibile?

Answer 1

Ecco un piccolo "torcia-app" per un sito web:

Edit: Ho anche fatto un jsfiddle

//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: { 
 
     deviceId: camera.deviceId, 
 
     facingMode: ['user', 'environment'], 
 
     height: {ideal: 1080}, 
 
     width: {ideal: 1920} 
 
     } 
 
    }).then(stream => { 
 
     const track = stream.getVideoTracks()[0]; 
 

 
     //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(){ 
 
      track.applyConstraints({ 
 
      advanced: [{torch: true}] 
 
      }); 
 
     }); 
 
     }); 
 
    }); 
 
    }); 
 
    
 
    //The light will be on as long the track exists 
 
    
 
    
 
}

<button class="switch">On/Off</button>

Il codice è fortemente ispirato da questo repository, questo webseries e questo blog-post

Answer 2

È possibile utilizzare il MediaStream Image Capture API creando un ImageCapture da un VideoStreamTrack e impostando l'opzione "fillLightMode"-"flash" o "torcia". Esempio:

<video autoplay="true"></video> 
<img /> 
<button onclick="takePhoto()">Take Photo</button> 
<script type="text/javascript"> 
    var imageCapture = null; 
    var deviceConfig = { 
     video: { 
      width: 480, 
      height: 640, 
      facingMode: "environment", /* may not work, see https://bugs.chromium.org/p/chromium/issues/detail?id=290161 */ 
      deviceId: null 
     } 
    }; 

    var imageCaptureConfig = { 
     fillLightMode: "torch", /* or "flash" */ 
     focusMode: "continuous" 
    }; 

    // get the available video input devices and choose the one that represents the backside camera 
    navigator.mediaDevices.enumerateDevices() 
      /* replacement for not working "facingMode: 'environment'": use filter to get the backside camera with the flash light */ 
      .then(mediaDeviceInfos => mediaDeviceInfos.filter(mediaDeviceInfo => ((mediaDeviceInfo.kind === 'videoinput')/* && mediaDeviceInfo.label.includes("back")*/))) 
      .then(mediaDeviceInfos => { 
       console.log("mediaDeviceInfos[0].label: " + mediaDeviceInfos[0].label); 

       // get the device ID of the backside camera and use it for media stream initialization 
       deviceConfig.video.deviceId = mediaDeviceInfos[0].deviceId; 
       navigator.mediaDevices.getUserMedia(deviceConfig) 
         .then(_gotMedia) 
         .catch(err => console.error('getUserMedia() failed: ', err)); 
      }); 

    function takePhoto() { 
     imageCapture.takePhoto() 
       .then(blob => { 
        console.log('Photo taken: ' + blob.type + ', ' + blob.size + 'B'); 

        // get URL for blob data and use as source for the image element 
        const image = document.querySelector('img'); 
        image.src = URL.createObjectURL(blob); 
       }) 
       .catch(err => console.error('takePhoto() failed: ', err)); 
    } 

    function _gotMedia (mediastream) { 
     // use the media stream as source for the video element 
     const video = document.querySelector('video'); 
     video.srcObject = mediastream; 

     // create an ImageCapture from the first video track 
     const track = mediastream.getVideoTracks()[0]; 
     imageCapture = new ImageCapture(track); 

     // set the image capture options (e.g. flash light, autofocus, ...) 
     imageCapture.setOptions(imageCaptureConfig) 
       .catch(err => console.error('setOptions(' + JSON.stringify(imageCaptureConfig) + ') failed: ', err)); 
    } 
</script> 

Nota:

• A partire da questa scrittura API è ancora in fase di sviluppo e potrebbe cambiare in futuro.
• Per abilitare ImageCapture in Chrome bandiera "chrome: // flags/# enable-sperimentali-piattaforma web-caratteristiche" deve essere impostato a "true"
• Per abilitare ImageCapture in Firefox la bandiera "dom.imagecapture.enabled" in "about: config" deve essere impostato su "true". Ma "setOptions" non è supportato al momento della stesura!

Consulta anche:

• Mediastream Image Capture su GitHub
• NPM modulo ImageCapture polyfill