[feat] support libdatachannel trickle ICE

index.html

@@ -12,13 +12,9 @@
 
       <div class="card">
         <h2>连接设置</h2>
-        <div class="option">
-          <input id="use-stun" type="checkbox" />
-          <label for="use-stun">使用STUN服务器</label>
-        </div>
         <div class="option">
           <label for="transmission-id">传输ID：</label>
-          <input id="transmission-id" type="text" value="931631602" />
+          <input id="transmission-id" type="text" value="475319798" />
         </div>
         <div class="option">
           <label for="transmission-pwd">密码：</label>
@@ -46,7 +42,14 @@
 
       <div id="media" style="display: none">
         <h2>远程画面</h2>
-        <video id="video" autoplay playsinline></video>
+        <video
+          id="video"
+          playsinline
+          webkit-playsinline
+          x5-video-player-type="h5"
+          x5-video-player-fullscreen="true"
+          muted
+        ></video>
       </div>
 
       <div class="card">

web_client.js

@@ -6,6 +6,57 @@ const iceConnectionLog = document.getElementById('ice-connection-state'),
 clientId = "000000";
 const websocket = new WebSocket('wss://api.crossdesk.cn:9090');
 
+// ===== WebSocket 心跳机制 =====
+let heartbeatInterval = null;
+let lastPongTime = Date.now();
+
+function startHeartbeat() {
+  stopHeartbeat(); // 避免重复定时
+  lastPongTime = Date.now();
+
+  // 每30秒发一次心跳
+  heartbeatInterval = setInterval(() => {
+    if (websocket.readyState === WebSocket.OPEN) {
+      websocket.send(JSON.stringify({ type: "ping", ts: Date.now() }));
+      console.log("sent ping");
+    }
+
+    // 如果90秒内没收到任何消息，认为连接断开
+    if (Date.now() - lastPongTime > 10000) {
+      console.warn("WebSocket heartbeat timeout, reconnecting...");
+      stopHeartbeat();
+      reconnectWebSocket();
+    }
+  }, 5000);
+}
+
+function stopHeartbeat() {
+  if (heartbeatInterval) {
+    clearInterval(heartbeatInterval);
+    heartbeatInterval = null;
+  }
+}
+
+// 监听服务器返回消息时更新时间
+websocket.addEventListener("message", (evt) => {
+  lastPongTime = Date.now(); // 收到任何消息都视为活跃
+});
+
+// 自动重连逻辑
+function reconnectWebSocket() {
+  try {
+    websocket.close();
+  } catch (e) {
+    console.error("Error closing websocket:", e);
+  }
+
+  console.log("Reconnecting WebSocket...");
+  setTimeout(() => {
+    window.location.reload(); // 简单策略：刷新页面重连
+    // 或者重新 new WebSocket('wss://api.crossdesk.cn:9090')，并重新注册事件
+  }, 2000);
+}
+
 websocket.onopen = () => {
   document.getElementById('connect').disabled = false;
   sendLogin();
@@ -22,6 +73,16 @@ websocket.onmessage = async (evt) => {
 
   } else if (message.type == "offer") {
     await handleOffer(message)
+  } else if (message.type == "new_candidate") {
+    if (pc) {
+      const candidate = new RTCIceCandidate({
+        sdpMid: message.mid,
+        candidate: message.candidate
+      });
+      pc.addIceCandidate(candidate).catch(e => {
+        console.error("Error adding received ice candidate", e);
+      });
+    }
   }
 }
 
