Ist es möglich die Kamera zu Steuern Licht auf einem Handy über eine Webseite?

Ist es möglich, die Steuerung der Kamera Licht auf einem Handy über eine Webseite? Sagen durch Chrome oder Firefox. Ich weiß, es ist möglich mit einem Android-oder iOS-app, die viele Taschenlampe apps da draußen. Und ich weiß, man kann die Steuerung der Kameras über die getUserMedia Familie von Funktionen. Wenn nicht, weiß jemand Wann es verfügbar sein wird?

Haben Sie jemals herauszufinden, ob Sie dies tun können, und wenn ja, wie?
NÖ :-/ noch nicht

InformationsquelleAutor TinyTheBrontosaurus | 2016-06-16

Hier ist eine kleine "Taschenlampe-app" für eine website:

Edit 1: ich habe auch einen jsfiddle

JS:

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

HTML:

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

Der code ist stark inspiriert von dieser repository, diese webseries und diese blog-post

Edit 2:
Dieses tut funktioniert nur in Chrome (und vielleicht Opera). Es funktioniert nicht in Chrome auf iOS, da Chrome kein Zugriff auf die Kamera.
Ich kann nicht testen Sie es auf android jetzt. Ich habe eine neue jsfiddle, mit einer Ausgabe. Wenn Sie ein android-Handy und es funktioniert nicht für Sie, es wird vielleicht auch sagen, warum:
https://jsfiddle.net/jpa1vwed/

Fühlen Sie sich frei, um zu Debuggen, kommentieren und Bearbeiten.

Funktioniert das unter iOS? Ich habe eine funktionierende app auf die Kamera zugreifen, mit getUserMedia in Safari 11 auf iOS aber der Schnitt ist nicht für mich arbeiten. Hat jemand diese getestet?
Nicht funktioniert für die meisten browser...
Es funktioniert nur in Chrome, da ImageCapture wird nur unterstützt in Chrome und Opera (den ich nicht habe Opera installiert, so kann ich nicht testen) für jetzt. Es funktioniert nicht in chrome auf dem Iphone nicht mehr, ich bin derzeit auf der Suche hinein.
Chrome kann nicht auf die Kamera zugreifen, iphone (stackoverflow.com/questions/51501642/...), so wird dies nicht funktionieren... ich werde es testen, in chrome auf android, ich muss ein android-Handy zum ersten mal.
Ich versuchte es auf meinem alten Galaxy S5, kann es nicht finden, eine Kamera mit Taschenlampe. Derzeit habe ich nicht mehr Zeit an diesem problem, ich hoffe jemand anderes findet eine Lösung.

InformationsquelleAutor Daniel Budick

Können Sie die MediaStream-Bild-Capture-API durch die Schaffung einer ImageCapture von einem VideoStreamTrack und Einstellung der option "fillLightMode" zu "flash" oder "Fackel". Beispiel:

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

Hinweis:

Wie diese schreiben, die API ist noch in Entwicklung und könnte sich in Zukunft ändern.
Für die Aktivierung ImageCapture in Chrome, die Flagge "chrome://flags/#enable-experimental-web-platform-features" eingestellt werden "true"
Für die Aktivierung ImageCapture in Firefox die Flagge "dom.imagecapture.aktiviert" in "about:config" eingestellt werden "true". Aber "setOptions" wird nicht unterstützt schreiben!