6

我正在测试 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);
        }

分离媒体流（Chrome）：

    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），但相机没有关闭。

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

4

2 回答 2

10

我找到了问题的原因。相机开机时创建的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（谢谢你，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();
    };
于 2013-01-16T19:51:29.560 回答
0

在 Firefox 中，我们已经支持 element.mozSrcObject = stream（成为 element.srcObject，Chrome 应该很快会有，但我暂时不知道他们是否会为其添加前缀）。这使得处理起来更容易，因为您不需要保留对它的第二次引用。(element.mozSrcObject.stop(); element.mozSrcObject = null)

于 2013-04-12T16:11:10.327 回答