@@ -30,14 +91,21 @@ let dc = null;
 
 function createPeerConnection() {
   const config = {
-    bundlePolicy: "max-bundle",
   };
 
-  if (document.getElementById('use-stun').checked) {
+  config.iceServers = [
-    config.iceServers = [{ urls: ['stun:api.crossdesk.cn:3478'] }];
+    { urls: ['stun:api.crossdesk.cn:3478'] },
-  }
+    {
+      urls: ['turn:api.crossdesk.cn:3478'],
+      username: 'crossdesk',
+      credential: 'crossdeskpw'
+    }
+  ];
 
-  let pc = new RTCPeerConnection(config);
+  config.iceTransportPolicy = "all";
+
+  pc = new RTCPeerConnection(config);
+  console.log("Created RTCPeerConnection");
 
   // Register some listeners to help debugging
   pc.addEventListener('iceconnectionstatechange', () =>
@@ -52,6 +120,22 @@ function createPeerConnection() {
     signalingLog.textContent += ' -> ' + pc.signalingState);
   signalingLog.textContent = pc.signalingState;
 
+  // onicecandidate
+  pc.onicecandidate = function (event) {
+    var ice_candidate = event.candidate;
+    if(ice_candidate) {
+    	websocket.send(JSON.stringify({
+    		type: "new_candidate_mid",
+        transmission_id: getTransmissionId(),
+        user_id: clientId,
+        remote_user_id: getTransmissionId(),
+    		candidate: ice_candidate.candidate,
+    		mid: ice_candidate.sdpMid
+    	}));
+      console.log("sent new candidate: " + ice_candidate.candidate);
+    }
+  };
+
   // Receive audio/video track
   // More robust handling of audio/video track
   pc.ontrack = (evt) => {
@@ -61,21 +145,33 @@ function createPeerConnection() {
     // Only handle video track
     if (evt.track.kind !== 'video') return;
 
-    // Don't reset srcObject if stream already exists
     if (!video.srcObject) {
       const stream = evt.streams && evt.streams[0] ? evt.streams[0] : new MediaStream([evt.track]);
-      video.srcObject = stream;
+
+      // 设置视频属性
+      video.setAttribute('playsinline', true);  // iOS 内联播放
+      video.setAttribute('webkit-playsinline', true);  // 旧版 iOS webkit 内核
+      video.setAttribute('x5-video-player-type', 'h5');  // 微信浏览器
+      video.setAttribute('x5-video-player-fullscreen', 'true');
+      video.setAttribute('autoplay', true);
       video.muted = true;
-      video.playsInline = true;
+
-      // Set delayed playback
+      video.srcObject = stream;
-      setTimeout(() => {
+
+      // 确保在用户交互后播放
+      const playVideo = () => {
         video.play().catch(err => {
           console.warn('video.play() failed:', err);
+          // 重试播放
+          setTimeout(playVideo, 1000);
         });
-      }, 500);
+      };
+
+      // 延迟执行播放
+      setTimeout(playVideo, 100);
+
       console.log('attached new video stream:', stream.id);
     } else {
-      // Add track directly to existing stream
       video.srcObject.addTrack(evt.track);
       console.log('added track to existing stream:', evt.track.id);
     }
@@ -149,7 +245,7 @@ async function sendAnswer(pc) {
     remote_user_id: getTransmissionId(),
     sdp: answer.sdp,
   });
-  console.log("send answer: " + msg);
+  // console.log("send answer: " + msg);
 
   websocket.send(msg);
 }
@@ -192,6 +288,7 @@ function sendRequest() {
     user_id: clientId,
     transmission_id: getTransmissionId() + '@' + getTransmissionPwd(),
   }));
+  console.log("sent join_transmission");
 }
 
 function connect() {
@@ -234,6 +331,19 @@ function disconnect() {
   // close peer connection
   pc.close();
   pc = null;
+
+  // 清空 video
+  const video = document.getElementById('video');
+  if (video.srcObject) {
+    video.srcObject.getTracks().forEach(track => track.stop());
+    video.srcObject = null;
+  }
+
+  // 清空日志
+  iceConnectionLog.textContent = '';
+  iceGatheringLog.textContent = '';
+  signalingLog.textContent = '';
+  dataChannelLog.textContent += '- disconnected\n';
 }
 
 
@@ -248,3 +358,4 @@ function currentTimestamp() {
   }
 }
 
+