test: video

jiahui92 · Sep 1, 2024 · 8aac0c1 · 8aac0c1
1 parent af82ebc
commit 8aac0c1
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git 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
@@ -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;
+  }
 }