diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
index 92518bcb5..97b8c9f9e 100644
--- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
+++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
@@ -1,5 +1,4 @@
import React, { useEffect, useRef } from 'react';
-import { videoFeeds } from 'Player/MessageDistributor/managers/AssistManager';
interface Props {
stream: MediaStream | null;
@@ -23,13 +22,14 @@ function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled
return;
}
const iid = setInterval(() => {
- const settings = stream.getVideoTracks()[0]?.getSettings();
+ const track = stream.getVideoTracks()[0]
+ const settings = track?.getSettings();
const isDummyVideoTrack = settings
? settings.width === 2 ||
settings.frameRate === 0 ||
(!settings.frameRate && !settings.width)
: true;
- const shouldBeEnabled = !isDummyVideoTrack;
+ const shouldBeEnabled = track.enabled && !isDummyVideoTrack;
if (isEnabled !== shouldBeEnabled) {
setEnabled(shouldBeEnabled);
@@ -39,19 +39,6 @@ function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled
return () => clearInterval(iid);
}, [stream, isEnabled]);
- useEffect(() => {
- if (!stream) return;
- // @ts-ignore
- videoFeeds.observe((key, value) => {
- const track = stream.getVideoTracks()[0];
- if (key === track.id) {
- track.enabled = value;
- setEnabled(value);
- setRemoteEnabled?.(value);
- }
- });
- }, [stream]);
-
return (
({})
-
export default class Assist {
readonly version = 'PACKAGE_VERSION'
private socket: Socket | null = null
private peer: Peer | null = null
- private videoTracks: MediaStreamTrack[] = []
private assistDemandedRestart = false
private callingState: CallingState = CallingState.False
@@ -142,12 +135,6 @@ export default class Assist {
}
const peerID = `${app.getProjectKey()}-${sessionId}`
- videoFeeds.observe((key: string, value: boolean) => {
- const track = this.videoTracks.find(track => track.id === key)
- if (track) {
- track.enabled = value
- }
- })
// SocketIO
const socket = this.socket = connect(app.getHost(), {
path: '/ws-assist/socket',
@@ -262,7 +249,7 @@ export default class Assist {
updateCallerNames()
})
socket.on('videofeed', ({ streamId, enabled, }) => {
- videoFeeds[streamId] = enabled
+ callUI?.changeVideoFeed({ streamId, enabled, })
})
const callingAgents: Map = new Map() // !! uses socket.io ID
@@ -333,7 +320,6 @@ export default class Assist {
})
Object.values(lStreams).forEach((stream) => { stream.stop() })
Object.keys(lStreams).forEach((peerId: string) => { delete lStreams[peerId] })
- this.videoTracks = []
// UI
closeCallConfirmWindow()
if (remoteControl.status === RCStatus.Disabled) {
@@ -413,11 +399,6 @@ export default class Assist {
initiateCallEnd()
})
call.on('stream', (rStream) => {
- rStream.getVideoTracks().forEach(track => {
- videoFeeds[track.id] = track.enabled
- this.videoTracks.push(track)
- })
-
callUI?.addRemoteStream(rStream)
const onInteraction = () => { // do only if document.hidden ?
callUI?.playRemote()
@@ -435,7 +416,6 @@ export default class Assist {
}
app.debug.log('sender found:', sender)
void sender.replaceTrack(vTrack)
- this.videoTracks.push(vTrack)
})
call.answer(lStreams[call.peer].stream)
diff --git a/tracker/tracker-assist/src/CallWindow.ts b/tracker/tracker-assist/src/CallWindow.ts
index bcaa25197..bd7d51917 100644
--- a/tracker/tracker-assist/src/CallWindow.ts
+++ b/tracker/tracker-assist/src/CallWindow.ts
@@ -20,6 +20,7 @@ export default class CallWindow {
private localVideoOn = false
private onToggleVideo: (args: any) => void
private tsInterval: ReturnType
+ private remoteVideo: MediaStreamTrack
private readonly load: Promise
@@ -132,6 +133,7 @@ export default class CallWindow {
// Video
if (this.vRemote && !this.vRemote.srcObject) {
this.vRemote.srcObject = rStream
+ this.remoteVideo = rStream.getVideoTracks()[0]
if (this.vPlaceholder) {
this.vPlaceholder.innerText =
'Video has been paused. Click anywhere to resume.'
@@ -143,7 +145,7 @@ export default class CallWindow {
} // just in case
let enabled = false
this.checkRemoteVideoInterval = setInterval(() => {
- const settings = rStream.getVideoTracks()[0]?.getSettings()
+ const settings = this.remoteVideo?.getSettings()
const isDummyVideoTrack =
!!settings && (settings.width === 2 || settings.frameRate === 0)
const shouldBeEnabled = !isDummyVideoTrack
@@ -318,4 +320,10 @@ export default class CallWindow {
sessionStorage.removeItem(SS_START_TS_KEY)
this.localStreams = []
}
+
+ changeVideoFeed({ streamId, enabled, }: { streamId: string, enabled: boolean}) {
+ if (this.remoteVideo.id === streamId) {
+ this.remoteVideo.enabled = enabled
+ }
+ }
}