GuerillaStudio/souvenir
GuerillaStudio/souvenir
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/souvenir.git synced 2025-01-20 18:50:21 +00:00
Code Issues Releases Activity Actions

fix capture

Browse source
This commit is contained in:
wryk 2019-03-10 05:37:22 +01:00
parent 5ae8e036ae
commit cbe8785f99
1 changed files with 46 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/services/capture.js
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,47 +29,49 @@ export function capture (commit, mediaStream, duration) {
video.srcObject = mediaStream video.srcObject = mediaStream
const soureRectangle = crop(makeRectangle(0, 0, video.videoWidth, video.videoHeight)) video.addEventListener('canplay', () => {
const destinationRectangle = makeRectangle(0, 0, canvas.width, canvas.height) const soureRectangle = crop(makeRectangle(0, 0, video.videoWidth, video.videoHeight))
const destinationRectangle = makeRectangle(0, 0, canvas.width, canvas.height)
const imageDataList = [] const imageDataList = []
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,
soureRectangle.x, soureRectangle.x,
soureRectangle.y, soureRectangle.y,
soureRectangle.width, soureRectangle.width,
soureRectangle.height, soureRectangle.height,
destinationRectangle.x, destinationRectangle.x,
destinationRectangle.y, destinationRectangle.y,
destinationRectangle.width, destinationRectangle.width,
destinationRectangle.height destinationRectangle.height
) )
const imageData = canvasContext.getImageData( const imageData = canvasContext.getImageData(
destinationRectangle.x, destinationRectangle.x,
destinationRectangle.y, destinationRectangle.y,
destinationRectangle.width, destinationRectangle.width,
destinationRectangle.height destinationRectangle.height
) )
imageDataList.push(imageData) imageDataList.push(imageData)
commit('updateCaptureState', imageDataList.length / totalFrames * 100) commit('updateCaptureState', imageDataList.length / totalFrames * 100)
} else { } else {
clearInterval(intervalId) clearInterval(intervalId)
resolve({ resolve({
imageDataList, imageDataList,
imageWidth: WIDTH, imageWidth: WIDTH,
imageHeight: HEIGHT, imageHeight: HEIGHT,
delayTime delayTime
}) })
} }
}, delayTime) }, delayTime)
})
}) })
} }