From 8aac0c10c1098d544f8368b76db8791d340ea353 Mon Sep 17 00:00:00 2001
From: jiahui92 <547652008@qq.com>
Date: Sun, 1 Sep 2024 19:50:25 +0800
Subject: [PATCH] test: video

---
 web-rtc/src/index.tsx  |  8 ++++++--
 web-rtc/src/web-rtc.ts | 40 +++++++++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/web-rtc/src/index.tsx b/web-rtc/src/index.tsx
index 784aa30..2039226 100644
--- a/web-rtc/src/index.tsx
+++ b/web-rtc/src/index.tsx
@@ -1,7 +1,7 @@
 import './index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { startConnection, sendFile, startVideo } from './web-rtc.ts';
+import { startConnection, sendFile, startVideo, shareScreen } from './web-rtc.ts';
 
 // class View extends React.Component {
 //   render() {
@@ -25,9 +25,13 @@ function Page () {
         <button onClick={sendFile}>Send File</button>
       </div>
       <div>
+        <button onClick={startVideo}>start video</button>
         <video id='videoA' width="320" height="240" autoplay />
         <video id='videoB' width="320" height="240" autoplay />
-        <button onClick={startVideo}>start video</button>
+      </div>
+      <div>
+        <button onClick={shareScreen}>share screen</button>
+        <video id='screen' width="320" height="240" autoplay />
       </div>
       <pre id="log"></pre>
     </div>
diff --git a/web-rtc/src/web-rtc.ts b/web-rtc/src/web-rtc.ts
index 8c8b7ea..2e446c9 100644
--- a/web-rtc/src/web-rtc.ts
+++ b/web-rtc/src/web-rtc.ts
@@ -13,9 +13,9 @@ interface IceData {
   answer?: string;
 }
 
-let localConnection;
-let sendChannel;
-let receiveChannel;
+let localConnection: RTCPeerConnection;
+let sendChannel: RTCDataChannel;
+let receiveChannel: RTCDataChannel;
 let offer;
 let answer;
 let readSliceTimer;
@@ -250,13 +250,39 @@ export async function startVideo() {
 
   try {
     const videoStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
-    const videoA = document.querySelector('#videoA');
+    const videoA = document.querySelector('#videoA') as HTMLVideoElement;
     videoA.srcObject = videoStream;
-    localConnection.onaddstream = (event) => {
-      const videoB = document.querySelector('#videoB');
-      videoB.srcObject = event.stram;
+    for (const track of videoStream.getTracks()) {
+      localConnection.addTrack(track);
     }
   } catch (error) {
     logMessage(error.message)
   }
+
+  localConnection.ontrack = (ev) => {
+    const videoB = document.querySelector('#videoB') as HTMLVideoElement;
+    if (ev.streams && ev.streams[0]) {
+      videoB.srcObject = ev.streams[0];
+    }
+  };
+}
+
+export async function shareScreen() {
+  if (!navigator.mediaDevices?.getUserMedia) {
+    logMessage('not support getUserMedia')
+    return
+  }
+
+  try {
+    const videoStream = await navigator.mediaDevices.getUserMedia({ screen: true })
+    const videoA = document.querySelector('#videoA');
+    videoA.srcObject = videoStream;
+  } catch (error) {
+    logMessage(error.message)
+  }
+
+  localConnection.onaddstream = (event) => {
+    const videoB = document.querySelector('#videoB');
+    videoB.srcObject = event.stram;
+  }
 }