HTML5 camera does not switch off after route change in AngularJs

Question

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?

Answer 1

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.

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

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

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