mirror of
https://github.com/GuerillaStudio/souvenir.git
synced 2025-01-20 22:10:20 +00:00
fix capture
This commit is contained in:
parent
5ae8e036ae
commit
cbe8785f99
1 changed files with 46 additions and 42 deletions
|
@ -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)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue