你可以直接从<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().