Javascript - imagecapture . takepphoto()函数，用于拍照 &g

Question

我正在为我的实验目的构建一个web应用程序。这里的目标是从网络摄像头每秒捕获~15-20帧并将其发送到服务器。捕获帧后，将其转换为base64并添加到数组中。经过一段时间后，它被发送回服务器。目前我正在使用imageCapture.takePhoto()来实现此功能。我得到blob作为结果，然后将其更改为base64。应用程序运行约5秒，在此期间，帧被捕获并发送到服务器。

有什么更有效的方法来捕获帧通过网络摄像头来实现这一点?

Answer 1

您可以直接从<video>元素捕获静止图像，用于预览.getUserMedia()的流。当然，您可以通过执行这类操作(伪代码)来设置预览。

const stream = await navigator.getUserMedia(options)
const videoElement = document.querySelector('video#whateverId')
videoElement.srcObject = stream
videoElement.play()

接下来，为自己创建一个画布对象和一个上下文。它不一定是可见的。

const scratchCanvas = document.createElement('canvas')
scratchCanvas.width = video.videoWidth
scratchCanvas.height = video.videoHeight
const scratchContext = scratchCanvas.getContext('2d')

现在你可以创建一个这样的函数了。

function stillCapture(video, canvas, context) {
context.drawImage( video, 0, 0, video.videoWidth, video.videoHeight)  
canvas.toBlob(
function (jpegBlob) {
/* do something useful with the Blob containing jpeg */
}, 'image/jpeg')
}

一个包含jpeg版本的静态捕获的Blob出现在回调中。你想怎么做就怎么做。

然后，经常调用该函数。例如，要获得大约15fps，可以这样做。

const howOften = 1000.0 / 15.0
setInterval (stillCapture, howOften, videoElement, scratchCanvas, scratchContext)

所有这些都节省了使用.takePhoto()的额外工作。