在AngularJs路线变更后的HTML5相机不关闭 [英] HTML5 camera does not switch off after route change in AngularJs

问题描述

我测试HTML5的视频功能。随着指令 userMedia ，我能够通过<一个我的相机上打开我的MacBook href=\"http://dev.w3.org/2011/webrtc/editor/getusermedia.html\"><$c$c>navigator.getUserMedia() （通过适配器实际上，使其跨浏览器 - 至少是那些谁支持它）。

I'm testing the video capabilities of HTML5. With a directive userMedia, I'm able to switch on my camera on my MacBook via navigator.getUserMedia() (actually via an adapter to make it cross browser - at least those who support it).

但是，当我改变我的 $路线，我不认为自己了（华友世纪），但相机并没有关闭（绿色指示灯一直亮着）。只有刷新页面重置一切（这是正常的）。

But when I change my $route, I don't see myself anymore (hurray), but the camera does not switch off (the green light stays on). Only refreshing the page resets everything (which is normal).

我希望看在改变 $ location.path（）会做的伎俩：

I was hoping that watching for a change in $location.path() would do the trick:

        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 必要的日志），但相机不切换关闭。

detachMediaStream gets executed (I see the necessary logs in console.log), but the camera does not switch off.

不知道如何解决这个问题？如若我莫名其妙地卸载元件？

推荐答案

我发现这个问题的原因。在<一个href=\"http://docs.webplatform.org/wiki/apis/webrtc/LocalMediaStream\"><$c$c>LocalMediaStream其中，当镜头切换时，需要使用停止（），可以停止创建功能。

I found the cause of the problem. The LocalMediaStream which was created when the camera switches on, needs to be stopped by using the stop() function.

要创建 LocalMediaStream 对象的引用必须保持，其连接到视频元素时：

A reference to the created LocalMediaStream object has to be kept, when attaching it to the video element:

 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 功能，当 $摧毁事件发生（感谢你， 约瑟夫·西尔伯 ）

This LocalMediaStream reference has to added to detachMediaStream function, when the $destroy event occurs (thank you for that, Joseph Silber):

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

在 LocalMediaStream 对象，我需要执行停止（）功能：

On the LocalMediaStream object I need to execute the stop() function:

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

        // stopping stream (camera, ...)
        stream.stop();
    };

这篇关于在AngularJs路线变更后的HTML5相机不关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！