From 3db5d43493eda846252733eebf5e73f414e8760d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9=20=D0=91=D0=B0=D0=B1?=
 =?UTF-8?q?=D1=83=D1=88=D0=BA=D0=B8=D0=BD?= <andreybabushkin2000@gmail.com>
Date: Thu, 20 Feb 2025 18:35:34 +0100
Subject: [PATCH] resolved conflicts

---
 .../Assist/ChatWindow/ChatWindow.tsx          |   1 +
 .../AssistActions/AssistActions.tsx           |   5 +
 .../VideoContainer/VideoContainer.tsx         |   4 +-
 .../app/player/web/assist/AssistManager.ts    |   2 +-
 frontend/app/player/web/assist/Call.ts        | 105 +-
 .../app/player/web/assist/CanvasReceiver.ts   |  46 +-
 tracker/tracker-assist/layout/index-chat.html | 933 ++++++++++--------
 tracker/tracker-assist/layout/index.html      |   5 +-
 tracker/tracker-assist/src/Assist.ts          | 272 +++--
 9 files changed, 775 insertions(+), 598 deletions(-)

diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
index 29e4826cc..70272c9f1 100644
--- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
+++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
@@ -62,6 +62,7 @@ function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }:
               stream={localStream ? localStream.stream : null}
               muted
               height={anyRemoteEnabled ? 50 : 'unset'}
+              local
             />
           </div>
         </div>
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index 80a49bedd..99b976556 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -142,6 +142,10 @@ function AssistActions({
     });
   };
 
+  const removeIncomeStream = () => {
+    setIncomeStream([]);
+  };
+
   function call(additionalAgentIds?: string[]) {
     RequestLocalStream()
       .then((lStream) => {
@@ -153,6 +157,7 @@ function AssistActions({
           () => {
             player.assistManager.ping(AssistActionsPing.call.end, agentId)
             lStream.stop.bind(lStream);
+            removeIncomeStream(lStream.stream);
           },
           onReject,
           onError
diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
index 97b8c9f9e..303d98eae 100644
--- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
+++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
@@ -5,9 +5,10 @@ interface Props {
   muted?: boolean;
   height?: number | string;
   setRemoteEnabled?: (isEnabled: boolean) => void;
+  local?: boolean;
 }
 
-function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled }: Props) {
+function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled, local }: Props) {
   const ref = useRef<HTMLVideoElement>(null);
   const [isEnabled, setEnabled] = React.useState(false);
 
@@ -47,6 +48,7 @@ function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled
         width: isEnabled ? undefined : '0px!important',
         height: isEnabled ? undefined : '0px!important',
         border: '1px solid grey',
+        transform: local ? 'scaleX(-1)' : undefined,
       }}
     >
       <video autoPlay ref={ref} muted={muted} style={{ height: height }} />
diff --git a/frontend/app/player/web/assist/AssistManager.ts b/frontend/app/player/web/assist/AssistManager.ts
index 1ba2b567a..2a5fe6e7a 100644
--- a/frontend/app/player/web/assist/AssistManager.ts
+++ b/frontend/app/player/web/assist/AssistManager.ts
@@ -309,7 +309,7 @@ export default class AssistManager {
       this.canvasReceiver = new CanvasReceiver(this.peerID, this.config, this.getNode, {
         ...this.session.agentInfo,
         id: agentId,
-      });
+      }, socket);
 
       document.addEventListener('visibilitychange', this.onVisChange);
     });
