WebRTC 实时视频流

上位机 (Electron / Web)            网关服务 (:58166)            AI 手机
      │                                    │                                    │
      ├─ 1. POST /sessions (创建会话) ────►│── 启动屏幕推流引擎 ────────────────►│
      │◄─ 返回 session_id + ice_servers ───┤                                    │
      │                                    │                                    │
      ├─ 2. 本地创建 RTCPeerConnection     │                                    │
      ├─ 3. POST /sessions/{id}/signal ───►│── 转发 SDP / ICE 信令 ────────────►│
      │◄─ 接收远端 Answer 信令 ────────────┤                                    │
      │                                    │                                    │
      │================ 4. DTLS-SRTP P2P / TURN 媒体流直接直连 (100ms) ========│

curl -X POST "http://localhost:58166/robot/screen-stream/sessions" \
  -H "Content-Type: application/json" \
  -H "X-AppKey: <your-key>" \
  -d '{
    "deviceId": "848bd13e2f9",
    "clientInstanceId": "client-uuid-001",
    "scale": 0.5,
    "fps": 20
  }'

{
  "code": 200,
  "data": {
    "session_id": "ses-screen-8f7a1b2c",
    "expires_at": 1717172017000,
    "ice_servers": [{ "urls": ["stun:turn.langhua.ai:3478"] }]
  }
}

curl -X POST "http://localhost:58166/robot/screen-stream/sessions/ses-screen-8f7a1b2c/signal" \
  -H "Content-Type: application/json" \
  -H "X-AppKey: <your-key>" \
  -d '{
    "type": "offer",
    "payload": "{\"type\":\"offer\",\"sdp\":\"...\"}"
  }'

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AI 手机实时推流测试</title>
</head>
<body style="background:#111; color:#eee; font-family:sans-serif; text-align:center; padding:20px;">
  <h2>AI 手机实时屏幕 (60 FPS)</h2>
  <video id="phoneVideo" autoplay playsinline muted style="width:360px; height:800px; background:#000; border-radius:12px; border:2px solid #333;"></video>
  <br/><br/>
  <button id="startBtn" onclick="startStream()" style="padding:10px 24px; font-size:16px; cursor:pointer;">启动推流</button>

  <script>
    const GATEWAY = "http://localhost:58166";
    const APP_KEY = "sk-lh-xxxxxx";        // 替换为你的 AppKey
    const DEVICE_ID = "848bd13e2f9";       // 替换为你的 DeviceId

    async function startStream() {
      document.getElementById("startBtn").disabled = true;

      // 1. 创建会话
      const sessRes = await fetch(`${GATEWAY}/robot/screen-stream/sessions`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-AppKey": APP_KEY },
        body: JSON.stringify({ deviceId: DEVICE_ID, clientInstanceId: "test-client", scale: 0.5, fps: 20 })
      });
      const { session_id, ice_servers } = (await sessRes.json()).data;

      // 2. 初始化 PeerConnection
      const pc = new RTCPeerConnection({ iceServers: ice_servers });
      pc.ontrack = (e) => {
        document.getElementById("phoneVideo").srcObject = e.streams[0];
      };

      // 3. 生成并发送 Offer
      const offer = await pc.createOffer({ offerToReceiveVideo: true });
      await pc.setLocalDescription(offer);

      await fetch(`${GATEWAY}/robot/screen-stream/sessions/${session_id}/signal`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-AppKey": APP_KEY },
        body: JSON.stringify({ type: "offer", payload: JSON.stringify(offer) })
      });
      console.log("WebRTC 握手完成，画面渲染中...");
    }
  </script>
</body>
</html>