Question

我如何停止并退出纯js，在WEBRTC api js中流式摄像头，我在我的代码中有以下脚本：

<script type="text/javascript">
$(document).ready(function() {
    $("#abrirModal").click(function() {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        var constraints = {
            audio: false,
            video: true
        };
        var live = document.getElementById("live");

        function successCallback(stream) {
            window.stream = stream; // stream available to console
            if (window.URL) {
                live.src = window.URL.createObjectURL(stream);
            } else {
                live.src = stream;
            }
            $("#myModal").modal("show");
            window.setTimeout(function() {
                $("#myModal").modal("hide");
            }, 9000);
        }

        function errorCallback(error) {
            console.log("navigator.getUserMedia error: ", error);
        }

     navigator.getUserMedia(constraints, successCallback, errorCallback);
    });
});
 </script>

如何关闭并退出其他file.js中的网络摄像头，例如：

  function exitWebCam () {  
     document.getElementById("live")."close the web cam";
  }

Answer 1

通过关闭所有曲目来结束流： stream.getTracks().forEach(function(track) { track.stop(); })

Answer 2

Philipp说的话。同时清除对流的所有引用，以便可以释放它。这里有一个错误：

live.src = stream;

错误（src接受网址，而不是网址）。幸运的是，它永远不会运行，因为所有使用WebRTC的浏览器中都存在window.URL。但是createObjectURL会导致相机继续使用。而是这样做：

if (typeof live.srcObject == "object") {
    live.srcObject = stream;
} else {
    live.src = window.URL.createObjectURL(stream)
}

或者只是live.srcObject = stream，因为srcObject目前已在所有WebRTC浏览器中实施（Chrome 54+）。它正确地处理资源，因此当您稍后执行live.srcObject = null时，浏览器知道它可以垃圾收集流（如果您错过了在任何轨道上调用track.stop()，则关闭相机。）

createObjectURL非常糟糕且已弃用，除非您记得revokeObjectURL，否则请将资源分配到页面导航。这就是为什么你的相机永远不会自行停止，万一你想知道，所以如果你在代码中看到这种模式，请帮助标记出来。

比较

尝试这些进行比较。视频在2秒后消失，但请注意您的相机指示灯和浏览器内的录制指示。首先使用srcObject（Chrome https fiddle）：

（在Firefox中大约10秒后凸轮指示灯和指示灯应熄灭;在Chrome中大约需要20秒。）

＆＃13;

var wait = ms => new Promise(resolve => setTimeout(resolve, ms));

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => video.srcObject = stream)
  .then(() => wait(2000))
  .then(() => video.srcObject = null)
  .catch(e => console.log(e.name + ": "+ e.message));

＆＃13;

<video id="video" width="160" height="120" autoplay></video>

＆＃13;

然后使用createObjectURL（不含revokeObjectURL）（Chrome https fiddle）：

（在两种浏览器中永远存在。）

＆＃13;

var wait = ms => new Promise(resolve => setTimeout(resolve, ms));

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => video.src = URL.createObjectURL(stream))
  .then(() => wait(2000))
  .then(() => video.srcObject = null)
  .catch(e => console.log(e.name + ": "+ e.message));

＆＃13;

<video id="video" width="160" height="120" autoplay></video>

＆＃13;

明确调用的{p> track.stop()将停止播放，但前提是您已停止所有曲目，因为现在可以克隆曲目，这可能比一般听起来更容易。所以请避免使用createObjectURL。

如何（停止，退出）webrtc导航器用户媒体JavaScript中的视频

2 个答案:

比较