diff --git a/frontend/app/player/web/assist/Call.ts b/frontend/app/player/web/assist/Call.ts
index 87e9d3715..e54321b7f 100644
--- a/frontend/app/player/web/assist/Call.ts
+++ b/frontend/app/player/web/assist/Call.ts
@@ -37,7 +37,9 @@ export default class Call {
     socket.on('call_end', () => {
       this.onRemoteCallEnd()
     });
-    socket.on('videofeed', ({ streamId, enabled }) => {
+
+    socket.on('videofeed', (data: { data: { streamId: string; enabled: boolean }}) => {
+      const { streamId, enabled } = data.data;
       if (this.videoStreams[streamId]) {
         this.videoStreams[streamId].enabled = enabled;
       }
@@ -68,41 +70,40 @@ export default class Call {
       this.store.update({ calling: CallingState.NoCall });
     });
 
-    socket.on('webrtc_offer', (data: { from: string, offer: RTCSessionDescriptionInit }) => {
-      this.handleOffer(data);
+    socket.on('webrtc_call_answer', (data: { data: { from: string, answer: RTCSessionDescriptionInit } }) => {
+      this.handleAnswer(data.data);
     });
-    socket.on('webrtc_answer', (data: { from: string, answer: RTCSessionDescriptionInit }) => {
-      this.handleAnswer(data);
-    });
-    socket.on('webrtc_ice_candidate', (data: { from: string, candidate: RTCIceCandidateInit }) => {
-      this.handleIceCandidate(data);
+    socket.on('webrtc_call_ice_candidate', (data: { data: { from: string, candidate: RTCIceCandidateInit } }) => {
+      this.handleIceCandidate({ candidate: data.data.candidate, from: data.data.from });
     });
 
     this.assistVersion = this.getAssistVersion();
   }
 
+  // СОЗДАНИЕ ЛОКАЛЬНОГО ПИРА
   private async createPeerConnection(remotePeerId: string): Promise<RTCPeerConnection> {
+    // создаем pc с конфигом ice
     const pc = new RTCPeerConnection({
       iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
     });
-    console.log("PC1", pc)
 
-    // Если есть локальный поток, добавляем его треки в соединение.
+    // Если есть локальный поток добавляем его треки в соединение
     if (this.callArgs && this.callArgs.localStream && this.callArgs.localStream.stream) {
       this.callArgs.localStream.stream.getTracks().forEach((track) => {
         pc.addTrack(track, this.callArgs!.localStream.stream);
       });
     }
 
+    // когда готов ice отсылваем его
     pc.onicecandidate = (event) => {
-      console.log("ICE GENERATED");
       if (event.candidate) {
-        this.socket.emit('webrtc_ice_candidate', { to: remotePeerId, candidate: event.candidate });
+        this.socket.emit('webrtc_call_ice_candidate', { from: remotePeerId, candidate: event.candidate });
       } else {
-        console.log("Сбор ICE-кандидатов завершён.");
+        console.log("Сбор ICE-кандидатов завершён");
       }
     };
 
+    // когда получаем удаленный трек записываем его в videoStreams[peerId]
     pc.ontrack = (event) => {
       const stream = event.streams[0];
       if (stream) {
@@ -113,10 +114,23 @@ export default class Call {
         if (this.callArgs) {
           this.callArgs.onStream(stream);
         }
+          try {
+        
+            // Создаем элемент <video>
+            const video = document.createElement('video');
+            video.autoplay = true;
+            video.playsInline = true;
+            video.srcObject = stream;
+        
+            // Добавляем <video> в <body>
+            document.body.appendChild(video);
+          } catch (error) {
+            console.error('Error accessing media devices:', error);
+          }
       }
     };
 
-    // Следим за состоянием соединения
+    // Если связь отвалилась заканчиваем звонок
     pc.onconnectionstatechange = () => {
       if (pc.connectionState === "disconnected" || pc.connectionState === "failed") {
         this.onRemoteCallEnd();
@@ -138,6 +152,7 @@ export default class Call {
     return pc;
   }
 
+  // УСТАНОВКА СОЕДИНЕНИЯ
   private async _peerConnection(remotePeerId: string) {
     try {
       // Создаём RTCPeerConnection
@@ -149,14 +164,12 @@ export default class Call {
       await pc.setLocalDescription(offer);
 
       // Отправляем offer 
-      console.log('sending webrtc_offer to', remotePeerId);
-      this.socket.emit('webrtc_call_offer', { to: remotePeerId, offer: offer });
+      this.socket.emit('webrtc_call_offer', { from: remotePeerId, offer });
       this.connectAttempts = 0;
     } catch (e: any) {
       console.error(e);
       // Пробуем переподключиться
       const tryReconnect = async (error: any) => {
-        console.log(error.type, this.connectAttempts);
         if (error.type === 'peer-unavailable' && this.connectAttempts < 5) {
           this.connectAttempts++;
           console.log('reconnecting', this.connectAttempts);
@@ -171,47 +184,39 @@ export default class Call {
     }
   }
 
-  private async handleOffer(data: { from: string, offer: RTCSessionDescriptionInit }) {
-    const remotePeerId = data.from;
-    try {
-      const pc = await this.createPeerConnection(remotePeerId);
-      this.connections[remotePeerId] = pc;
-
-      await pc.setRemoteDescription(new RTCSessionDescription(data.offer));
-
-      // Генерируем answer и устанавливаем локальное описание
-      const answer = await pc.createAnswer();
-      await pc.setLocalDescription(answer);
-
-      // Отправляем answer
-      this.socket.emit('webrtc_call_answer', { to: remotePeerId, answer: answer });
-    } catch (e) {
-      console.error("Error handling offer:", e);
-      this.callArgs?.onError?.(e);
-    }
-  }
-
+  // Обрабатываем полученный answer на offer
   private async handleAnswer(data: { from: string, answer: RTCSessionDescriptionInit }) {
+    // устанавливаем в remotePeerId data.from
     const remotePeerId = data.from;
+    // получаем peer
     const pc = this.connections[remotePeerId];
     if (!pc) {
       console.error("No connection found for remote peer", remotePeerId);
       return;
     }
     try {
-      await pc.setRemoteDescription(new RTCSessionDescription(data.answer));
+      // если связь еще не установлена то устанвливаем remoteDescription в peer
+      if (pc.signalingState !== "stable") {
+        await pc.setRemoteDescription(new RTCSessionDescription(data.answer));
+      } else {
+        console.warn("Skipping setRemoteDescription: Already in stable state");
+      }
     } catch (e) {
       console.error("Error setting remote description from answer", e);
       this.callArgs?.onError?.(e);
     }
   }
 
+  // обрабатываем полученный iceCandidate 
   private async handleIceCandidate(data: { from: string, candidate: RTCIceCandidateInit }) {
     const remotePeerId = data.from;
+    // получаем peer
     const pc = this.connections[remotePeerId];
     if (!pc) return;
+    // если есть ice кандидаты
     if (data.candidate && (data.candidate.sdpMid || data.candidate.sdpMLineIndex !== null)) {
       try {
+        // добавляем кандидат в peer
         await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
       } catch (e) {
         console.error("Error adding ICE candidate", e);
@@ -221,13 +226,18 @@ export default class Call {
     }
   }
 
+  // обрабатываем окончания звонка
   private handleCallEnd() {
+    // Если звонок не завершен, то вызываем onCallEnd
     if (this.store.get().calling !== CallingState.NoCall) {
       this.callArgs && this.callArgs.onCallEnd();
     }
+    // меняем state на NoCall
     this.store.update({ calling: CallingState.NoCall });
     // Закрываем все созданные RTCPeerConnection
     Object.values(this.connections).forEach((pc) => pc.close());
+    this.callArgs?.onCallEnd();
+    // Очищаем connections
     this.connections = {};
     this.callArgs = null;
   }
@@ -235,11 +245,16 @@ export default class Call {
   // Обработчик события завершения вызова по сигналу
   private onRemoteCallEnd = () => {
     if ([CallingState.Requesting, CallingState.Connecting].includes(this.store.get().calling)) {
+      // Если вызов еще не начался, то вызываем onReject
       this.callArgs && this.callArgs.onReject();
+      // Закрываем все соединения и обнуляем callArgs
       Object.values(this.connections).forEach((pc) => pc.close());
+      this.connections = {};
+      this.callArgs?.onCallEnd();
       this.store.update({ calling: CallingState.NoCall });
       this.callArgs = null;
     } else {
+      // Вызываем полный обработчик завершения вызова
       this.handleCallEnd();
     }
   };
@@ -253,8 +268,10 @@ export default class Call {
 
   private emitData = (event: string, data?: any) => {
     if (this.getAssistVersion() === 1) {
+      console.log('SEND EVENT', event)
       this.socket?.emit(event, data);
     } else {
+      console.log('SEND EVENT', event)
       this.socket?.emit(event, { meta: { tabId: this.store.get().currentTab }, data });
     }
   };
@@ -300,19 +317,15 @@ export default class Call {
   // Уведомление пиров об изменении состояния локального видео
   toggleVideoLocalStream(enabled: boolean) {
     // Передаём сигнал через socket
-    this.socket.emit('videofeed', { streamId: this.peerID, enabled });
+    this.emitData('videofeed', { streamId: this.peerID, enabled });
   }
 
-  /**
-   * Соединение с другими агентами
-   */
+  // Соединяемся с другими агентами
   addPeerCall(thirdPartyPeers: string[]) {
     thirdPartyPeers.forEach((peerId) => this._peerConnection(peerId));
   }
 
-  /**
-   * Соединение с основным пользователем приложения.
-   */
+  // Вызывает метод создания соединения с пиром
   private _callSessionPeer() {
     if (![CallingState.NoCall, CallingState.Reconnecting].includes(this.store.get().calling)) {
       return;
@@ -322,6 +335,7 @@ export default class Call {
     if (!tab) {
       console.warn('No tab data to connect to peer');
     }
+
     // Формируем идентификатор пира в зависимости от версии ассиста
     const peerId =
       this.getAssistVersion() === 1
@@ -338,5 +352,6 @@ export default class Call {
     void this.initiateCallEnd();
     Object.values(this.connections).forEach((pc) => pc.close());
     this.connections = {};
+    this.callArgs?.onCallEnd();
   }
 }
diff --git a/frontend/app/player/web/assist/CanvasReceiver.ts b/frontend/app/player/web/assist/CanvasReceiver.ts
index 49d13c33f..bf47380a1 100644
--- a/frontend/app/player/web/assist/CanvasReceiver.ts
+++ b/frontend/app/player/web/assist/CanvasReceiver.ts
@@ -1,5 +1,6 @@
 import { VElement } from 'Player/web/managers/DOM/VirtualDOM';
 import MessageManager from 'Player/web/MessageManager';
+import { Socket } from 'socket.io-client';
 
 let frameCounter = 0;
 
@@ -19,7 +20,7 @@ export default class CanvasReceiver {
   private streams: Map<string, MediaStream> = new Map();
   // Храним RTCPeerConnection для каждого удалённого пира
   private connections: Map<string, RTCPeerConnection> = new Map();
-  private id: string;
+  private cId: string;
 
   //sendSignal – для отправки сигналов (offer/answer/ICE)
   constructor(
@@ -27,31 +28,50 @@ export default class CanvasReceiver {
     private readonly config: RTCIceServer[] | null,
     private readonly getNode: MessageManager['getNode'],
     private readonly agentInfo: Record<string, any>,
-    private readonly sendSignal: (data: any) => void
+    private readonly socket: Socket,
   ) {
     // Формируем идентификатор как в PeerJS
-    this.id = `${this.peerIdPrefix}-${this.agentInfo.id}-canvas`;
+    this.cId = `${this.peerIdPrefix}-${this.agentInfo.id}-canvas`;
+
+    this.socket.on('webrtc_canvas_offer', (data: { data: { offer: RTCSessionDescriptionInit, id: string }}) => {
+      const { offer, id } = data.data;
+      if (checkId(id, this.cId)) {
+        this.handleOffer(offer, id);
+      }
+    });
+    
+    this.socket.on('webrtc_canvas_ice_candidate', (data: { data: { candidate: RTCIceCandidateInit, id: string }}) => {
+      const {candidate, id } = data.data;
+      if (checkId(id, this.cId)) {
+        this.handleCandidate(candidate, id);
+      }
+    });
+
+    this.socket.on('webrtc_canvas_restart', () => {
+      this.clear();
+    });
   }
 
-  async handleOffer(from: string, offer: RTCSessionDescriptionInit): Promise<void> {
+  async handleOffer(offer: RTCSessionDescriptionInit, id: string): Promise<void> {
     const pc = new RTCPeerConnection({
       iceServers: this.config ? this.config : [{ urls: "stun:stun.l.google.com:19302" }],
     });
 
     // Сохраняем соединение
-    this.connections.set(from, pc);
+    this.connections.set(id, pc);
 
     pc.onicecandidate = (event) => {
       if (event.candidate) {
-        this.sendSignal({ to: from, type: 'canvas_ice_candidate', candidate: event.candidate });
+        this.socket.emit('webrtc_canvas_ice_candidate', ({ candidate: event.candidate, id }));
       }
     };
 
     pc.ontrack = (event) => {
+
       const stream = event.streams[0];
       if (stream) {
         // Определяем canvasId из удалённого peer id
-        const canvasId = from.split('-')[2];
+        const canvasId = id.split('-')[4];
         this.streams.set(canvasId, stream);
         setTimeout(() => {
           const node = this.getNode(parseInt(canvasId, 10));
@@ -62,6 +82,8 @@ export default class CanvasReceiver {
               node.node as HTMLCanvasElement,
               (node.node as HTMLCanvasElement).getContext('2d') as CanvasRenderingContext2D
             );
+          } else {
+            console.log('NODE', canvasId, 'IS NOT FOUND');
           }
         }, 250);
       }
@@ -72,11 +94,11 @@ export default class CanvasReceiver {
     const answer = await pc.createAnswer();
     await pc.setLocalDescription(answer);
 
-    this.sendSignal({ to: from, type: 'canvas_answer', answer: answer });
+    this.socket.emit('webrtc_canvas_answer', { answer: answer, id });
   }
 
-  async handleCandidate(from: string, candidate: RTCIceCandidateInit): Promise<void> {
-    const pc = this.connections.get(from);
+  async handleCandidate(candidate: RTCIceCandidateInit, id: string): Promise<void> {
+    const pc = this.connections.get(id);
     if (pc) {
       try {
         await pc.addIceCandidate(new RTCIceCandidate(candidate));
@@ -167,6 +189,10 @@ function spawnDebugVideo(stream: MediaStream, node: VElement) {
     });
 }
 
+function checkId(id: string, cId: string): boolean {
+  return id.includes(cId);
+}
+
 /** simple peer example
  * // @ts-ignore
  *     const peer = new SLPeer({ initiator: false })
diff --git a/tracker/tracker-assist/layout/index-chat.html b/tracker/tracker-assist/layout/index-chat.html
index 16681f0dd..0fe7d37e3 100644
--- a/tracker/tracker-assist/layout/index-chat.html
+++ b/tracker/tracker-assist/layout/index-chat.html
@@ -1,490 +1,545 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>OpenReplay | Assist</title>
 
-    <!--CSS -->
-    <!-- <link href="css/styles.css" rel="stylesheet"> -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-.text-uppercase {
-    text-transform: uppercase;
-}
-.connecting-message {
-  /* margin-top: 50%; */
-  font-size: 20px;
-  color: #aaa;
-  text-align: center;
-  display: none;
-  font-family: sans-serif;
-}
+<head>
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>OpenReplay | Assist</title>
 
-.status-connecting .connecting-message {
-  /* display: block; */
-}
-.status-connecting .card {
-  /* display: none; */
-}
+  <!--CSS -->
+  <!-- <link href="css/styles.css" rel="stylesheet"> -->
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
 
-.card{
-  font: 14px 'Roboto', sans-serif;
-  /* min-width: 324px; */
-  width: 300px;
-  /* max-width: 800px; */
-  /* border: solid thin #ccc; */
-  /* box-shadow: 0 0 10px #aaa; */
-  border: solid 4px rgba(0, 0, 0, 0.2);
-  border-radius: .5rem;
-}
+    .text-uppercase {
+      text-transform: uppercase;
+    }
 
-.card-footers {
-  display: flex;
-  border-bottom: solid thin #CCC;
-  padding: 5px 5px;
-  justify-content: space-between;
-}
+    .connecting-message {
+      /* margin-top: 50%; */
+      font-size: 20px;
+      color: #aaa;
+      text-align: center;
+      display: none;
+      font-family: sans-serif;
+    }
 
-.card-footers .assist-controls {
-  display: flex;
-  align-items: center;
-}
+    .status-connecting .connecting-message {
+      /* display: block; */
+    }
 
-.btn-danger {
-  background-color: #CC0000 !important;
-  color: white;
-}
+    .status-connecting .card {
+      /* display: none; */
+    }
 
-.btn-danger:hover {
-  background-color: #FF0000 !important;
-  color: white;
-}
+    .card {
+      font: 14px 'Roboto', sans-serif;
+      /* min-width: 324px; */
+      width: 300px;
+      /* max-width: 800px; */
+      /* border: solid thin #ccc; */
+      /* box-shadow: 0 0 10px #aaa; */
+      border: solid 4px rgba(0, 0, 0, 0.2);
+      border-radius: .5rem;
+    }
 
-.btn {
-  padding: 5px 8px;
-  font-size: 14px;
-  border-radius: .5rem;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
+    .card-footers {
+      display: flex;
+      border-bottom: solid thin #CCC;
+      padding: 5px 5px;
+      justify-content: space-between;
+    }
 
-.btn span {
-  margin-left: 10px;
-}
+    .card-footers .assist-controls {
+      display: flex;
+      align-items: center;
+    }
 
-.btn:hover {
-  filter: brightness(0.9);
-}
+    .btn-danger {
+      background-color: #CC0000 !important;
+      color: white;
+    }
 
-.card .card-header{
-  cursor: move;
-  padding: 14px 18px;
-  display: flex;
-  justify-content: space-between;
-  border-bottom: solid thin #ccc;
-}
+    .btn-danger:hover {
+      background-color: #FF0000 !important;
+      color: white;
+    }
 
-#agent-name, #duration{
-  cursor:default;
-}
+    .btn {
+      padding: 5px 8px;
+      font-size: 14px;
+      border-radius: .5rem;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+    }
 
-#video-container {
-  background-color: rgb(90, 90, 90);
-  position: relative;
-  overflow: hidden;
-  /* width: 300px; */
-}
+    .btn span {
+      margin-left: 10px;
+    }
 
-#video-container video {
-  width: 100% !important;
-  height: auto;
-  object-fit: cover;
-}
-#local-stream, #remote-stream {
-  /* display:none;  */ /* TODO uncomment this line  */
-}
-#video-container.remote #remote-stream {
-  display: block;
-}
-#video-container.local {
-  min-height: 100px;
-}
-#video-container.local #local-stream {
-  display: block;
-}
+    .btn:hover {
+      filter: brightness(0.9);
+    }
 
-#local-stream{
-  width: 35%;
-  /* top: 50%; */
-  /* left: 70%; */
-  position: absolute;
-  z-index: 99;
-  bottom: 5px;
-  right: 5px;
-  border: thin solid rgba(255,255,255, .3);
-  overflow: hidden;
-}
+    .card .card-header {
+      cursor: move;
+      padding: 14px 18px;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: solid thin #ccc;
+    }
 
-#audio-btn {
-  margin-right: 10px;
-}
-#audio-btn .bi-mic {
-  fill: #CC0000;
-}
-#audio-btn .bi-mic-mute {
-  display:none;
-}
-#audio-btn:after {
-  /* text-transform: capitalize; */
-  color: #CC0000;
-  content: 'Mute';
-  padding-left: 5px;
-}
-#audio-btn.muted .bi-mic-mute {
-  display: inline-block;
-}
-#audio-btn.muted .bi-mic {
-  display:none;
-}
-#audio-btn.muted:after {
-  content: 'Unmute';
-  padding-left: 5px;
-}
+    #agent-name,
+    #duration {
+      cursor: default;
+    }
+
+    #video-container {
+      background-color: rgb(90, 90, 90);
+      position: relative;
+      overflow: hidden;
+      /* width: 300px; */
+    }
+
+    #video-container video {
+      width: 100% !important;
+      height: auto;
+      object-fit: cover;
+    }
+
+    #local-stream,
+    #remote-stream {
+      /* display:none;  */
+      /* TODO uncomment this line  */
+    }
+
+    #video-container.remote #remote-stream {
+      display: block;
+    }
+
+    #video-container.local {
+      min-height: 100px;
+    }
+
+    #video-container.local #local-stream {
+      display: block;
+    }
+
+    #local-stream {
+      width: 35%;
+      /* top: 50%; */
+      /* left: 70%; */
+      position: absolute;
+      z-index: 99;
+      bottom: 5px;
+      right: 5px;
+      border: thin solid rgba(255, 255, 255, .3);
+      overflow: hidden;
+    }
+
+    #audio-btn {
+      margin-right: 10px;
+    }
+
+    #audio-btn .bi-mic {
+      fill: #CC0000;
+    }
+
+    #audio-btn .bi-mic-mute {
+      display: none;
+    }
+
+    #audio-btn:after {
+      /* text-transform: capitalize; */
+      color: #CC0000;
+      content: 'Mute';
+      padding-left: 5px;
+    }
+
+    #audio-btn.muted .bi-mic-mute {
+      display: inline-block;
+    }
+
+    #audio-btn.muted .bi-mic {
+      display: none;
+    }
+
+    #audio-btn.muted:after {
+      content: 'Unmute';
+      padding-left: 5px;
+    }
 
 
-#video-btn .bi-camera-video {
-  fill: #CC0000;
-}
-#video-btn .bi-camera-video-off {
-  display:none;
-}
-#video-btn:after {
-  /* text-transform: capitalize; */
-  color: #CC0000;
-  content: 'Stop Video';
-  padding-left: 5px;
-}
-#video-btn.off:after {
-  content: 'Start Video';
-  padding-left: 5px;
-}
-#video-btn.off .bi-camera-video-off {
-  display: inline-block;
-}
-#video-btn.off .bi-camera-video {
-  display:none;
-}
+    #video-btn .bi-camera-video {
+      fill: #CC0000;
+    }
 
