gpt4 book ai didi

php - 如何在 HTML 页面中使用网络摄像头拍摄快照?

转载 作者:行者123 更新时间:2023-11-28 10:59:16 29 4
gpt4 key购买 nike

如果我保存 <canvas>其中包含绘图。一切正常。但是,如果我想保存 canvas包含图像(来自网络摄像头流的帧),它不起作用,并且不会向服务器发送任何内容。有人对此有一些想法吗?

HTML:

<video id="VideoCamera" autoplay></video>
<canvas id="testCanvas" width="300" height="300"></canvas>
<textarea id="debugConsole" rows="10" cols="60">Data</textarea>
<button onclick="saveViaAJAX();">Save Via AJAX</button>
<input id="button" type="button" value="photo" onclick="snapshot()" />
<input id="button1" type="button" value="bubble" onclick="bubble()" />

<script type="text/javascript">
// This portion webcam setup
var video = document.getElementsByTagName('video')[0];
var localMediaStream = null;
if (navigator.getUserMedia) {
navigator.getUserMedia('video', successCallback, errorCallback);
function successCallback(stream) {
video.src = stream;
localMediaStream = 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 something in canvass
var canvas = document.getElementById("testCanvas");
if (canvas.getContext) {
var canvasContext = canvas.getContext("2d");
canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
canvasContext.beginPath();
canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
canvasContext.fill();
}

// This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas).
function bubble() {
var canvas = document.getElementById("testCanvas");
var canvasContext = canvas.getContext("2d");
for (i = 0; i < 150; i++) {
canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
canvasContext.beginPath();
canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
canvasContext.fill();
}
}

// This portion of the code take snaphot from wecam
function snapshot() {
var canvas = document.getElementById("testCanvas");
var canvasContext = canvas.getContext("2d");
canvasContext.drawImage(video, 0, 0, 240, 320);
}


// This portion of the code save canvass to server
function saveViaAJAX() {
var canvas = document.getElementById("testCanvas");
var canvasContext = canvas.toDataURL("image/png");
var postData = "canvasData=" + canvasContext;
var debugConsole = document.getElementById("debugConsole");
debugConsole.value = canvasContext;

var ajax = new XMLHttpRequest();
ajax.open("POST", 'Save.php', true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.setRequestHeader('Content-TypeLength', postData.length);

ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
debugConsole.value = canvasContext + " " + debugConsole.value;
}
}
ajax.send(postData);
}

PHP save.php代码:

$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

谢谢!

最佳答案

请查看picEdit project ,它实现了从相机拍摄快照。在PC和Android上测试(使用Chrome,原生浏览器似乎不支持访问相机):

关于php - 如何在 HTML 页面中使用网络摄像头拍摄快照?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10425820/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com