From 11fe9e9ecde9e068bc972dc472676ea5dd5dd77e Mon Sep 17 00:00:00 2001
From: jiahui92 <547652008@qq.com>
Date: Sun, 1 Sep 2024 20:20:52 +0800
Subject: [PATCH] test: video

---
 web-rtc/src/index.tsx  |  3 ++-
 web-rtc/src/meida.ts   | 58 ++++++++++++++++++++++++++++++++++++++++++
 web-rtc/src/web-rtc.ts | 50 +++---------------------------------
 3 files changed, 64 insertions(+), 47 deletions(-)
 create mode 100644 web-rtc/src/meida.ts

diff --git a/web-rtc/src/index.tsx b/web-rtc/src/index.tsx
index 2039226..afc661c 100644
--- a/web-rtc/src/index.tsx
+++ b/web-rtc/src/index.tsx
@@ -1,7 +1,8 @@
 import './index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { startConnection, sendFile, startVideo, shareScreen } from './web-rtc.ts';
+import { startConnection, sendFile, } from './web-rtc.ts';
+import { startVideo, shareScreen } from './meida.ts';
 
 // class View extends React.Component {
 //   render() {
diff --git a/web-rtc/src/meida.ts b/web-rtc/src/meida.ts
new file mode 100644
index 0000000..ee6ca8f
--- /dev/null
+++ b/web-rtc/src/meida.ts
@@ -0,0 +1,58 @@
+import { logMessage } from './utils.ts';
+
+export async function initMedia(localConnection: RTCPeerConnection) {
+  if (!navigator.mediaDevices?.getUserMedia) {
+    logMessage('not support getUserMedia')
+    return
+  }
+
+  try {
+    const videoStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+    const videoA = document.querySelector('#videoA') as HTMLVideoElement;
+    videoA.srcObject = videoStream;
+    for (const track of videoStream.getTracks()) {
+      localConnection.addTrack(track, videoStream);
+    }
+  } catch(e) {
+    logMessage(e.message)
+  }
+
+  localConnection.ontrack = (event) => {
+    let remoteStream;
+    const videoB = document.querySelector('#videoB') as HTMLVideoElement;
+    if (!remoteStream) {
+      remoteStream = new MediaStream();
+      videoB.srcObject = remoteStream;
+    }
+    if (event.streams?.[0]) {
+      remoteStream.addTrack(event.track);
+    }
+  };
+}
+
+export async function startVideo(localConnection: RTCPeerConnection) {
+  if (!navigator.mediaDevices?.getUserMedia) {
+    logMessage('not support getUserMedia')
+    return
+  }
+}
+
+export async function shareScreen(localConnection: RTCPeerConnection) {
+  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;
+  }
+}
diff --git a/web-rtc/src/web-rtc.ts b/web-rtc/src/web-rtc.ts
index 2e446c9..675fbee 100644
--- a/web-rtc/src/web-rtc.ts
+++ b/web-rtc/src/web-rtc.ts
@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { getData, setData, onDataChange } from './firebase.ts';
 import VConsole from 'vconsole';
 import { logMessage } from './utils.ts';
+import { initMedia } from './meida.ts';
 
 const vConsole = new VConsole();
 
@@ -39,7 +40,9 @@ export async function startConnection() {
     }]
   });
 
-  localConnection.icegatheringstatechange = (e) => logMessage(`icegatheringstate: ${e.target.iceGatheringState}`)
+  localConnection.onicegatheringstatechange = (e) => logMessage(`icegatheringstate: ${e.target?.iceGatheringState}`)
+  
+  initMedia(localConnection)
 
   handleDataChannel()
 
@@ -241,48 +244,3 @@ function downloadFile(fileData: File, contentBuffer: ArrayBuffer[]) {
   // 释放 URL 对象
   URL.revokeObjectURL(url);
 }
-
-export async function startVideo() {
-  if (!navigator.mediaDevices?.getUserMedia) {
-    logMessage('not support getUserMedia')
-    return
-  }
-
-  try {
-    const videoStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
-    const videoA = document.querySelector('#videoA') as HTMLVideoElement;
-    videoA.srcObject = videoStream;
-    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;
-  }
-}