-/* CHART */
-#chat-card {
-  display: flex;
-  flex-direction: column;
-  font-size: 14px;
-  background-color: white;
-}
+    #video-btn .bi-camera-video-off {
+      display: none;
+    }
 
-#chat-card .chat-messages { display: none; }
-#chat-card .chat-input { display: none; }
-#chat-card .chat-header .arrow-state { transform: rotate(180deg); }
-#chat-card.active .chat-messages { display: flex; }
-#chat-card.active .chat-input {  display: flex; }
-#chat-card.active .chat-header .arrow-state { transform: rotate(0deg); }
+    #video-btn:after {
+      /* text-transform: capitalize; */
+      color: #CC0000;
+      content: 'Stop Video';
+      padding-left: 5px;
+    }
 
-#chat-card .chat-header {
-  border-bottom: solid thin #ccc;
-  padding: 8px 16px;
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
-}
+    #video-btn.off:after {
+      content: 'Start Video';
+      padding-left: 5px;
+    }
 
-#chat-card .chat-header .chat-title {
-  display: flex;
-  align-items: center;
-}
+    #video-btn.off .bi-camera-video-off {
+      display: inline-block;
+    }
 
-#chat-card .chat-header .chat-title span {
-  margin-left: 6px;
-}
+    #video-btn.off .bi-camera-video {
+      display: none;
+    }
 
