fix capture

This commit is contained in:
wryk 2019-03-10 05:37:22 +01:00
parent 5ae8e036ae
commit cbe8785f99

View file

@ -7,16 +7,18 @@ const FRAMES_PER_SECOND = 10
const WIDTH = 200 const WIDTH = 200
const HEIGHT = WIDTH const HEIGHT = WIDTH
const video = document.createElement('video')
const canvas = document.createElement('canvas')
const canvasContext = canvas.getContext('2d')
canvas.width = WIDTH
canvas.height = HEIGHT
export function capture (commit, mediaStream, duration) { export function capture (commit, mediaStream, duration) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const video = document.createElement('video')
video.autoplay = true
const canvas = document.createElement('canvas')
canvas.width = WIDTH
canvas.height = HEIGHT
const canvasContext = canvas.getContext('2d')
const totalFrames = duration / 1000 * FRAMES_PER_SECOND const totalFrames = duration / 1000 * FRAMES_PER_SECOND
if (totalFrames < 1) { if (totalFrames < 1) {
@ -27,6 +29,7 @@ export function capture (commit, mediaStream, duration) {
video.srcObject = mediaStream video.srcObject = mediaStream
video.addEventListener('canplay', () => {
const soureRectangle = crop(makeRectangle(0, 0, video.videoWidth, video.videoHeight)) const soureRectangle = crop(makeRectangle(0, 0, video.videoWidth, video.videoHeight))
const destinationRectangle = makeRectangle(0, 0, canvas.width, canvas.height) const destinationRectangle = makeRectangle(0, 0, canvas.width, canvas.height)
@ -34,7 +37,7 @@ export function capture (commit, mediaStream, duration) {
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
if (imageDataList.length < totalFrames) { if (imageDataList.length < totalFrames) {
console.log(`Capturing frame ${imageDataList.length} / ${totalFrames}`) console.log(`Capturing frame ${imageDataList.length + 1} / ${totalFrames}`)
canvasContext.drawImage( canvasContext.drawImage(
video, video,
@ -70,4 +73,5 @@ export function capture (commit, mediaStream, duration) {
} }
}, delayTime) }, delayTime)
}) })
})
} }