在AngularJs路线变更后的HTML5相机不关闭(HTML5 camera does not s

我测试HTML5的视频功能。 随着指令userMedia ，我能我的相机通过切换上我的MacBook navigator.getUserMedia()通过适配器实际上，使其跨浏览器-至少是那些谁支持它）。

但是，当我改变我的$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 ），但相机并没有关掉。

不知道如何解决这个问题？ 我应该以某种方式卸载元件？

Answer 1:

我发现这个问题的原因。 所述LocalMediaStream需要通过使用被停止其当摄像机开关上创建的， stop()函数。

将所创建的参考LocalMediaStream对象必须保持，其连接到视频元素时：

 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;
            };

这LocalMediaStream参考已经被加入到detachMediaStream功能，当$destroy事件发生（感谢你， 约瑟夫·西尔伯 ）：

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();
    };

Answer 2:

在Firefox中，我们已经支持element.mozSrcObject =流（成为element.srcObject，以及Chrome应该会能尽快虽然我不知道他们是否会前缀是暂时）。 这使得它更容易处理，因为你并不需要第二参考保持它。 （element.mozSrcObject.stop（）; element.mozSrcObject = NULL）

文章来源: HTML5 camera does not switch off after route change in AngularJs