fix: gives recording box unique id to allow multiple streams at the same time'

1 files changed, 3 insertions, 2 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index e9450a5dd..87716e9cc 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -18,6 +18,7 @@ interface MediaSegment {
 interface IRecordingViewProps {
       setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
       setDuration: (seconds: number) => void
+      id: string
 }
 
 const MAXTIME = 100000;
@@ -88,7 +89,7 @@ export function RecordingView(props: IRecordingViewProps) {
 
       useEffect(() => {
             // get access to the video element on every render
-            videoElementRef.current = document.getElementById('video') as HTMLVideoElement;
+            videoElementRef.current = document.getElementById(`video-${props.id}`) as HTMLVideoElement;
       })
 
       useEffect(() => {
@@ -225,7 +226,7 @@ export function RecordingView(props: IRecordingViewProps) {
       return (
             <div className="recording-container">
                   <div className="video-wrapper">
-                        <video id="video"
+                        <video id={`video-${props.id}`}
                               autoPlay
                               muted
                               onTimeUpdate={handleOnTimeUpdate}