3

有没有办法从用户网络摄像头捕获单个帧并将其传递到服务器端？

我尝试使用navigator.getUserMedia，它允许我创建一个可以传递给视频元素的 LocalMediaStream 对象，但似乎没有可以理解的方法来获取视频本身用于其他用途。

有人有什么想法吗？

4

1 回答 1

2

这是一个稍微绕圈子的任务。您需要将流中的数据放入一个video元素中，然后将其从那里放入一个canvas元素中，这将允许您创建一个数据 URL，然后可以将其在服务器端转换为图像。（深呼吸）

您的代码可能看起来有点像这样：

var stream, video, canvas, data;
navigator.getUserMedia({video: true}, function(s) {
    stream = s;
});

video = document.createElement('video');
video.src = window.URL.createObjectURL(stream);
video.play();

canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(video, 0, 0, 240, 150);

data = canvas.toDataURL();

data现在将是一个看起来有点像这样的数据 URL：（"data:image/png;base64,iVBORw0KGgoA...最后有更多字符！）。然后，您可以使用 AJAX 将其发送到您的服务器。

许多语言都有从数据 URL 获取信息的方法。我从未使用过它，但 PHP 看起来特别好。你应该能够做到这一点：

$image = imagecreatefrompng(substr($data, 22));

$data从浏览器发送的数据在哪里。注意我没有测试过这个 PHP 代码。

为了改善用户体验，您可以显示视频元素：然后用户将能够在拍摄时看到镜头。此外，您可以将drawImage调用作为对事件的响应，例如用户单击按钮。另请注意，该getUserMedia功能尚未跨浏览器，因此您可能需要进行一些编辑才能使其在所有浏览器中工作。

于 2013-06-06T23:01:42.317 回答