使用相同的按钮 Javascript 打开关闭相机答案

【问题标题】：Open Close Camera with same button Javascript使用相同的按钮 Javascript 打开关闭相机
【发布时间】：2021-05-04 12:05:52
【问题描述】：

我有问题。当我点击相机按钮时（下面有代码）我可以打开相机，但是当我点击同一个按钮时如何关闭相机。

我的代码的一部分。

按钮： <a type="button" onclick="cameraOff()" name="button" id="button"> <i class="fas fa-video fa-2x cam-btn"></i> </a>

<video id="video" width="640" height="480" autoplay></video>

<script>
    function cameraOff() {

        var video = document.getElementById('video');
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({
                video: true
            }).then(function(stream) {
                video.srcObject = stream;
                video.play();
            });
        }
    }
</script>

【问题讨论】：

cameraOff 函数不必是 async 函数，因为您从不使用 await。
另外，当您打算使用<button> 时，请不要使用<a>。 <a type="button" 通常是一个错误。
这能回答你的问题吗？ Turn off webcam/camera after using getUserMedia

标签： javascript html jquery css web

【解决方案1】：

替换 video.srcObject = stream; video.play(); 与video.srcObject={}; video.pause(); stream.stop(); reference to my answer

【讨论】：

如果您已经在其他地方回答过这个问题，为什么不将该问题标记为重复？
那很好，但为什么你也回答了？
@evolutionxbox 试图在过程完成时回答他的问题 :) 我什至引用了另一个答案，但你应该标记它是对的。
我查看了链接上的页面，但我认为相机已经打开并且有一个按钮可以将其关闭。想象一下，您可以一键打开相机，再次单击时将其关闭。@evolutionxbox
@vikbaris How to toggle on/off buttons

【解决方案2】：

检查此沙盒https://codesandbox.io/s/video-onoff-js-zyrxh?file=/index.html

function cameraoff() {
        const stream = videoElem.srcObject;
        if (stream) {
          const tracks = stream.getTracks();

          tracks.forEach(function (track) {
            track.stop();
          });

          videoElem.srcObject = null;
       }
  }

【讨论】：