在AngularJs中更改路由后，HTML5摄像头不会关闭

HTML5 camera does not switch off after route change in AngularJs

本文关键字：摄像头 HTML5 AngularJs 路由      更新时间：2023-09-26

我正在测试HTML5的视频功能。通过指令userMedia，我可以通过navigator.getUserMedia()在MacBook上打开我的相机(实际上是通过适配器使其跨浏览器-至少那些支持它的)。

但是当我换了我的$route，我再也看不到我自己了(哈)，但是相机没有关闭(绿灯一直亮着)。只有刷新页面才会重置所有内容(这是正常的)。

我希望观察$location.path()的变化会有效果:

        link: function(scope, elm, attrs, ctrl) {
            ...
            var path = $location.path();
            scope.$watch(function() {
                return $location.path();
            }, function(value) {
                if (value && value !== path) {
                    $log.info('Location changed, switching off camera');
                    webRTCAdapter.detachMediaStream(elm[0]);
                }
            }, true);
        }

detachMediaStream(铬):

    webRTCAdapter.detachMediaStream = function(element) {
        console.log("Detaching media stream");
        element.pause();
        element.src = '';
        element.parentNode.removeChild(element);
    };
Html: 

<video id="localVideo" width="100%" autoplay="autoplay" user-media="user-media"></video>

detachMediaStream被执行(我在console.log中看到必要的日志)，但相机没有关闭。

知道如何解决这个问题吗?我应该卸载这个元素吗?

我找到了问题的原因。当相机打开时创建的LocalMediaStream需要使用stop()功能来停止。

当将创建的LocalMediaStream对象附加到video元素时，必须保留对它的引用:

 controller: function($element) {
            var self = this;
            self.onUserMediaSuccess = function(stream) {
                $log.info("User has granted access to local media.");
                webRTCAdapter.attachMediaStream($element[0], stream);
                // keep a reference
                self.localStream = stream;
            };

当$destroy事件发生时，这个LocalMediaStream引用必须添加到detachMediaStream函数中(感谢您，Joseph Silber):

scope.$on('$destroy', function() {
   $log.info('Location changed, switching off camera');
   webRTCAdapter.detachMediaStream( elm[0], ctrl.localStream);
});

在LocalMediaStream对象上我需要执行stop()函数:

    webRTCAdapter.detachMediaStream = function(element, stream) {
        console.log("Detaching media stream");
        element.pause();
        element.src = '';
        element.parentNode.removeChild(element);
        // stopping stream (camera, ...)
        stream.stop();
    };

在Firefox中，我们已经支持元素。mozSrcObject =流(成为元素)。srcObject，以及Chrome应该很快，虽然我不知道他们是否会前缀它暂时)。这使得它更容易处理，因为您不需要保持对它的第二个引用。(element.mozSrcObject.stop ();元素。mozSrcObject = null)

相关文章：