我正在开发一个系统，在浏览器中访问移动设备摄像头，并将摄像头流帧同步发送到另一端。发送的帧在另一侧进一步处理。我已按照以下代码的时间间隔将帧绘制到 Canvas 上。如何将访问的帧发送到另一端以便同步进行帧的进一步处理？ Canvas 上绘制的每个帧都将被发送到另一侧，以便在每个图像帧上进行进一步的处理。对方代码是母语。
$<!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>
最佳答案
我不太清楚你所说的“另一方”和“母语”是什么意思。
但是，您可以使用 AJAX 将 Canvas 图像发送到服务器。
服务器接收 Canvas 图像作为base64编码的图像数据。
例如，假设:
您正在将图像发送到 php 服务器 (yourOtherSide.php) – 当然这可以是任何接受 ajax 帖子的服务器。
您拥有对保存框架的 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
}
关于javascript - 将 Canvas 图像作为文件流 HTML5 发送，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14876842/