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

这可以按预期工作：当页面加载时，视频只是一个黑色矩形。当我点击按钮时，我必须给予相机许可，然后视频显示相机。跨度显示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}}

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

1 个答案: