如何通過angularjs方法訪問視頻流對象？

Question

在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辦法，我無法流的視頻對象，在這個或 任何建議任何替代方法？

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