web-dev-qa-db-ja.com

ウェブサイトを介して電話のカメラライトを制御することは可能ですか？

ウェブサイトを介して電話のカメラライトを制御することは可能ですか？ ChromeまたはFirefoxと言います。AndroidまたはiOSアプリを使用すると、多くの懐中電灯アプリがそこにあります。そして、 getUserMediaファミリーの関数を介したカメラ。そうでない場合、誰がそれがいつ利用可能になるか知っていますか？

javascriptgoogle-chromemobilegetusermedia
21
TinyTheBrontosaurus

これがウェブサイト用の小さな「トーチアプリ」です：

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

編集2：これはChrome（およびおそらくOpera）でのみ機能します。 iOSのChromeでは機能しません 。Chromeがカメラにアクセスできないためです 。今のところAndroidではテストできません。出力付きの新しいjsfiddleを作成しました。 Androidの電話を使用していても機能しない場合は、おそらく理由がわかります： https://jsfiddle.net/jpa1vwed/

自由にデバッグ、コメント、編集してください。

21
Daniel Budick

MediaStream Image Capture API を使用するには、VideoStreamTrackからImageCaptureを作成し、オプション"fillLightMode"を設定します。 "flash"または"torch"へ。例：

<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 in Chrome the flag "chrome：// flags /＃enable-experimental-web-platform-features"は"true"に設定されます
  • FirefoxでImageCaptureを有効にするには、フラグ"dom.imagecapture.enabled" in "about：config"をに設定する必要があります「true」。 しかし"setOptions"は、これを書いている時点ではサポートされていません！

以下も参照してください。

5
ltlBeBoy