[英]WebRTC: how to get the webcam data as a stream of data?
我有一個簡單的網頁,您可以在其中流式傳輸網絡攝像頭。 我想把這個流發送到某個地方,但顯然我無法真正訪問流本身。 我有這個代碼來運行流:
navigator.webkitGetUserMedia({video: true}, gotStream, noStream);
在gotStream中,我嘗試了很多東西來將這個流“重定向”到其他地方,例如:
function gotStream(stream) {
stream_handler(stream)
//other stuff to show webcam output on the webpage
}
要么
function gotStream(stream) {
stream.videoTracks.onaddtrack = function(track){
console.log("in onaddtrack");
stream_handler(track);
}
//other stuff to show webcam output on the webpage
}
但顯然,當用戶向網絡攝像頭授予流的權限時, gotStream
函數在開始時只被調用一次。 此外, stream
變量不是流本身,而是內部具有一些屬性的對象。 我應該如何訪問流本身並將其重定向到我想要的任何地方?
編輯:您可能熟悉webglmeeting,這是一種顯然是在WebRTC之上開發的face2face對話。 我認為該腳本以某種方式將數據流從一個點發送到另一個點。 我想通過了解如何首先獲取數據流來實現同樣的目標。
重新編輯:我不希望轉換為圖像並發送后者,我想使用數據流本身。
如果你的意思是將你的相機蒸到PNG或JPG的某個地方,那么我將使用這樣的canvas
HTML
<video id="live" width="320" height="240" autoplay></video>
<canvas width="320" id="canvas" height="240" style="display:none;"></canvas>
JS(jQuery)
var video = $("#live").get()[0];
var canvas = $("#canvas");
var ctx = canvas.get()[0].getContext('2d');
navigator.webkitGetUserMedia("video",
function(stream) {
video.src = webkitURL.createObjectURL(stream);
}
)
setInterval(
function () {
ctx.drawImage(video, 0, 0, 320,240);
var data = canvas[0].toDataURL("image/jpeg");
},1000);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.