Javascript 将画布图像作为文件流HTML5发送_Javascript_Canvas_Video Streaming_Base64_Html5 Canvas

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

javascript canvas video-streaming html5-canvas

Javascript 将画布图像作为文件流HTML5发送,javascript,canvas,video-streaming,base64,html5-canvas,Javascript,Canvas,Video Streaming,Base64,Html5 Canvas,我正在开发一个系统，在浏览器中访问移动设备摄像头，并将摄像头流帧同步发送到另一端。发送的帧将在另一侧进一步处理。我已将帧绘制到画布上，时间间隔如下代码所示。如何将访问的帧发送到另一端，以便同步地对帧进行进一步处理？画布上绘制的每一帧都将被发送到另一侧，以便在每一图像帧上进行进一步的处理。另一边的代码是本地语言 $<!DOCTYPE html> <html> <h1>Simple web camera display demo</h1> <bo

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

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

$
简单的网络摄像头显示演示
var video=document.getElementsByTagName（'video'）[0]，
heading=document.getElementsByTagName（'h1'）[0]；
if（navigator.getUserMedia）{
getUserMedia（'video'，successCallback，errorCallback）；
函数成功回调（流）{
video.src=流；
}
函数errorCallback（错误）{
heading.textContent=
“出现错误：[CODE”+error.CODE+”]”；
}
}否则{
heading.textContent=
“此浏览器不支持本机web摄像头流媒体！”；
}
draw_interval=setInterval（函数（）
{
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var frames=document.getElementById（'frames'）；
ctx.drawImage（document.querySelector（“视频”），0,0；
}, 33)

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

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

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

例如，假设：

您将图像发送到一个php服务器（yourOtherSide.php）——当然，这可能是任何接受ajax帖子的服务器

您有一个对保存frame:canvas的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
}

谢谢，马克。另一面是一个c库，它对图像进行实际处理。建议我如何将这些帧/帧数据发送到c库。ctx.getImageData（sx，sy，w，h）的结果。数据是一个uint8clampedaray，它是一个二进制字符串，其中每个字节是像素的颜色/alpha之一。将数据发送到服务器时，需要发送一个八位字节流头。让网络工作者发送数据。有可能让web工作者成为缓冲区的所有者。因此，不需要应对。