如何通过 angularjs 方法访问视频流对象？答案

【问题标题】：How to access video streaming objects via angularjs approach?如何通过 angularjs 方法访问视频流对象？
【发布时间】：2017-06-01 10:49:29
【问题描述】：

在 HTML5 实施期间有关媒体功能通过引用https://davidwalsh.name/demo/camera.php，它指向

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
   // Not adding `{ audio: true }` since we only want video now
   navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
       video.src = window.URL.createObjectURL(stream);
       video.play();
    });
}

用于视频流对象。

我想使用角度方式来实现这一点，所以我应用了这些更改：

var video = angular.element($("video"));
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // Not adding `{ audio: true }` since we only want video now
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
   });
}

但从 angularjs 方法，我无法流式传输视频对象，对这种方法或任何替代方法有何建议？

【问题讨论】：

标签： javascript html angularjs html5-video

【解决方案1】：

我根本不知道角度，但是在reading the docs 之后，我看到angular.element($("video")) 的返回值，即您的代码中的video，是一个jQuery 对象。 _{（这让你的使用很可疑，或者我可能会错过$ 的内容...）}

所以你需要直到真正的元素，设置它的属性并调用它的play方法。

顺便说一句，video.src = URL.createObjectURL(MediaStream) 已被弃用，应该改用video.srcObject = MediaStream。

总而言之，你的代码应该是

// this is an jQuery object
var $video = angular.element($("video")); // not sure what is '$' so I leave it here
// this is your video element
var video = $video[0];
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
    video.srcObject = stream;
    video.play();
  });
}

【讨论】：

var $video = angular.element($("video"));实际上这应该是 var $video = angular.element($("#video"));，因为这是有角度的，所以我们有这样的语法，无论如何它解决了我的问题.....谢谢很多 :)

【解决方案2】：

我见过最有棱角的方式是：
angular.element('#myVideo')[0].srcObject = stream

【讨论】：