2 files changed, 7 insertions, 4 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index e5b71c183..159271223 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -9,7 +9,8 @@ import { VideoBox } from "../VideoBox";
 import { RecordingView } from './RecordingView';
 import { DocumentType } from "../../../documents/DocumentTypes";
 import { RecordingApi } from "../../../util/RecordingApi";
-import { Doc } from "../../../../fields/Doc";
+import { Doc, FieldsSym } from "../../../../fields/Doc";
+import { Id } from "../../../../fields/FieldSymbols";
 
 
 @observer
@@ -53,8 +54,9 @@ export class RecordingBox extends ViewBoxBaseComponent() {
       }
 
       render() {
+            // console.log("Proto[Is]: ", this.rootDoc.proto?.[Id])
             return <div className="recordingBox" ref={this._ref}>
-                  {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} />}
+                  {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id]} />}
             </div>;
       }
 }
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}