是否可以通過網站控制手機上的照相機指示燈？

Question

是否可以通過網站控制手機上的照相機指示燈？通過Chrome或Firefox說。我知道有可能使用Android或iOS應用程序，其中有很多手電筒應用程序。而且我知道可以通過getUserMedia系列功能控制相機。如果沒有，有人知道它何時可用嗎？

Answer 1

這裏是一個小 「火炬的應用程序」 的網站：

編輯：我也做了一個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>

的代碼在很大程度上受到這個啓發repository，這webseries這blog-post

Answer 2

您可以通過從VideoStreamTrack創建ImageCapture中和設置選項「fillLightMode」到「閃」或「火炬」使用MediaStream Image Capture API。例如：

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

注：

• 本文截稿時，該API仍處於開發階段，並在將來可能會改變。
• 爲使ImageCapture中 Chrome的標誌「鉻：//標誌/＃使實驗性的Web平臺的特性」必須被設置爲「真」
• 爲使ImageCapture中在Firefox標誌「dom.imagecapture.enabled」 在 「about：config中」必須被設置爲「真」。 但是在撰寫本文時，不支持「setOptions」！

參見：

• Mediastream Image Capture在GitHub上
• NPM模塊ImageCapture polyfill