Có thể điều khiển ánh sáng camera trên điện thoại thông qua một trang web không?

Question

Có thể điều khiển ánh sáng camera trên điện thoại thông qua một trang web không? Nói qua Chrome hoặc Firefox. Tôi biết có thể sử dụng ứng dụng Android hoặc iOS, ứng dụng này có nhiều ứng dụng đèn pin. Và tôi biết một người có thể điều khiển máy ảnh thông qua họ các chức năng của getUserMedia. Nếu không, có ai biết khi nào nó sẽ có sẵn không?

Answer 1

Dưới đây là một chút "ngọn đuốc ứng dụng" cho một trang web:

Chỉnh sửa: Tôi cũng đã thực hiện một 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>

Mã này được lấy cảm hứng từ repository này, webseries này và điều này blog-post

Answer 2

Bạn có thể sử dụng MediaStream Image Capture API bằng cách tạo ra một ImageCapture từ một VideoStreamTrack và thiết lập các tùy chọn "fillLightMode"-"flash" hoặc "ngọn đuốc". Ví dụ:

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

Lưu ý:

• Trong bài viết này API vẫn đang được phát triển và có thể thay đổi trong tương lai.
• Đối với phép ImageCapture trong Chrome cờ "chrome: // flags/# enable-nghiệm-web-platform-tính năng" phải được thiết lập để "true"
• Đối với phép ImageCapture trong Firefox cờ "dom.imagecapture.enabled" trong "about: config" phải được đặt thành "true". Nhưng "setOptions" không được hỗ trợ theo văn bản này!

Xem thêm:

• Mediastream Image Capture trên GitHub
• NPM mô-đun ImageCapture polyfill