-#chat-card .chat-messages {
-  padding: 8px 16px;
-  overflow-y: auto;
-  height: 250px;
-  overflow-y: auto;
-  flex-direction: column;
-  justify-content: flex-end;
-}
+    /* CHART */
+    #chat-card {
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+      background-color: white;
+    }
 
-#chat-card .message-text {
-  padding: 8px 16px;
-  border-radius: 20px;
-  color: #666666;
-  margin-bottom: 2px;
-}
+    #chat-card .chat-messages {
+      display: none;
+    }
 
-#chat-card .message .message-text {
-  /* max-width: 70%; */
-  width: fit-content;
-}
-#chat-card .message {
-  margin-bottom: 15px;
-}
+    #chat-card .chat-input {
+      display: none;
+    }
 
-#chat-card .chat-messages .message.left .message-text {
-  text-align: left;
-  background: #D7E2E2;
-  border-radius: 0px 30px 30px 30px;
-}
+    #chat-card .chat-header .arrow-state {
+      transform: rotate(180deg);
+    }
 
-#chat-card .message .message-user {
-  font-size: 12px;
-  font-weight: bold;
-  color: #999999;
-}
-#chat-card .message .message-time {
-  font-size: 12px;
-  color: #999999;
-  margin-left: 4px;
-}
+    #chat-card.active .chat-messages {
+      display: flex;
+    }
 
-#chat-card .chat-messages .message.right {
-  margin-left: auto;
-  text-align: right;
-}
+    #chat-card.active .chat-input {
+      display: flex;
+    }
 
-#chat-card .chat-messages .message.right .message-text {
-  background: #E4E4E4;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: 30px 30px 0px 30px;
-}
+    #chat-card.active .chat-header .arrow-state {
+      transform: rotate(0deg);
+    }
 
-#chat-card .chat-input {
-  margin: 10px;
-  border-radius: .5rem;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  background-color: #DDDDDD;
-  position: relative;
-}
+    #chat-card .chat-header {
+      border-bottom: solid thin #ccc;
+      padding: 8px 16px;
+      display: flex;
+      justify-content: space-between;
+      cursor: pointer;
+    }
 
-#chat-card .chat-input .input {
-  width: 100%;
-  border: none;
-  border-radius: 0px;
-  padding: 8px 16px;
-  font-size: 16px;
-  color: #333;
-  background-color: transparent;
-}
+    #chat-card .chat-header .chat-title {
+      display: flex;
+      align-items: center;
+    }
 
-.send-btn {
-  width: 26px;
-  height: 26px;
-  background-color: #AAA;
-  position: absolute;
-  right: 5px;
-  top: 0;
-  bottom: 0;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: auto;
-  cursor: pointer;
-}
-.send-btn:hover {
-  background-color: #999;
-}
-.send-btn svg {
-  fill: #DDDDDD;
-}
+    #chat-card .chat-header .chat-title span {
+      margin-left: 6px;
+    }
 
-.confirm-window .title {
-  margin-bottom: 10px;
-}
-.confirm-window {
-  font: 14px 'Roboto', sans-serif;
-  padding: 20px;
-  background-color: #F3F3F3;
-  border-radius: .5rem;
-  /* position: absolute; */
-  width: fit-content;
-  color: #666666;
-  display: none;
-}
-.confirm-window .actions {
-  background-color: white;
-  padding: 10px;
-  display: flex;
-  box-shadow: 0px 0px 3.99778px 1.99889px rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-}
+    #chat-card .chat-messages {
+      padding: 8px 16px;
+      overflow-y: auto;
+      height: 250px;
+      overflow-y: auto;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
 
-.btn-lg {
-  font-size: 14px;
-  padding: 10px 14px;
-}
+    #chat-card .message-text {
+      padding: 8px 16px;
+      border-radius: 20px;
+      color: #666666;
+      margin-bottom: 2px;
+    }
 
-.btn-success {
-  background: rgba(0, 167, 47, 1);
-  color: white;
-}
+    #chat-card .message .message-text {
+      /* max-width: 70%; */
+      width: fit-content;
+    }
 
