Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WebRTC: how to get the webcam data as a stream of data?

I have a simple webpage where you can stream your webcam. I would like to take this stream and send it somewhere, but apparently I can't really access the stream itself. I have this code to run the stream:

navigator.webkitGetUserMedia({video: true}, gotStream, noStream);

And in gotStream, I tried many things to "redirect" this stream somewhere else, for example:

function gotStream(stream) {   
    stream_handler(stream)
    //other stuff to show webcam output on the webpage
}

or

function gotStream(stream) {   
    stream.videoTracks.onaddtrack = function(track){
        console.log("in onaddtrack");
        stream_handler(track);
    }
    //other stuff to show webcam output on the webpage
}

But apparently the gotStream function gets called only once at the beginning, when the user grants permissions to the webcam to stream. Moreover the stream variable is not the stream itself but an object with some properties inside. How am I supposed to access the stream itself and redirect it wherever I want?

EDIT: You may be familiar with webglmeeting, a sort of face2face conversation apparently developed on top of WebRTC. I think that script is sending somehow the stream of data from one point to the other. I would like to achieve the same by understanding how to get the stream of data in the first place.

RE-EDIT: I don't want a conversion to image and sending the latter, I would like to work with the stream of data itself.

like image 283
Masiar Avatar asked Oct 29 '12 11:10

Masiar


People also ask

What is WebRTC streamer?

WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.

What is Webkitgetusermedia?

getUserMedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a MediaStream .

What is Webcam Hosting?

Our webcam hosting service enables you to stream live video and audio from your webcams and other sources, directly to your own website in real time. The live stream can be viewed on Desktop PC's, laptops, Mobile Phones iPads and Tablets in their web browsers.


1 Answers

If you mean to steam your camera to somewhere in PNG or JPG so I will use canvas like this

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);
like image 144
l2aelba Avatar answered Oct 13 '22 01:10

l2aelba