50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import IVideo from '../Interfaces/IVideo'
|
|
import IVideoCapturer from '../Interfaces/IVideoCapturer'
|
|
|
|
class VideoCapturer implements IVideoCapturer {
|
|
private videoWidth: number
|
|
private videoHeight: number
|
|
private videoStream: MediaStream | null = null
|
|
|
|
constructor (props: IVideo) {
|
|
this.videoWidth = props.width
|
|
this.videoHeight = props.height
|
|
this.enableCamera()
|
|
}
|
|
|
|
private enableCamera = async () => {
|
|
const webCameraStream = await navigator.mediaDevices.getUserMedia({ video: true })
|
|
this.videoStream = webCameraStream
|
|
}
|
|
|
|
get imageData () {
|
|
if (!this.videoStream) return null
|
|
|
|
let videoElement: HTMLVideoElement = document.querySelector('#videoView') as HTMLVideoElement
|
|
if (!videoElement) {
|
|
videoElement = document.createElement('video')
|
|
videoElement.width = this.videoWidth
|
|
videoElement.height = this.videoHeight
|
|
videoElement.autoplay = true
|
|
videoElement.srcObject = this.videoStream
|
|
videoElement.id = 'videoView'
|
|
videoElement.style.display = 'none'
|
|
|
|
const body = document.querySelector('body')!
|
|
body.appendChild(videoElement)
|
|
}
|
|
|
|
const canvasElement: HTMLCanvasElement = document.createElement('canvas')
|
|
canvasElement.width = this.videoWidth
|
|
canvasElement.height = this.videoHeight
|
|
|
|
const canvasContext = canvasElement.getContext('2d')!
|
|
canvasContext.drawImage(videoElement, 0, 0, this.videoWidth, this.videoHeight)
|
|
|
|
return canvasContext.getImageData(0, 0, this.videoWidth, this.videoHeight)
|
|
}
|
|
|
|
}
|
|
|
|
export default VideoCapturer
|