jgril 2024-06-14 08:11 采纳率: 83.3%
浏览 36
已结题

在线手电筒追加按钮JS

在国外找到一个在线手电筒按钮,可以借用浏览器,能够控制手机的相机闪光灯发出强光,达之手电筒效果,

但是,只有开启按钮,没有关闭按钮。

想请帮忙加多一个关闭按钮!

<button class="switch">Click to turn ON Flash Light</button>

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

  • 写回答

18条回答 默认 最新

  • 杨同学* 2024-06-14 14:13
    关注

    该回答引用ChatGPT4o, 如有帮助,还请采纳。
    你可以通过添加一个关闭按钮来控制闪光灯的开关。我们需要在原始代码中增加一个关闭按钮,并在JavaScript中添加相应的事件处理逻辑。以下是修改后的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flashlight Control</title>
    </head>
    <body>
        <button class="switch-on">Click to turn ON Flash Light</button>
        <button class="switch-off">Click to turn OFF Flash Light</button>
        
        <script>
        //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);
              imageCapture.getPhotoCapabilities().then(() => {
        
                //todo: check if camera has a torch
        
                //let there be light!
                const btnOn = document.querySelector('.switch-on');
                const btnOff = document.querySelector('.switch-off');
                
                btnOn.addEventListener('click', function() {
                  track.applyConstraints({
                    advanced: [{torch: true}]
                  });
                });
        
                btnOff.addEventListener('click', function() {
                  track.applyConstraints({
                    advanced: [{torch: false}]
                  });
                });
              });
            });
          });
          
          //The light will be on as long the track exists
        }
        </script>
    </body>
    </html>
    

    代码说明:

    1. HTML部分:添加了一个用于关闭闪光灯的按钮 <button class="switch-off">Click to turn OFF Flash Light</button>

    2. JavaScript部分

      • 选择关闭按钮的DOM元素 const btnOff = document.querySelector('.switch-off');
      • 为关闭按钮添加事件监听器,当点击时将闪光灯关闭 btnOff.addEventListener('click', function() { track.applyConstraints({ advanced: [{torch: false}] }); });

    这样,你就可以通过两个按钮分别控制手机相机的闪光灯开关。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(17条)

报告相同问题?

问题事件

  • 系统已结题 6月24日
  • 已采纳回答 6月16日
  • 创建了问题 6月14日