HTML5 camera does not switch off after route change in AngularJs

angularjs, camera, html, javascript, video

Solution

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

Problem

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?

Original source