-/* .btn-error:hover,
+    #chat-card .message {
+      margin-bottom: 15px;
+    }
+
+    #chat-card .chat-messages .message.left .message-text {
+      text-align: left;
+      background: #D7E2E2;
+      border-radius: 0px 30px 30px 30px;
+    }
+
+    #chat-card .message .message-user {
+      font-size: 12px;
+      font-weight: bold;
+      color: #999999;
+    }
+
+    #chat-card .message .message-time {
+      font-size: 12px;
+      color: #999999;
+      margin-left: 4px;
+    }
+
+    #chat-card .chat-messages .message.right {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    #chat-card .chat-messages .message.right .message-text {
+      background: #E4E4E4;
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+      border-radius: 30px 30px 0px 30px;
+    }
+
+    #chat-card .chat-input {
+      margin: 10px;
+      border-radius: .5rem;
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+      background-color: #DDDDDD;
+      position: relative;
+    }
+
+    #chat-card .chat-input .input {
+      width: 100%;
+      border: none;
+      border-radius: 0px;
+      padding: 8px 16px;
+      font-size: 16px;
+      color: #333;
+      background-color: transparent;
+    }
+
+    .send-btn {
+      width: 26px;
+      height: 26px;
+      background-color: #AAA;
+      position: absolute;
+      right: 5px;
+      top: 0;
+      bottom: 0;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: auto;
+      cursor: pointer;
+    }
+
+    .send-btn:hover {
+      background-color: #999;
+    }
+
+    .send-btn svg {
+      fill: #DDDDDD;
+    }
+
+    .confirm-window .title {
+      margin-bottom: 10px;
+    }
+
+    .confirm-window {
+      font: 14px 'Roboto', sans-serif;
+      padding: 20px;
+      background-color: #F3F3F3;
+      border-radius: .5rem;
+      /* position: absolute; */
+      width: fit-content;
+      color: #666666;
+      display: none;
+    }
+
+    .confirm-window .actions {
+      background-color: white;
+      padding: 10px;
+      display: flex;
+      box-shadow: 0px 0px 3.99778px 1.99889px rgba(0, 0, 0, 0.1);
+      border-radius: 6px;
+    }
+
+    .btn-lg {
+      font-size: 14px;
+      padding: 10px 14px;
+    }
+
+    .btn-success {
+      background: rgba(0, 167, 47, 1);
+      color: white;
+    }
+
+    /* .btn-error:hover,
 .btn-success:hover {
   filter: brightness(0.9);
 } */
 
-.btn-error {
-  background: #FFE9E9;
-  /* border-color: #d43f3a; */
-  color: #CC0000;
-}
-    </style>
+    .btn-error {
+      background: #FFE9E9;
+      /* border-color: #d43f3a; */
+      color: #CC0000;
+    }
+  </style>
 
 
-  </head>
+</head>
 
 
-  <body data-openreplay-hidden>
-    <div id="remote-control-confirm" class="confirm-window">
-      <div class="title">The agent is requesting remote control</div>
-      <div class="actions">
-        <button class="text-uppercase btn btn-lg btn-success" style="margin-right: 10px">Grant remote access</button>
-        <button class="text-uppercase btn btn-lg btn-error">Reject</button>
-      </div>
+<body data-openreplay-hidden>
+  <div id="remote-control-confirm" class="confirm-window">
+    <div class="title">The agent is requesting remote control</div>
+    <div class="actions">
+      <button class="text-uppercase btn btn-lg btn-success" style="margin-right: 10px">Grant remote access</button>
+      <button class="text-uppercase btn btn-lg btn-error">Reject</button>
     </div>
+  </div>
 
-    <div id="call-confirm" class="confirm-window">
-      <div class="title">Answer the call so the agent can assist.</div>
-      <div class="actions">
-        <button class="text-uppercase btn btn-lg btn-success" style="margin-right: 10px">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
-            <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
-          </svg>
-          <span>Answer</span>
-        </button>
-        <button class="text-uppercase btn btn-lg btn-error">Reject</button>
-      </div>
+  <div id="call-confirm" class="confirm-window">
+    <div class="title">Answer the call so the agent can assist.</div>
+    <div class="actions">
+      <button class="text-uppercase btn btn-lg btn-success" style="margin-right: 10px">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone"
+          viewBox="0 0 16 16">
+          <path
+            d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />
+        </svg>
+        <span>Answer</span>
+      </button>
+      <button class="text-uppercase btn btn-lg btn-error">Reject</button>
     </div>
-    <section id="or-assist" class="status-connecting">
-        <div class="connecting-message"> Connecting... </div>
-        <div class="card shadow">
-            <div class="drag-area card-header d-flex justify-content-between">
-                <div class="user-info">
-                    <span>Call with</span>
-                    <!-- User Name -->
-                    <span id="agent-name" class="person-name fw-light" >Support Agent</span>
-                </div>
-                <div class="call-duration">
-                    <!--Call Duration. -->
-                    <span id="duration" class="card-subtitle mb-2 text-muted fw-light"  data-bs-toggle="tooltip" data-bs-placement="bottom" title="Duration">00:00</span>
-                </div>
-            </div>
-            <div id="video-container" class="card-body bg-dark p-0 d-flex align-items-center position-relative">
-                <div id="local-stream" class="ratio ratio-4x3 rounded m-0 p-0 shadow">
-                    <!-- <p class="text-white m-auto text-center">Starting video...</p> -->
-                    <video id="video-local" autoplay muted></video>
-                </div>
-
-                <div id="remote-stream" class="ratio ratio-4x3 m-0 p-0">
-                    <!-- <p id="remote-stream-placeholder" class="text-white m-auto text-center">Starting video...</p> -->
-                    <video id="video-remote" autoplay></video>
-                </div>
-            </div>
-
-            <div class="card-footers">
-                <div class="assist-controls">
-                    <!-- Add class .muted to #audio-btn when user  mutes audio -->
-                    <button
-                      href="#"
-                      id="audio-btn"
-                      class="btn btn-light btn-sm text-uppercase me-2"
-                    >
-                      <i>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-mic" viewBox="0 0 16 16">
-                          <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
-                          <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
-                        </svg>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-mic-mute" viewBox="0 0 16 16">
-                          <path d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879l-1-1V3a2 2 0 0 0-3.997-.118l-.845-.845A3.001 3.001 0 0 1 11 3z"/>
-                          <path d="m9.486 10.607-.748-.748A2 2 0 0 1 6 8v-.878l-1-1V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z"/>
-                        </svg>
-                      </i>
-                    </button>
-
-                    <!--Add class .off to #video-btn when user stops video -->
-                    <button
-                      href="#"
-                      id="video-btn"
-                      class="btn btn-light btn-sm text-uppercase ms-2"
-                    >
-                      <i>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
-                          <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z"/>
-                        </svg>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video-off" viewBox="0 0 16 16">
-                          <path fill-rule="evenodd" d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z"/>
-                        </svg>
-                      </i>
-                    </button>
-
-                </div>
-
-                <button id="end-call-btn" href="#" class="btn btn-danger btn-sm text-uppercase" style="margin-right: 8px;">End</button>
-            </div>
-
-            <!-- CHAT - add .active class to show the messages and input -->
-            <div id="chat-card" class="active">
-              <div class="chat-header">
-                <div class="chat-title">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-chat" viewBox="0 0 16 16">
-                    <path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
-                  </svg>
-                  <span>Chat</span>
-                </div>
-                <div>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="bi bi-chevron-up arrow-state" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
-                  </svg>
-                </div>
-              </div>
-              <div class="chat-messages">
-                <div class="message left">
-                  <div class="message-text"> Hey, did you get the key? </div>
-                  <div>
-                    <span class="message-user">Username</span>
-                    <span class="message-time"> 00:00 </span>
-                  </div>
-                </div>
-                <div class="message right">
-                  <div class="message-text">
-                    Oui, merci!
-                  </div>
-                  <div>
-                    <span class="message-user">Username</span>
-                    <span class="message-time">00:00</span>
-                  </div>
-                </div>
-              </div>
-              <div class="chat-input">
-                <input type="text" class="input" placeholder="Type a message...">
-                <div class="send-btn">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
-                  </svg>
-                </div>
-              </div>
-            </div>
+  </div>
+  <section id="or-assist" class="status-connecting">
+    <div class="connecting-message"> Connecting... </div>
+    <div class="card shadow">
+      <div class="drag-area card-header d-flex justify-content-between">
+        <div class="user-info">
+          <span>Call with</span>
+          <!-- User Name -->
+          <span id="agent-name" class="person-name fw-light">Support Agent</span>
         </div>
