Czy można sterować oświetleniem aparatu w telefonie za pośrednictwem strony internetowej?

Question

Czy można sterować oświetleniem aparatu w telefonie za pośrednictwem strony internetowej? Powiedz przez Chrome lub Firefox. Wiem, że jest to możliwe dzięki aplikacji na Androida lub iOS, na którą jest dostępnych wiele aplikacji flashowych. I wiem, że można sterować kamerami za pośrednictwem rodziny funkcji getUserMedia. Jeśli nie, czy ktoś wie, kiedy będzie dostępny?

Answer 1

Oto mały "latarka-app" na stronie internetowej:

Edit: Zrobiłem też 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>

Kod jest mocno zainspirowana tym repository, to webseries i to blog-post

Answer 2

Można użyć MediaStream Image Capture API tworząc ImageCapture z VideoStreamTrack i ustawienie opcji "fillLightMode" do "błysk" lub "pochodnia". Przykład:

<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> 

Uwaga:

• Jak to pisze API jest wciąż w fazie rozwoju i mogą ulec zmianie w przyszłości.
• Dla umożliwienia ImageCapture w Chrome Flaga "chrome: // flags/# enable-eksperymentalne-web-Platform-features" musi być ustawiony na "true"
• Dla umożliwienia ImageCapture w przeglądarce Firefox flaga "dom.imagecapture.enabled" w "about: config" musi być ustawiona na "true". Ale "setOptions"nie jest obsługiwane od tego pisania!

Zobacz także:

• Mediastream Image Capture na GitHub
• NPM moduł ImageCapture polyfill