javascript - 如何以 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，而不是垫片，只是为了简洁和健全性检查。

Answer 1

要以“Angular Way”执行此操作，您需要编写自己的指令。在指令中访问 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}}