-    </section>
-  </body>
-  </html>
+        <div class="call-duration">
+          <!--Call Duration. -->
+          <span id="duration" class="card-subtitle mb-2 text-muted fw-light" data-bs-toggle="tooltip"
+            data-bs-placement="bottom" title="Duration">00:00</span>
+        </div>
+      </div>
+      <div id="video-container" class="card-body bg-dark p-0 d-flex align-items-center position-relative">
+        <div id="local-stream" class="ratio ratio-4x3 rounded m-0 p-0 shadow scale-x-[-1]">
+          <!-- <p class="text-white m-auto text-center">Starting video...</p> -->
+          <video id="video-local" autoplay muted class="scale-x-[-1]"></video>
+        </div>
+
+        <div id="remote-stream" class="ratio ratio-4x3 m-0 p-0">
+          <!-- <p id="remote-stream-placeholder" class="text-white m-auto text-center">Starting video...</p> -->
+          <video id="video-remote" autoplay></video>
+        </div>
+      </div>
+
+      <div class="card-footers">
+        <div class="assist-controls">
+          <!-- Add class .muted to #audio-btn when user  mutes audio -->
+          <button href="#" id="audio-btn" class="btn btn-light btn-sm text-uppercase me-2">
+            <i>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-mic" viewBox="0 0 16 16">
+                <path
+                  d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" />
+                <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z" />
+              </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-mic-mute" viewBox="0 0 16 16">
+                <path
+                  d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879l-1-1V3a2 2 0 0 0-3.997-.118l-.845-.845A3.001 3.001 0 0 1 11 3z" />
+                <path
+                  d="m9.486 10.607-.748-.748A2 2 0 0 1 6 8v-.878l-1-1V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" />
+              </svg>
+            </i>
+          </button>
+
+          <!--Add class .off to #video-btn when user stops video -->
+          <button href="#" id="video-btn" class="btn btn-light btn-sm text-uppercase ms-2">
+            <i>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                class="bi bi-camera-video" viewBox="0 0 16 16">
+                <path fill-rule="evenodd"
+                  d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z" />
+              </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                class="bi bi-camera-video-off" viewBox="0 0 16 16">
+                <path fill-rule="evenodd"
+                  d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z" />
+              </svg>
+            </i>
+          </button>
+
+        </div>
+
+        <button id="end-call-btn" href="#" class="btn btn-danger btn-sm text-uppercase"
+          style="margin-right: 8px;">End</button>
+      </div>
+
+      <!-- CHAT - add .active class to show the messages and input -->
+      <div id="chat-card" class="active">
+        <div class="chat-header">
+          <div class="chat-title">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-chat"
+              viewBox="0 0 16 16">
+              <path
+                d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z" />
+            </svg>
+            <span>Chat</span>
+          </div>
+          <div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="bi bi-chevron-up arrow-state"
+              viewBox="0 0 16 16">
+              <path fill-rule="evenodd"
+                d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" />
+            </svg>
+          </div>
+        </div>
+        <div class="chat-messages">
+          <div class="message left">
+            <div class="message-text"> Hey, did you get the key? </div>
+            <div>
+              <span class="message-user">Username</span>
+              <span class="message-time"> 00:00 </span>
+            </div>
+          </div>
+          <div class="message right">
+            <div class="message-text">
+              Oui, merci!
+            </div>
+            <div>
+              <span class="message-user">Username</span>
+              <span class="message-time">00:00</span>
+            </div>
+          </div>
+        </div>
+        <div class="chat-input">
+          <input type="text" class="input" placeholder="Type a message...">
+          <div class="send-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-arrow-right-short"
+              viewBox="0 0 16 16">
+              <path fill-rule="evenodd"
+                d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tracker/tracker-assist/layout/index.html b/tracker/tracker-assist/layout/index.html
index cf62a9789..8a95d0653 100644
--- a/tracker/tracker-assist/layout/index.html
+++ b/tracker/tracker-assist/layout/index.html
@@ -152,8 +152,9 @@
         </div>
       </div>
       <div id="video-container" class="card-body bg-dark p-0 d-flex align-items-center position-relative">
-        <div id="local-stream" class="ratio ratio-4x3 rounded m-0 p-0 shadow">
-          <video id="video-local" autoplay muted></video>
+        <div id="local-stream" class="ratio ratio-4x3 rounded m-0 p-0 shadow scale-x-[-1]">
+          <!-- пофиксить отображение по горизонтали -->
+          <video id="video-local" autoplay muted class="scale-x-[-1]"></video>
         </div>
 
         <div id="remote-stream" class="ratio ratio-4x3 m-0 p-0">
