在AngularJs路由更改後，HTML5攝像頭不會關閉

我正在測試HTML5的視頻功能。通過指令userMedia，我可以通過navigator.getUserMedia()（實際上通過適配器使其跨越瀏覽器 - 至少支持它的人）在我的MacBook上開啓我的相機。在AngularJs路由更改後，HTML5攝像頭不會關閉

但是，當我改變我的$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); 
     }

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得到執行（我在console.log看到必要的日誌），但相機不關閉。

任何想法如何解決這個問題？我應該以某種方式卸載元素嗎？

來源

2013-01-16 asgoth

我找到了問題的原因。攝像機開啓時創建的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-16 19:51:29 asgoth

不適用於我。這段代碼在Opera中運行得非常好。要關閉我的相機LED，我必須重新啓動Chrome窗口（當網絡攝像頭上的LED不可用於其他應用程序時）。 –

在Chrome版本29.0.1547.76中爲我工作m – Spencer

這實際上幫助我成功刪除了範圍銷燬中的html5視頻元素！謝謝！ – chmanie

在Firefox中，我們已經支持element.mozSrcObject =流（成爲element.srcObject，以及Chrome應該會能儘快雖然我不知道他們是否會前綴是暫時）。這使得它更容易處理，因爲您不需要需要第二次參考它。（element.mozSrcObject.stop（）; element.mozSrcObject = null）

來源

2013-04-12 16:11:10 jesup

在AngularJs路由更改後，HTML5攝像頭不會關閉

回答

相關問題