htmltorchmobile-phones

How to light mobile phone flash from a website


I am new on javascript
I need to open a mobile phone flash on a website.
I searched for this topic, but I just found this information and change little bit but still there is error a "ImageCapture is not defined" I source this error too and couldn't find any thing, So I left code below

thank you for lookin at :)

//Test browser support
function doFunction() {
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];
        console.log("sad1");
        // 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];
            console.log(track);
            //Create image capture object and get camera capabilities
            const imageCapture = new ImageCapture(track)
            const photoCapabilities = imageCapture.getPhotoCapabilities().then(() => {
                console.log("sad3");

                //todo: check if camera has a torch

                //let there be light!
                const btn1 = document.querySelector('.switch1');
                const btn2 = document.querySelector('.switch2');

                btn1.addEventListener('click', function(){
                    console.log("dsfsdf");

                    track.applyConstraints({
                        advanced: [{torch: true}]
                    });
                });
                btn2.addEventListener('click', function(){
                    track.applyConstraints({
                        advanced: [{torch: false}]
                    });
                });
            });
        });
    });




    //The light will be on as long the track exists


}



    console.log("sddsf");

}
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>click ob/of to open/close flash</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" type="text/css" href="site.css">

        <script src="site.js"></script>

    </head>
    <body>
    <input id="switch1" type="button" value="On" onclick="doFunction();" />
    <input id="switch2" type="button" value="Off" onclick="doFunction();" />
        <h1>Hello World</h1>

    </body>

</html>

but when I try it at localhost, I got this error:-

enter image description here

but it work properly at https://jsfiddle.net/Mustafagulsoy/7efsb0rk/ if anyone can help me, I will be grateful


Solution

  • I solve my problem it cause because my html code doesnt find javascript code I left the last version my code, if you dont understand somewhere you can ask me again

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <div class="video-wrap">
            <video autoplay></video>
        </div>
    
    
    
        <div class="controler">
            <button class="switch1">On </button>
            <button class="switch2"> Off</button>
    
        </div>
    
        <canvas id="canvas" width="640" height="480"></canvas>
    
    
        <script>
            navigator.mediaDevices.getUserMedia({
                video: {
                    facingMode: 'environment',
                }
            })
                .then((stream) => {
                    const video = document.querySelector('video');
                    video.srcObject = stream;
    
                    // get the active track of the stream
                    const track = stream.getVideoTracks()[0];
    
                    const btn1 = document.querySelector('.switch1');
                    const btn2 = document.querySelector('.switch2');
                    btn1.addEventListener('click', function(){
                            track.applyConstraints({
                            advanced: [{torch: true}]
                        });
                    });
                    btn2.addEventListener('click', function(){
                        track.applyConstraints({
                            advanced: [{torch: false}]
                        });
                    });
    
    
    
    
                })
                .catch(err => console.error('getUserMedia() failed: ', err));
        </script>
    
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>