diff --git a/tracker/tracker-assist/src/Assist.ts b/tracker/tracker-assist/src/Assist.ts
index 2221f241f..d6d5225f7 100644
--- a/tracker/tracker-assist/src/Assist.ts
+++ b/tracker/tracker-assist/src/Assist.ts
@@ -78,7 +78,7 @@ export default class Assist {
 
   private socket: Socket | null = null
   private calls: Record<string, RTCPeerConnection> = {};
-  private canvasPeers: Record<number, RTCPeerConnection | null> = {}
+  private canvasPeers: { [id: number]: RTCPeerConnection | null } = {}
   private canvasNodeCheckers: Map<number, any> = new Map()
   private assistDemandedRestart = false
   private callingState: CallingState = CallingState.False
@@ -88,10 +88,6 @@ export default class Assist {
   private readonly options: Options
   private readonly canvasMap: Map<number, Canvas> = new Map()
 
-  // Для локального аудио/видео потока
-  private localStream: MediaStream | null = null;
-  private isCalling: boolean = false;
-
   constructor(
     private readonly app: App,
     options?: Partial<Options>,
@@ -340,11 +336,12 @@ export default class Assist {
 
 
     // TODO: restrict by id
-    socket.on('moveAnnotation', (id, event) => processEvent(id, event, (_,  d) => annot && annot.move(d)))
-    socket.on('startAnnotation', (id, event) => processEvent(id, event, (_,  d) => annot?.start(d)))
+    socket.on('moveAnnotation', (id, event) => processEvent(id, event, (_, d) => annot && annot.move(d)))
+    socket.on('startAnnotation', (id, event) => processEvent(id, event, (_, d) => annot?.start(d)))
     socket.on('stopAnnotation', (id, event) => processEvent(id, event, annot?.stop))
 
     socket.on('NEW_AGENT', (id: string, info: AgentInfo) => {
+      this.cleanCanvasConnections();
       this.agents[id] = {
         onDisconnect: this.options.onAgentConnect?.(info),
         agentInfo: info, // TODO ?
@@ -367,8 +364,10 @@ export default class Assist {
           })
       }
     })
+
     socket.on('AGENTS_CONNECTED', (ids: string[]) => {
-      ids.forEach(id =>{
+      this.cleanCanvasConnections();
+      ids.forEach(id => {
         const agentInfo = this.agents[id]?.agentInfo
         this.agents[id] = {
           agentInfo,
@@ -398,19 +397,26 @@ export default class Assist {
       this.agents[id]?.onDisconnect?.()
       delete this.agents[id]
 
+      Object.values(this.calls).forEach(pc => pc.close())
+      this.calls = {}
+
       recordingState.stopAgentRecording(id)
       endAgentCall(id)
     })
+
     socket.on('NO_AGENT', () => {
       Object.values(this.agents).forEach(a => a.onDisconnect?.())
+      this.cleanCanvasConnections();
       this.agents = {}
       if (recordingState.isActive) recordingState.stopRecording()
     })
+
     socket.on('call_end', (id) => {
       if (!callingAgents.has(id)) {
         app.debug.warn('Received call_end from unknown agent', id)
         return
       }
+
       endAgentCall(id)
     })
 
@@ -418,17 +424,38 @@ export default class Assist {
       if (app.getTabId() !== info.meta.tabId) return
       const name = info.data
       callingAgents.set(id, name)
-
-      if (!this.isCalling) {
-        setupCallSignaling();
-      }
       updateCallerNames()
     })
+
+    socket.on('webrtc_canvas_answer', async (_, data: { answer, id }) => {
+      const pc = this.canvasPeers[data.id];
+      if (pc) {
+        try {
+          await pc.setRemoteDescription(new RTCSessionDescription(data.answer));
+        } catch (e) {
+          app.debug.error('Error adding ICE candidate', e);
+        }
+      }
+    })
+
+    socket.on('webrtc_canvas_ice_candidate', async (_, data: { candidate, id }) => {
+      const pc = this.canvasPeers[data.id];
+      if (pc) {
+        try {
+          await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
+        } catch (e) {
+          app.debug.error('Error adding ICE candidate', e);
+        }
+      }
+    })
+
+    // Если приходит videofeed то в ui показываем видео
     socket.on('videofeed', (_, info) => {
       if (app.getTabId() !== info.meta.tabId) return
       const feedState = info.data
       callUI?.toggleVideoStream(feedState)
     })
+
     socket.on('request_recording', (id, info) => {
       if (app.getTabId() !== info.meta.tabId) return
       const agentData = info.data
@@ -446,6 +473,21 @@ export default class Assist {
       }
     })
 
+    socket.on('webrtc_call_offer', async (_, data: { from: string, offer: RTCSessionDescriptionInit }) => {
+      await handleIncomingCallOffer(data.from, data.offer);
+    });
+
+    socket.on('webrtc_call_ice_candidate', async (data: { from: string, candidate: RTCIceCandidateInit }) => {
+      const pc = this.calls[data.from];
+      if (pc) {
+        try {
+          await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
+        } catch (e) {
+          app.debug.error('Error adding ICE candidate', e);
+        }
+      }
+    });
+
     const callingAgents: Map<string, string> = new Map() // !! uses socket.io ID
     // TODO: merge peerId & socket.io id  (simplest way - send peerId with the name)
     const lStreams: Record<string, LocalStream> = {}
@@ -455,21 +497,16 @@ export default class Assist {
     }
     function endAgentCall(id: string) {
       callingAgents.delete(id)
+
       if (callingAgents.size === 0) {
         handleCallEnd()
       } else {
         updateCallerNames()
-        //TODO: close() specific call and corresponding lStreams (after connecting peerId & socket.io id)
       }
     }
-    const handleCallEnd = () => { // Complete stop and clear all calls
-      // Streams
-      Object.values(this.calls).forEach(pc => pc.close())
-      Object.keys(this.calls).forEach(peerId => {
-        delete this.calls[peerId]
-      })
-      Object.values(lStreams).forEach((stream) => { stream.stop() })
-      Object.keys(lStreams).forEach((peerId: string) => { delete lStreams[peerId] })
+
+    // обработка окончания вызова
+    const handleCallEnd = () => {
       // UI
       closeCallConfirmWindow()
       if (this.remoteControl?.status === RCStatus.Disabled) {
@@ -495,46 +532,23 @@ export default class Assist {
       }
     }
 
-    const setupCallSignaling = () => {
-      console.log("SETUP CALL 2");
-      socket.on('webrtc_call_offer', async (_, data: { from: string, offer: RTCSessionDescriptionInit }) => {
-        console.log('Incoming call offer from', data, data.from, data.offer);
-        await handleIncomingCallOffer(data.from, data.offer);
-      });
-      socket.on('webrtc_call_answer', async (data: { from: string, answer: RTCSessionDescriptionInit }) => {
-        const pc = this.calls[data.from];
-        if (pc) {
-          try {
-            await pc.setRemoteDescription(new RTCSessionDescription(data.answer));
-          } catch (e) {
-            app.debug.error('Error setting remote description from answer', e);
-          }
-        }
-      });
-      socket.on('webrtc_ice_candidate', async (data: { from: string, candidate: RTCIceCandidateInit }) => {
-        const pc = this.calls[data.from];
-        if (pc) {
-          try {
-            await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
-          } catch (e) {
-            app.debug.error('Error adding ICE candidate', e);
-          }
-        }
-      });
-    };
-
+    // обрабатываем входящий вызов
     const handleIncomingCallOffer = async (from: string, offer: RTCSessionDescriptionInit) => {
       app.debug.log('handleIncomingCallOffer', from)
       let confirmAnswer: Promise<boolean>
       const callingPeerIds = JSON.parse(sessionStorage.getItem(this.options.session_calling_peer_key) || '[]')
+      // если звонящий уже в списке, то сразу принимаем вызов без ui
       if (callingPeerIds.includes(from) || this.callingState === CallingState.True) {
         confirmAnswer = Promise.resolve(true)
       } else {
+        // ставим стейт в ожидание подтверждения
         this.setCallingState(CallingState.Requesting)
+        // вызываем окно подтверждения вызова
         confirmAnswer = requestCallConfirm()
-        this.playNotificationSound() // For every new agent during confirmation here
+        // звуковое уведомление звонка
+        this.playNotificationSound()
 
-        // TODO: only one (latest) timeout
+        // через 30 сек сбрасываем вызов
         setTimeout(() => {
           if (this.callingState !== CallingState.Requesting) { return }
           initiateCallEnd()
@@ -542,34 +556,66 @@ export default class Assist {
       }
 
       try {
+        // ждем рещения по принятию вызова
         const agreed = await confirmAnswer
+        // если отказали, то завершаем вызов
         if (!agreed) {
           initiateCallEnd()
           this.options.onCallDeny?.()
           return
         }
-        // Request local stream for the new connection
-        if (!lStreams[from]) {
-          app.debug.log('starting new stream for', from)
-          lStreams[from] = await RequestLocalStream()
+        // если приняли то чекаем ui, если окна вызова нет то создаем, привязываем toggle локального видео в тоглу через сокет
+        if (!callUI) {
+          callUI = new CallWindow(app.debug.error, this.options.callUITemplate)
+          callUI.setVideoToggleCallback((args: { enabled: boolean }) =>
+            this.emit('videofeed', { streamId: from, enabled: args.enabled })
+          );
         }
-        const pc = new RTCPeerConnection(this.options.config);
+        // показыаем кнопочки в окне вызова
+        callUI.showControls(initiateCallEnd)
+        if (!annot) {
+          annot = new AnnotationCanvas()
+          annot.mount()
+        }
+
+        // callUI.setLocalStreams(Object.values(lStreams))
+        try {
+          // если нет локальных стримов в lStrems то устанавливаем
+          if (!lStreams[from]) {
+            app.debug.log('starting new stream for', from)
+            // запрашиваем локальный стрим, и устанавливаем в lStreams
+            lStreams[from] = await RequestLocalStream()
+          }
+          // полученные дорожки передаем в Call ui
+          callUI.setLocalStreams(Object.values(lStreams))
+        } catch (e) {
+          app.debug.error('Error requesting local stream', e);
+          // если что-то не получилось то обрываем вызов
+          initiateCallEnd();
+          return;
+        }
+        // создаем новый RTCPeerConnection с конфигом ice серверов
+        const pc = new RTCPeerConnection({
+          iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+        });
+
+        // получаем все локальные треки и добавляем их в RTCPeerConnection
         lStreams[from].stream.getTracks().forEach(track => {
           pc.addTrack(track, lStreams[from].stream);
         });
-        // Обработка ICE-кандидатов
-        console.log("should generate ice");
 
+        // Когда получаем локальные ice кандидаты эмитим их через сокет
         pc.onicecandidate = (event) => {
-          console.log("GENERATING ICE CANDIDATE", event);
           if (event.candidate) {
-            socket.emit('webrtc_ice_candidate', { to: from, candidate: event.candidate });
+            socket.emit('webrtc_call_ice_candidate', { from, candidate: event.candidate });
           }
         };
-        // Обработка входящего медиапотока
+
+        // когда получаем удаленный поток, добавляем его в call ui
         pc.ontrack = (event) => {
           const rStream = event.streams[0];
           if (rStream && callUI) {
+
             callUI.addRemoteStream(rStream, from);
             const onInteraction = () => {
               callUI?.playRemote();
@@ -578,33 +624,26 @@ export default class Assist {
             document.addEventListener('click', onInteraction);
           }
         };
-        // Сохраняем соединение
+
+        // Сохраняем соединение с звонящим
         this.calls[from] = pc;
-        // устанавливаем remote description, создаём answer
-        console.log('1111111', offer);
+
+        // устанавливаем remote description на входящий запрос
         await pc.setRemoteDescription(new RTCSessionDescription(offer));
-        console.log('2222222');
+        // создаем ответ на входящий запрос
         const answer = await pc.createAnswer();
+        // устанавливаем ответ как локальный
         await pc.setLocalDescription(answer);
-        socket.emit('webrtc_call_answer', { to: from, answer });
-        if (!callUI) {
-          callUI = new CallWindow(app.debug.error, this.options.callUITemplate)
-          callUI.setVideoToggleCallback((args: { enabled: boolean }) =>
-            this.emit('videofeed', { streamId: from, enabled: args.enabled })
-          );
-        }
-        callUI.showControls(initiateCallEnd)
-        if (!annot) {
-          annot = new AnnotationCanvas()
-          annot.mount()
-        }
-        callUI.setLocalStreams(Object.values(lStreams))
-        // Обработка ошибок соединения
+        // передаем ответ
+        socket.emit('webrtc_call_answer', { from, answer });
+
+        // Если меняется стейт на ощибку обрываем звонок
         pc.onconnectionstatechange = () => {
           if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
             initiateCallEnd();
           }
         };
+
         // Обновление трека при изменении локального видео
         lStreams[from].onVideoTrack(vTrack => {
           const sender = pc.getSenders().find(s => s.track?.kind === 'video');
@@ -614,12 +653,17 @@ export default class Assist {
           }
           sender.replaceTrack(vTrack)
         })
+
+        // если пользователеь закрыл вкладку или переключился, то завершаем вызов
         document.addEventListener('visibilitychange', () => {
           initiateCallEnd()
         })
+
+        // когда все установилось то стейт переводим в true
         this.setCallingState(CallingState.True)
         if (!callEndCallback) { callEndCallback = this.options.onCallStart?.() }
         const callingPeerIdsNow = Object.keys(this.calls)
+        // в session storage записываем всех с кем установлен вызов
         sessionStorage.setItem(this.options.session_calling_peer_key, JSON.stringify(callingPeerIdsNow))
         this.emit('UPDATE_SESSION', { agentIds: callingPeerIdsNow, isCallActive: true })
       } catch (reason) {
@@ -642,39 +686,45 @@ export default class Assist {
       });
     };
 
+    // функция завершения вызова
     const initiateCallEnd = () => {
       this.emit('call_end');
       handleCallEnd();
     };
 
-    const startCanvasStream = (stream: MediaStream, id: number) => {
-      const canvasPID = `${app.getProjectKey()}-${sessionId}-${id}`;
-      if (!this.canvasPeers[id]) {
-        this.canvasPeers[id] = new RTCPeerConnection(this.options.config);
-      }
-      const pc = this.canvasPeers[id];
-      pc.onicecandidate = (event) => {
-        if (event.candidate) {
-          // Добавить отправку ICE-кандидата через socket
-        }
-      };
-      Object.values(this.agents).forEach(agent => {
-        if (agent.agentInfo) {
-          // реализовать сигналинг для canvas чтобы агент создал свой RTCPeerConnection для canvas
-          stream.getTracks().forEach(track => {
-            pc.addTrack(track, stream);
+    const startCanvasStream = async (stream: MediaStream, id: number) => {
+      // const canvasPID = `${app.getProjectKey()}-${sessionId}-${id}`;
+      // const target = `${agent.agentInfo.peerId}-${agent.agentInfo.id}-canvas`;
+      for (const agent of Object.values(this.agents)) {
+        if (!agent.agentInfo) return;
+
+        const uniqueId = `${agent.agentInfo.peerId}-${agent.agentInfo.id}-canvas-${id}`;
+
+        if (!this.canvasPeers[uniqueId]) {
+          this.canvasPeers[uniqueId] = new RTCPeerConnection({
+            iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
           });
-          
-        } else {
-          app.debug.error('Assist: cant establish canvas peer to agent, no agent info')
+          this.setupPeerListeners(uniqueId);
+
+          stream.getTracks().forEach((track) => {
+            this.canvasPeers[uniqueId]?.addTrack(track, stream);
+          });
+
+          // Создаем SDP offer
+          const offer = await this.canvasPeers[uniqueId].createOffer();
+          await this.canvasPeers[uniqueId].setLocalDescription(offer);
+
+          // Отправляем offer через сервер сигналинга
+          socket.emit('webrtc_canvas_offer', { offer, id: uniqueId });
+
         }
-      })
+      }
     }
 
     app.nodes.attachNodeCallback((node) => {
       const id = app.nodes.getID(node)
       if (id && hasTag(node, 'canvas')) {
-        app.debug.log(`Creating stream for canvas ${id}`)
+        // app.debug.log(`Creating stream for canvas ${id}`)
         const canvasHandler = new Canvas(
           node as unknown as HTMLCanvasElement,
           id,
@@ -705,6 +755,20 @@ export default class Assist {
     });
   }
 
+  private setupPeerListeners(id: string) {
+    const peer = this.canvasPeers[id];
+    if (!peer) return;
+    // ICE-кандидаты
+    peer.onicecandidate = (event) => {
+      if (event.candidate && this.socket) {
+        this.socket.emit('webrtc_canvas_ice_candidate', {
+          candidate: event.candidate,
+          id,
+        });
+      }
+    };
+  }
+
   private playNotificationSound() {
     if ('Audio' in window) {
       new Audio('https://static.openreplay.com/tracker-assist/notification.mp3')
@@ -715,6 +779,7 @@ export default class Assist {
     }
   }
 
+  // очищаем все данные
   private clean() {
     // sometimes means new agent connected, so we keep id for control
     this.remoteControl?.releaseControl(false, true);
@@ -722,6 +787,7 @@ export default class Assist {
       clearTimeout(this.peerReconnectTimeout)
       this.peerReconnectTimeout = null
     }
+    this.cleanCanvasConnections();
     Object.values(this.calls).forEach(pc => pc.close())
     this.calls = {}
     if (this.socket) {
@@ -733,6 +799,12 @@ export default class Assist {
     this.canvasNodeCheckers.forEach((int) => clearInterval(int))
     this.canvasNodeCheckers.clear()
   }
+
+  private cleanCanvasConnections() {
+    Object.values(this.canvasPeers).forEach(pc => pc?.close())
+    this.canvasPeers = {}
+    this.socket?.emit('webrtc_canvas_restart')
+  }
 }
 
 /** simple peers impl