6

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).

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 (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 gets executed (I see the necessary logs in console.log), but the camera does not switch off.

Any idea how to solve this? Should I unload the element somehow?

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に追加する必要があります (ありがとう、Joseph Silber ):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();
    };
于 2013-01-16T19:51:29.560 に答える
0

Firefox では、すでに element.mozSrcObject = stream をサポートしています (element.srcObject になる予定で、当面は接頭辞を付けるかどうかはわかりませんが、すぐに Chrome に搭載する必要があります)。これにより、2 番目の参照を保持する必要がないため、処理が容易になります。(element.mozSrcObject.stop(); element.mozSrcObject = null)

于 2013-04-12T16:11:10.327 に答える