Question

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

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

任何人都有任何想法？

Answer 1

这是一项有点圆的任务。您需要将流中的数据放入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现在将是一个看起来有点像这样的数据网址："data:image/png;base64,iVBORw0KGgoA...（最后有更多字符！）。然后，您可以使用AJAX将其发送到您的服务器。

许多语言都可以通过数据网址获取信息。我从来没有使用它，但PHP看起来特别好。你应该可以这样做：

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

其中$data是从浏览器发送的数据。请注意，我还没有测试过这个PHP代码。

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

捕获单个网络摄像头帧。在PHP中使用

1 个答案: