test: video

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() {

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;
+  }
+}

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;
-  }
-}