{"version":3,"sources":["components/Camera/camera.component.tsx"],"names":["CameraComponent","props","videoRef","canvasRef","currentStream","isStreamming","state","mediaDevicesStatus","isCameraSupported","navigator","mediaDevices","selectedCamera","React","createRef","setMediaStream","bind","handleCanPlay","onChangeCamera","permissions","query","name","then","permissionStatus","console","log","setState","onchange","onChangePermissionStatus","this","startStreamming","stopStreamming","stream","current","srcObject","constraints","video","getUserMedia","catch","error","warn","JSON","stringify","getTracks","forEach","track","stop","undefined","evt","value","currentTarget","videoConstraints","facingMode","deviceId","exact","play","context","getContext","drawImage","message","className","ref","onCanPlay","autoPlay","playsInline","muted","kind","onChangeDevice","selected","onClick","onClickButton","id","width","height","Component"],"mappings":"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","file":"static/js/3.93503024.chunk.js","sourcesContent":["import React, { Component } from 'react';\nimport 'components/Camera/camera.css';\nimport DeviceSelectionComponent from './device-selection.component';\nimport { Message } from 'components/Message/message.component';\n\ntype CameraState = {\n    mediaDevicesStatus: string,\n    isCameraSupported: boolean,\n    selectedCamera: string\n};\n\nexport default class CameraComponent extends Component<{}, CameraState> {\n\n    private videoRef: React.RefObject<HTMLVideoElement>;\n    private canvasRef: React.RefObject<HTMLCanvasElement>;\n    private currentStream?: MediaStream;\n    private isStreamming: boolean = false;\n\n    constructor(props: {}) {\n        super(props);\n        this.state = {\n            mediaDevicesStatus: '',\n            isCameraSupported: !!navigator.mediaDevices,\n            selectedCamera: ''\n        };\n\n        this.videoRef = React.createRef();\n        this.canvasRef = React.createRef();\n\n        this.setMediaStream = this.setMediaStream.bind(this);\n        this.handleCanPlay = this.handleCanPlay.bind(this);\n        this.onChangeCamera = this.onChangeCamera.bind(this);\n    }\n\n    componentDidMount() {\n        navigator.permissions.query({ name: 'camera' })\n            .then(function (permissionStatus) {\n                console.log('camera permission state is ', permissionStatus.state);\n                return permissionStatus;\n            })\n            .then(permissionStatus => {\n                this.setState({\n                    ...this.state,\n                    mediaDevicesStatus: permissionStatus.state\n                });\n                permissionStatus.onchange = () => this.onChangePermissionStatus(permissionStatus);\n            });\n        this.startStreamming();            \n    }\n\n    componentWillUnmount() {\n        if (typeof this.currentStream !== 'undefined') {\n            this.stopStreamming();\n        }\n    }\n\n    onChangePermissionStatus(permissionStatus: PermissionStatus) {\n        this.setState({\n            ...this.state,\n            mediaDevicesStatus: permissionStatus.state\n        });\n\n        if (this.isStreamming) {\n            return;\n        }\n        this.startStreamming();\n    }\n\n    setMediaStream(stream: MediaStream) {\n        if (stream && this.videoRef.current) {\n            this.videoRef.current.srcObject = stream;\n            this.currentStream = stream;\n        }\n    }\n\n    startStreamming(constraints?: MediaStreamConstraints | undefined) {\n        if (!constraints) {\n            constraints = { video: true };\n        }\n\n        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n            // Without `{ audio: true }` since we only want video now\n            navigator.mediaDevices.getUserMedia(constraints).then(this.setMediaStream).catch((error) => console.warn(JSON.stringify(error)));\n            this.isStreamming = true;\n        }\n    }\n\n    stopStreamming() {\n        this.currentStream?.getTracks().forEach(track => {\n            track.stop();\n        });\n\n        this.currentStream = undefined;\n        this.isStreamming = false;\n    }\n\n    onChangeCamera(evt: React.FormEvent<HTMLSelectElement>) {\n        if (typeof this.currentStream !== 'undefined') {\n            this.stopStreamming();\n        }\n\n        const value = evt.currentTarget.value;\n        const videoConstraints = {} as MediaTrackConstraints;\n\n        if (value === '') {\n            videoConstraints.facingMode = 'environment';\n        } else {\n            videoConstraints.deviceId = { exact: value };\n        }\n\n        const constraints = {\n            video: videoConstraints\n        } as MediaStreamConstraints;\n\n        this.startStreamming(constraints);\n\n        this.setState({\n            ...this.state,\n            selectedCamera: value\n        });\n    }\n\n    handleCanPlay() {\n        this.videoRef.current?.play();\n    }\n\n    onClickButton(evt: React.FormEvent<HTMLButtonElement>) {\n        if (!this.canvasRef.current) {\n            return;\n        }\n\n        const context = this.canvasRef.current.getContext(\"2d\");\n        if (!context) {\n            return;\n        }\n\n        context.drawImage(this.videoRef.current as CanvasImageSource, 0, 0);\n    }\n\n    render() {\n\n        if (!this.state.isCameraSupported) {\n            return (<Message message='Your browser do not support geolocation api.' />)\n        }\n\n        if (this.state.mediaDevicesStatus !== 'granted') {\n            switch (this.state.mediaDevicesStatus) {\n                case 'denied':\n                    return (<Message message='You have denied access to your camera api.' />);\n                case 'prompt':\n                    return (<Message message='Please allow us to access your camera api.' />);\n                default:\n                    return (<Message message='Loading...' />);\n            }\n        }\n\n        return (\n            <div className=\"full-view-port\">\n                <div className=\"\">\n                    <video\n                        ref={this.videoRef}\n                        onCanPlay={this.handleCanPlay}\n                        autoPlay\n                        playsInline\n                        muted\n                    />\n                </div>\n                <div className=\"camera-controls\">\n                    <DeviceSelectionComponent kind=\"videoinput\" onChangeDevice={this.onChangeCamera} selected={this.state.selectedCamera} />\n                    <button onClick={this.onClickButton.bind(this)}>snap photo</button>\n                </div>\n                <div className=\"\">\n                <canvas id=\"canvas\" ref={this.canvasRef} width=\"640\" height=\"480\"></canvas>\n                </div>\n            </div>\n        );\n    }\n}\n"],"sourceRoot":""}