Send Canvas images as a file stream HTML5

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>

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
}