微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何从网站上点亮手机闪光灯

如何解决如何从网站上点亮手机闪光灯

我是 javascript
的新人 我需要在网站上打开手机闪光灯。
搜索了这个主题,但我只是找到了这个信息并稍作更改,但仍然有错误 "ImageCapture is not defined" 我也是这个错误的来源,但找不到任何东西,所以我在下面留下了代码

感谢您的关注:)

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

但是当我在本地主机上尝试时,出现此错误:-

enter image description here

但它在 https://jsfiddle.net/Mustafagulsoy/7efsb0rk/ 正常工作 如果有人可以帮助我,我将不胜感激

解决方法

我解决了我的问题,因为我的 html 代码没有找到 javascript 代码我留下了我的最后一个版本的代码,如果你有不明白的地方可以再问我

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。