Kamera HTML5 nie wyłącza się po zmianie trasy w AngularJs

Question

Testuję możliwości wideo HTML5. Dzięki dyrektywie userMedia mogę włączyć mój aparat na moim MacBooku przez navigator.getUserMedia() (w rzeczywistości za pomocą adaptera, aby umożliwić przeglądarkę - przynajmniej tym, którzy ją obsługują).

Ale kiedy zmieniam moją $route, nie widzę już siebie (hurra), ale kamera się nie wyłącza (zielone światło pozostaje włączone). Tylko odświeżenie strony powoduje zresetowanie wszystkiego (co jest normalne).

miałem nadzieję, że obserwując zmiany $location.path() by rade:

 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 (chrom):

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 zostaje wykonana (widzę potrzebne logi w console.log), ale aparat się nie wyłącza.

Każdy pomysł, jak rozwiązać ten problem? Czy powinienem jakoś wyładować element?

Answer 1

Znalazłem przyczynę problemu. Model LocalMediaStream, który został utworzony po włączeniu aparatu, musi zostać zatrzymany przy użyciu funkcji stop().

Odwołanie do utworzonego LocalMediaStream obiekt ma zostać utrzymany, podczas podłączania go do elementu wideo:

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

Ten LocalMediaStream odniesienia musi dodany do detachMediaStream funkcji, gdy wystąpi zdarzenie $destroy (dziękuję za że Joseph Silber):

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

na obiekcie LocalMediaStream muszę wykonać funkcję stop():

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

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

Answer 2

W Firefoksie, już wspierać element.mozSrcObject = strumień (stać element.srcObject, i które powinny mieć Chrome wkrótce chociaż nie wiem, czy oni poprzedzić go na razie). Ułatwia to obsługę, ponieważ nie musisz potrzebować, aby zachować drugie odniesienie do niego. (element.mozSrcObject.stop(); element.mozSrcObject = null)