2019-03-15 18:25:36 +00:00
|
|
|
import EventEmitter from 'eventemitter3'
|
2019-03-15 19:02:20 +00:00
|
|
|
import pEvent from 'p-event'
|
|
|
|
import { makeRectangle, crop } from '/services/rectangle.js'
|
2019-03-15 18:25:36 +00:00
|
|
|
|
2019-03-15 18:07:26 +00:00
|
|
|
import {
|
|
|
|
GIF_WIDTH,
|
|
|
|
GIF_HEIGHT,
|
|
|
|
GIF_FRAME_RATE
|
|
|
|
} from '/constants.js'
|
|
|
|
|
2019-03-22 16:30:04 +00:00
|
|
|
export function capture (mediaStream, duration, facingMode) {
|
2019-03-15 18:25:36 +00:00
|
|
|
const emitter = new EventEmitter()
|
|
|
|
|
2019-03-15 19:02:20 +00:00
|
|
|
Promise.resolve().then(async () => {
|
|
|
|
const delayTime = 1000 / GIF_FRAME_RATE
|
|
|
|
const totalFrames = duration / 1000 * GIF_FRAME_RATE
|
|
|
|
|
|
|
|
// Well, this is a very low frame rate or very short duration clip
|
|
|
|
if (totalFrames < 1) {
|
|
|
|
emitter.emit('done', {
|
|
|
|
imageWidth: GIF_WIDTH,
|
|
|
|
imageHeight: GIF_HEIGHT,
|
|
|
|
imageDataList: [],
|
|
|
|
delayTime
|
|
|
|
})
|
|
|
|
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const imageDataList = []
|
2019-03-10 04:37:22 +00:00
|
|
|
|
|
|
|
const canvas = document.createElement('canvas')
|
2019-03-15 18:07:26 +00:00
|
|
|
canvas.width = GIF_WIDTH
|
|
|
|
canvas.height = GIF_HEIGHT
|
2019-03-10 04:37:22 +00:00
|
|
|
|
2019-03-15 19:02:20 +00:00
|
|
|
const destinationRectangle = makeRectangle(0, 0, canvas.width, canvas.height)
|
2019-03-10 04:37:22 +00:00
|
|
|
|
2019-03-22 16:30:04 +00:00
|
|
|
const canvasContext = canvas.getContext('2d')
|
|
|
|
|
|
|
|
if (facingMode === 'user' || facingMode === 'unknow') {
|
|
|
|
canvasContext.translate(destinationRectangle.width, 0)
|
|
|
|
canvasContext.scale(-1, 1)
|
|
|
|
}
|
|
|
|
|
2019-03-15 19:02:20 +00:00
|
|
|
const video = document.createElement('video')
|
|
|
|
video.setAttribute('playsinline', '')
|
|
|
|
video.setAttribute('webkit-playsinline', '')
|
2019-03-10 03:13:25 +00:00
|
|
|
video.srcObject = mediaStream
|
2019-03-15 19:02:20 +00:00
|
|
|
video.play()
|
|
|
|
|
|
|
|
await pEvent(video, 'canplaythrough')
|
|
|
|
const soureRectangle = crop(makeRectangle(0, 0, video.videoWidth, video.videoHeight))
|
|
|
|
|
|
|
|
step()
|
|
|
|
|
2019-03-18 14:48:21 +00:00
|
|
|
function step () {
|
2019-03-15 19:02:20 +00:00
|
|
|
canvasContext.drawImage(
|
|
|
|
video,
|
|
|
|
soureRectangle.x,
|
|
|
|
soureRectangle.y,
|
|
|
|
soureRectangle.width,
|
|
|
|
soureRectangle.height,
|
|
|
|
destinationRectangle.x,
|
|
|
|
destinationRectangle.y,
|
|
|
|
destinationRectangle.width,
|
|
|
|
destinationRectangle.height
|
|
|
|
)
|
|
|
|
|
|
|
|
const imageData = canvasContext.getImageData(
|
|
|
|
destinationRectangle.x,
|
|
|
|
destinationRectangle.y,
|
|
|
|
destinationRectangle.width,
|
|
|
|
destinationRectangle.height
|
|
|
|
)
|
|
|
|
|
|
|
|
imageDataList.push(imageData)
|
|
|
|
|
|
|
|
emitter.emit('progress', imageDataList.length / totalFrames)
|
|
|
|
|
|
|
|
if (imageDataList.length < totalFrames) {
|
|
|
|
setTimeout(step, delayTime)
|
|
|
|
} else {
|
|
|
|
emitter.emit('done', {
|
|
|
|
imageDataList,
|
|
|
|
imageWidth: GIF_WIDTH,
|
|
|
|
imageHeight: GIF_HEIGHT,
|
|
|
|
delayTime
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2019-03-10 03:13:25 +00:00
|
|
|
})
|
2019-03-18 14:48:21 +00:00
|
|
|
.catch(error => emitter.emit('error', error))
|
2019-03-15 18:25:36 +00:00
|
|
|
|
2019-03-18 14:48:21 +00:00
|
|
|
return emitter
|
2019-03-10 03:13:25 +00:00
|
|
|
}
|