将画布图像作为文件流发送HTML5

我正在开发一个系统，在浏览器中访问移动设备摄像头并将摄像头流帧同步发送到另一侧。发送的帧在另一边进一步处理。我已经按照以下代码的时间间隔将帧绘制到画布上。我如何将访问帧发送到另一端以进一步处理同步发生的帧？绘制在画布上的每个帧都将被发送到另一侧，以便在每个图像帧上进行进一步的处理。另一方面的代码是母语。将画布图像作为文件流发送HTML5

$<!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>

来源

2013-02-14 user894795

我不太清楚你的意思是再见“对方”和“母语”。

但是，您可以使用AJAX将画布图像发送到服务器。

服务器接收到作为base64编码图像数据的画布图像。

例如，假设：

你的图像发送到PHP服务器（yourOtherSide.php） - 但当然这可能是接受阿贾克斯的职位的任何服务器。
你必须在画布元件保持你的帧的参考：帆布
AJAX的有效载荷中包含正在发送的帧的ID号（ID）和图像数据（imgData）。
（可选）你得到了一些响应从服务器，即使回来，如果它只是“OK”：anyReturnedStuff

然后你的Ajax职位为：

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

[编辑包括服务器端创建的图像从ajax后]

这些代码示例将收到ajax base64 imageData并创建一个图像供您使用C图像处理库进行处理。

如果your're使用PHP服务器：

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

，或者如果您正在使用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 
}

来源

2013-02-14 22:01:09 markE

谢谢，坊间。另一边是一个c库，它对图像进行实际处理。建议如何将这些帧/帧数据发送到c库。 – user894795 2013-02-16 10:03:17

ctx.getImageData（sx，sy，w，h）.data的结果是一个Uint8ClampedArray，它是一个二进制字符串，其中每个字节是像素的颜色/ alpha之一。发送数据到服务器，您需要发送一个八位字节流头。让网络工作者发送数据。有可能让网络工作者成为缓冲区的所有者。所以没有必要应对。 – 2013-10-24 08:50:12

将画布图像作为文件流发送HTML5

回答

相关问题