将 Canvas 图像作为文件流 HTML5 发送答案

【问题标题】：Send Canvas images as a file stream HTML5将 Canvas 图像作为文件流 HTML5 发送
【发布时间】：2013-01-30 08:58:22
【问题描述】：

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

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

【问题讨论】：

标签： javascript canvas video-streaming base64 html5-canvas

【解决方案1】：

我不太清楚你说的“另一面”和“母语”是什么意思。

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

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

例如，假设：

您将图像发送到 php 服务器 (yourOtherSide.php) – 当然这可以是任何接受 ajax 帖子的服务器。
您有一个对包含框架的画布元素的引用：canvas
您的 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-image-processing-library 进行处理。

如果您使用的是 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
}

【讨论】：

谢谢，马克E。另一边是一个对图像进行实际处理的 c 库。建议我如何将这些帧/帧数据发送到 c- 库。
ctx.getImageData(sx,sy,w,h).data 的结果是一个 Uint8ClampedArray，它是一个二进制字符串，其中每个字节都是像素的颜色/alpha 之一。将数据发送到您需要发送八位字节流标头的服务器。让网络工作者发送数据。有可能让 web worker 成为缓冲区的所有者。所以没有必要应对。