Send Canvas images as a file stream HTML5

Question 1

I am developing a system where the mobile device camera is accessed in the browser and the camera stream frames are send to the other side synchronously. The sent frames are processed further on the other side .I have drawn the frames to the canvas with a time interval as of the below code. How do i send the accessed frames to the other side for the further processing of frames to happen synchronously? each frame drawn on the canvas is to be sent to the other side for the further process to happen on each image frame. The other side code is in native language.

$<!DOCTYPE html>
<html>
<h1>Simple web camera display demo</h1>
<body>
<video autoplay width="480" height="480" src=""></video>
<canvas width="600" height="480" style="" ></canvas>
<img src="" width="100" height="100" ></img>
<script type="text/javascript">
var video = document.getElementsByTagName('video')[0], 
heading = document.getElementsByTagName('h1')[0];
if(navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback( stream ) {
video.src = stream;
}
function errorCallback( error ) {
heading.textContent = 
"An error occurred: [CODE " + error.code + "]";
}
} else {
heading.textContent = 
"Native web camera streaming is not supported in this browser!";
}
draw_interval = setInterval(function() 
{
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var frames = document.getElementById('frames');
ctx.drawImage(document.querySelector("video"), 0, 0);
}, 33)
</script>
</body>
</html>

Question 2

I'm not quite sure what you mean bye "other side" and "native language".

But, you can send canvas images to a server using AJAX.

The server receives the canvas image as base64 encoded image data.

For example, assume:

You’re sending the image to a php server (yourOtherSide.php) – but of course this could be any server that accepts ajax posts.
You have a reference to the canvas element holding your frame: canvas
Your ajax payload contains an id number of the frame being sent (ID) and the image data (imgData).
(optionally) You are getting some response back from the server—even if it’s just "OK": anyReturnedStuff

Then your ajax post would be:

$.post("yourOtherSide.php", { ID:yourFrame ID, imgData: canvas.toDataURL(‘image/jpeg’) })
.done( function(anyReturnedStuff){ console.log(anyReturnedStuff); } );

[Edited to include server-side creation of images from the ajax post]

These code samples will receive the ajax base64 imageData and create an image for you to process with your c-image-processing-library.

If your're using a PHP server:

$img = imagecreatefromstring(base64_decode($imageData));
// and process $img with your image library here

or if you're using asp.net:

byte[] byteArray = System.Convert.FromBase64String(imageData);
Image image;
using(MemoryStream s=new MemoryStream(byteArray){
 image=Image.FromStream(ms);
 // and process image with your image library here
}

Question 3

Thanks,markE. The other side is a c library which does the actual processing on the images. Do suggest a way how i can send these frames / frames data to the c- library.

Question 4

The result of ctx.getImageData(sx,sy,w,h).data is a Uint8ClampedArray Which is a binary string where each byte is one of the colors/alpha of a pixel. Sending the data to the sever you need to send an octet-stream header. Let the web workers send the data. There is a possibility to let the web worker be the owner of the buffer. So no coping is necessary.

markE markE 105k11 gold badges174 silver badges184 bronze badges · Accepted Answer · 2013-02-14 22:01:09Z

I'm not quite sure what you mean bye "other side" and "native language".

But, you can send canvas images to a server using AJAX.

The server receives the canvas image as base64 encoded image data.

For example, assume:

You’re sending the image to a php server (yourOtherSide.php) – but of course this could be any server that accepts ajax posts.
You have a reference to the canvas element holding your frame: canvas
Your ajax payload contains an id number of the frame being sent (ID) and the image data (imgData).
(optionally) You are getting some response back from the server—even if it’s just "OK": anyReturnedStuff

Then your ajax post would be:

$.post("yourOtherSide.php", { ID:yourFrame ID, imgData: canvas.toDataURL(‘image/jpeg’) })
.done( function(anyReturnedStuff){ console.log(anyReturnedStuff); } );

[Edited to include server-side creation of images from the ajax post]

These code samples will receive the ajax base64 imageData and create an image for you to process with your c-image-processing-library.

If your're using a PHP server:

$img = imagecreatefromstring(base64_decode($imageData));
// and process $img with your image library here

or if you're using asp.net:

byte[] byteArray = System.Convert.FromBase64String(imageData);
Image image;
using(MemoryStream s=new MemoryStream(byteArray){
 image=Image.FromStream(ms);
 // and process image with your image library here
}

Thanks,markE. The other side is a c library which does the actual processing on the images. Do suggest a way how i can send these frames / frames data to the c- library.
The result of ctx.getImageData(sx,sy,w,h).data is a Uint8ClampedArray Which is a binary string where each byte is one of the colors/alpha of a pixel. Sending the data to the sever you need to send an octet-stream header. Let the web workers send the data. There is a possibility to let the web worker be the owner of the buffer. So no coping is necessary.

CollectivesTM on Stack Overflow

Send Canvas images as a file stream HTML5

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related