[英]Javascript - imageCapture.takePhoto() function to take pictures
我正在為我的實驗目的構建一個 web 應用程序。 這里的目標是每秒從網絡攝像頭捕獲約 15-20 幀並將其發送到服務器。 捕獲幀后,將其轉換為 base64 並添加到數組中。 一定時間后,它被發送回服務器。 目前我正在使用imageCapture.takePhoto()
來實現這個功能。 結果我得到了blob,然后將其更改為base64。 應用程序運行約 5 秒,在此期間,捕獲幀並將其發送到服務器。
通過網絡攝像頭捕獲幀以實現這一目標的更有效方法是什么?
您可以直接從用於從.getUserMedia()
預覽 stream 的<video>
元素捕獲靜止圖像。 當然,您可以通過執行此類操作(偽代碼)來設置該預覽。
const stream = await navigator.getUserMedia(options)
const videoElement = document.querySelector('video#whateverId')
videoElement.srcObject = stream
videoElement.play()
接下來,讓自己成為 canvas object 及其上下文。 它不一定是可見的。
const scratchCanvas = document.createElement('canvas')
scratchCanvas.width = video.videoWidth
scratchCanvas.height = video.videoHeight
const scratchContext = scratchCanvas.getContext('2d')
現在你可以像這樣讓自己成為 function。
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 顯示在回調中。 用它做任何你需要做的事情。
然后,每隔一段時間調用一次 function。 例如,要獲得大約 15fps,請執行此操作。
const howOften = 1000.0 / 15.0
setInterval (stillCapture, howOften, videoElement, scratchCanvas, scratchContext)
所有這些都為您節省了使用.takePhoto()
的額外工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.