Take picture/screenshot from remote video?

[Miguel González Martin]

Hi,

is possible to take a picture or screenshot from remote video (opponent / participant) and save it to disk with some easyRTC javascript function?

Thanks in advance,

Miguel.

[Eric Davies]

Once you have a media stream displaying in a video object, you can draw it into a canvas like it was an image using the 2d canvas context drawImage. Then use the normal ways of writing a canvas to a file (usually based on the toDataURL method to get a base64 encoded string and then writing out that string). I've only captured local media streams this way, but I haven't heard anything to suggest that remote media streams can't be treated the same way. Anybody want to chime in with a good way to write the canvas to a file?

[gianni]

There is no difference if video element source is local or remote. We can handle them in the same way.

To write canvas to a file ... you draw a png image on the canvas from your video and then save the png ... 

The easiest way i found that works on chrome and firefox is just to right click on the image an save it wherever we want.

...

<canvas id="canvas"></canvas>

<img id=img_id></img>

...

var ctx=canvas.getContext("2d");

ctx.drawImage(source_id (your video element id), 0, 0,canvas.width,canvas.height);

...

...

var dataURL = canvas.toDataURL("image/png"); img_id.src=dataURL; ...

[Miguel González Martin]

Thank you, it's works fine :)

Only one thing...the video seems have better resolution and more fine pixel details that the canvas after drawing the content of video...it's normal or something I'm doing wrong?

[Eric Davies]

Do the canvas dimensions match the video dimensions? Your video object will have attributes called videoWidth and videoHeight that get set by the browser once the video stream is flowing.

[gianni]

<canvas hidden=true id="canvas" height="480" width="640""></canvas> <img id="image" ></img> ... source_id=(your video element id); canvas.height=source_id.videoHeight; canvas.width=source_id.videoWidth; ctx.drawImage(source_id, 0, 0,canvas.width,canvas.height);