/
CameraScreen.jsx
119 lines (105 loc) · 3.62 KB
/
CameraScreen.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/* eslint-disable jsx-a11y/media-has-caption */
import { h, Component } from 'preact'
import SnapshotButton from './SnapshotButton.jsx'
import RecordButton from './RecordButton.jsx'
import RecordingLength from './RecordingLength.jsx'
import VideoSourceSelect from './VideoSourceSelect.jsx'
import SubmitButton from './SubmitButton.jsx'
import DiscardButton from './DiscardButton.jsx'
function isModeAvailable (modes, mode) {
return modes.includes(mode)
}
class CameraScreen extends Component {
componentDidMount () {
const { onFocus } = this.props
onFocus()
}
componentWillUnmount () {
const { onStop } = this.props
onStop()
}
render () {
const {
src,
recordedVideo,
recording,
modes,
supportsRecording,
videoSources,
showVideoSourceDropdown,
showRecordingLength,
onSubmit,
i18n,
mirror,
onSnapshot,
onStartRecording,
onStopRecording,
onDiscardRecordedVideo,
recordingLengthSeconds,
} = this.props
const hasRecordedVideo = !!recordedVideo
const shouldShowRecordButton = !hasRecordedVideo && supportsRecording && (
isModeAvailable(modes, 'video-only')
|| isModeAvailable(modes, 'audio-only')
|| isModeAvailable(modes, 'video-audio')
)
const shouldShowSnapshotButton = !hasRecordedVideo && isModeAvailable(modes, 'picture')
const shouldShowRecordingLength = supportsRecording && showRecordingLength && !hasRecordedVideo
const shouldShowVideoSourceDropdown = showVideoSourceDropdown && videoSources && videoSources.length > 1
const videoProps = {
playsinline: true,
}
if (recordedVideo) {
videoProps.muted = false
videoProps.controls = true
videoProps.src = recordedVideo
// reset srcObject in dom. If not resetted, stream sticks in element
if (this.videoElement) {
this.videoElement.srcObject = undefined
}
} else {
videoProps.muted = true
videoProps.autoplay = true
videoProps.srcObject = src
}
return (
<div className="uppy uppy-Webcam-container">
<div className="uppy-Webcam-videoContainer">
<video
/* eslint-disable-next-line no-return-assign */
ref={(videoElement) => (this.videoElement = videoElement)}
className={`uppy-Webcam-video ${mirror ? 'uppy-Webcam-video--mirrored' : ''}`}
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...videoProps}
/>
</div>
<div className="uppy-Webcam-footer">
<div className="uppy-Webcam-videoSourceContainer">
{shouldShowVideoSourceDropdown
? VideoSourceSelect(this.props)
: null}
</div>
<div className="uppy-Webcam-buttonContainer">
{shouldShowSnapshotButton && <SnapshotButton onSnapshot={onSnapshot} i18n={i18n} />}
{shouldShowRecordButton && (
<RecordButton
recording={recording}
onStartRecording={onStartRecording}
onStopRecording={onStopRecording}
i18n={i18n}
/>
)}
{hasRecordedVideo && <SubmitButton onSubmit={onSubmit} i18n={i18n} />}
{hasRecordedVideo && <DiscardButton onDiscard={onDiscardRecordedVideo} i18n={i18n} />}
</div>
<div className="uppy-Webcam-recordingLength">
{shouldShowRecordingLength && (
<RecordingLength recordingLengthSeconds={recordingLengthSeconds} i18n={i18n} />
)}
</div>
</div>
</div>
)
}
}
export default CameraScreen