如何以 angularjs 方式将视频的 src 更改为 blob？

Question

我有一个 angularjs 设置，例如：

HTML：

<div ng-app="myApp">
  <div ng-controller="Ctrl">
   <span>{{config.localvideo}}</span>
     <video id="video" autoplay>    </video>
     <button ng-click="click()">Start</button>
  </div>
</div>

javascript 文件：

.controller('Ctrl', function($scope,$window){
 $scope.config = {localvideo:""} ;
  $scope.click = function(){
    navigator.webkitGetUserMedia( {video:true},function (stream) {
    var video = document.getElementById("video");
    video.src = $window.URL.createObjectURL(stream);
    $scope.config = {localvideo: video.src};
        $scope.$apply();
    },function (error) {
    console.log(error); 
    });
 }
});

这按预期工作：当页面加载时，视频只是一个黑色矩形。当我单击按钮时，我必须授予摄像头权限，然后视频显示摄像头。 span 显示了 blob url，这样我就可以看到它发生了。

但是，据我了解，这不是 angularjs 方式。我不应该使用 document.getElementById 或类似的东西，我应该更改 $scope 中的对象，并且 html 元素应该通过 ng-src 的 Angular 魔法进行更新。 我认为应该可以工作的 Javascript：

.controller('Ctrl', function($scope,$window){
 $scope.config = {localvideo:""} ;
  $scope.click = function(){
    navigator.webkitGetUserMedia( {video:true},function (stream) {
        $scope.config = {localvideo: $window.URL.createObjectURL(stream)};
        $scope.$apply();
    },function (error) {
    console.log(error); 
    });
 }
});

如果我使用它，向我的视频标签添加一个属性： ng-src="config.localvideo" ，我希望 $scope.config 会改变，ng-src 会选择它，视频会开始播放。这不会发生。但是，跨度确实会在单击按钮时更新，因此似乎 $scope.config 正在正确更新。谁能解释发生了什么，或者没有发生什么？

感谢您的帮助。 注意：我直接使用 chrome 版本的 getUserMedia，而不是 shim，只是为了在这一点上进行简洁和健全的检查。

Answer 1

要使用“Angular 方式”，您需要编写自己的指令。在指令中访问 DOM 是安全的，因为它们有一个 link 函数，您可以将其视为此特定元素的一种 document.ready。在链接函数中，您知道 Angular 已完成创建 DOM。不使用 getElementById，传递给下面链接函数的“元素”将是您应用此指令的任何内容。

.directive("myStream", function(){
   return {        
      restrict: 'A',
      scope:{config:'='},
      link: function(scope, element, attributes){
       //Element is whatever element this "directive" is on
       navigator.webkitGetUserMedia( {video:true},function (stream) {
         element.src = $window.URL.createObjectURL(stream);
         scope.config = {localvideo: element.src};
         scope.$apply(); //sometimes this can be unsafe.
       });
      }
   }

}

现在在您的视频项目上，您只需添加“my-stream”作为属性并将其传递给 config="config"。

<video my-stream config="config" /> {{config.localVideo}}