diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.tsx | 99 |
1 files changed, 47 insertions, 52 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 3a79f790f..16f750e14 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -15,8 +15,8 @@ enum RecordingStatus { Paused } -interface VideoSegment { - chunks: any[], +interface MediaSegment { + videoChunks: any[], endTime: number } @@ -36,10 +36,10 @@ export function RecordingView(props: IRecordingViewProps) { const [speed, setSpeed] = useState(1); const [muted, setMuted] = useState(false); - const [videos, setVideos] = useState<VideoSegment[]>([]); - // const [videos, setVideos] = useState<string[]>([]); + const [videos, setVideos] = useState<MediaSegment[]>([]); const [currentVid, setCurrentVid] = useState<number>(0); - const recorder = useRef<MediaRecorder | null>(null); + const videoRecorder = useRef<MediaRecorder | null>(null); + const audioRecorder = useRef<MediaRecorder | null>(null); const videoElementRef = useRef<HTMLVideoElement | null>(null); const [finished, setFinished] = useState<Boolean>(false) @@ -47,10 +47,13 @@ export function RecordingView(props: IRecordingViewProps) { const DEFAULT_MEDIA_CONSTRAINTS = { - video: { - width: 1280, - height: 720, - }, + video: true, + // audio: true + // video: { + // width: 1280, + // height: 720, + // }, + // audio: true, // audio: { // echoCancellation: true, // noiseSuppression: true, @@ -64,8 +67,8 @@ export function RecordingView(props: IRecordingViewProps) { let allVideoChunks: any = [] console.log(videos) videos.forEach((vid) => { - console.log(vid.chunks) - allVideoChunks = allVideoChunks.concat(vid.chunks) + console.log(vid.videoChunks) + allVideoChunks = allVideoChunks.concat(vid.videoChunks) }) console.log(allVideoChunks) @@ -119,21 +122,9 @@ export function RecordingView(props: IRecordingViewProps) { useEffect(() => { // get access to the video element on every render - // videoElement = document.getElementById('video') as HTMLVideoElement; videoElementRef.current = document.getElementById('video') as HTMLVideoElement; }) - // useEffect(() => { - // if (playing) { - // videoElement!.srcObject = null - // // videoElement!.src = videos[currentVid].url - // videoElement!.muted = false - // videoElement!.play() - // } else { - // videoElement!.pause(); - // } - // }, [playing, videoElement]); - useEffect(() => { let interval: any = null; if (recording) { @@ -157,8 +148,6 @@ export function RecordingView(props: IRecordingViewProps) { } const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => { const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints) - // const stream = await navigator.mediaDevices.getUserMedia({ video: true }); - videoElementRef.current!.src = "" videoElementRef.current!.srcObject = stream @@ -169,80 +158,86 @@ export function RecordingView(props: IRecordingViewProps) { const record = async () => { const stream = await startShowingStream(); - recorder.current = new MediaRecorder(stream) + videoRecorder.current = new MediaRecorder(stream) + // audioRecorder.current = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true })); // temporary chunks of video - let chunks: any = [] - recorder.current.ondataavailable = (event: any) => { - // store the video chunks as it is recording - console.log("data available") + let videoChunks: any = [] + // let audioChunks: any = [] + + videoRecorder.current.ondataavailable = (event: any) => { if (event.data.size > 0) { - chunks.push(event.data) + videoChunks.push(event.data) } } - recorder.current.onstart = (event: any) => { - console.log("on start") + // audioRecorder.current.ondataavailable = (event: any) => { + // if (event.data.size > 0) { + // audioChunks.push(event.data) + // } + // } + + videoRecorder.current.onstart = (event: any) => { setRecording(true); } - recorder.current.onstop = () => { + videoRecorder.current.onstop = () => { // if we have a last portion - if (chunks.length > 1) { + if (videoChunks.length > 1) { // append the current portion to the video pieces - setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }]) + setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }]) } // reset the temporary chunks - chunks = [] + videoChunks = [] setRecording(false); setFinished(true); } // recording paused - recorder.current.onpause = (event: any) => { + videoRecorder.current.onpause = (event: any) => { // append the current portion to the video pieces - console.log(chunks) - setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }]) + console.log(videoChunks) + setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }]) // reset the temporary chunks - chunks = [] + videoChunks = [] setRecording(false); } - recorder.current.onresume = async (event: any) => { + videoRecorder.current.onresume = async (event: any) => { console.log(event) await startShowingStream(); setRecording(true); } - recorder.current.start(200) + videoRecorder.current.start(200) } const stop = () => { - if (recorder.current) { - if (recorder.current.state !== "inactive") { - recorder.current.stop(); + if (videoRecorder.current) { + if (videoRecorder.current.state !== "inactive") { + videoRecorder.current.stop(); // recorder.current.stream.getTracks().forEach((track: any) => track.stop()) } } } const pause = () => { - if (recorder.current) { - if (recorder.current.state === "recording") { - recorder.current.pause(); + if (videoRecorder.current) { + if (videoRecorder.current.state === "recording") { + videoRecorder.current.pause(); } } } const startOrResume = () => { console.log('[RecordingView.tsx] startOrResume') - if (!recorder.current || recorder.current.state === "inactive") { + if (!videoRecorder.current || videoRecorder.current.state === "inactive") { record(); - } else if (recorder.current.state === "paused") { - recorder.current.resume(); + } else if (videoRecorder.current.state === "paused") { + videoRecorder.current.resume(); } } |