Javascript

Question

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

通过网络摄像头捕获帧以实现此目的的更有效方法是什么？

Answer 1

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

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

接下来，让自己成为一个 canvas 对象和它的上下文。它不一定是可见的。

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() 的额外工作。

Javascript - imageCapture.takePhoto() 函数拍照

Javascript - imageCapture.takePhoto() function to take pictures

webcam

base64

image-capture

getusermedia