test: video

web-rtc/src/index.tsx

@@ -1,7 +1,7 @@
 import './index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { startConnection, sendFile } from './web-rtc.ts';
+import { startConnection, sendFile, startVideo } from './web-rtc.ts';
 
 // class View extends React.Component {
 //   render() {
@@ -16,11 +16,20 @@ import { startConnection, sendFile } from './web-rtc.ts';
 function Page () {
   return (
     <div>
-      <input type="file" id="fileInput" />
-      <button onClick={startConnection}>Start Connection</button>
-      <button onClick={sendFile}>Send File</button>
+      <div>
+        <div id="qrcode"></div>
+        <button onClick={startConnection}>Start Connection</button>
+      </div>
+      <div>
+        <input type="file" id="fileInput" />
+        <button onClick={sendFile}>Send File</button>
+      </div>
+      <div>
+        <video id='videoA' />
+        <video id='videoB' />
+        <button onClick={startVideo}>start video</button>
+      </div>
       <pre id="log"></pre>
-      <div id="qrcode"></div>
     </div>
   )
 }

web-rtc/src/web-rtc.ts

@@ -18,6 +18,7 @@ let sendChannel;
 let receiveChannel;
 let offer;
 let answer;
+let readSliceTimer;
 
 const urlParams = new URLSearchParams(location.search)
 const shareId = urlParams.get('shareId');
@@ -159,7 +160,7 @@ export function sendFile() {
         fileReader.readAsArrayBuffer(slice);
       } else {
         console.log('DataChannel buffer is full, waiting to send more data');
-        setTimeout(() => readSlice(), 0);
+        readSliceTimer = setTimeout(() => readSlice(), 0);
       }
     };
 
@@ -173,10 +174,14 @@ export function handleDataChannel() {
   sendChannel.onopen = () => {
     logMessage('Data channel is open')
   };
-  sendChannel.onclose = () => logMessage('Data channel is closed');
+  sendChannel.onclose = () => {
+    logMessage('Data channel is closed');
+    clearTimeout(readSliceTimer)
+  }
 
   sendChannel.onerror = (event) => {
     logMessage(`Data channel error: ${event.error.message}`)
+    clearTimeout(readSliceTimer)
   }
 
   // 处理接收端的数据通道
@@ -236,3 +241,22 @@ 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');
+    videoA.srcObject = videoStream;
+    localConnection.onaddStream = (event) => {
+      const videoB = document.querySelector('#videoB');
+      videoB.srcObject = event.stram;
+    }
+  } catch (error) {
+    logMessage(error.message)
+  }
+}