通过WebRTC使用多模态交互套件实现实时通话

创建 RTCPeerConnection

调用浏览器原生 RTCPeerConnection 构造函数创建连接实例。服务端采用 ICE-lite 模式直连，无需配置 ICE 服务器。

pc = new RTCPeerConnection();

同时注册关键回调：

pc.onconnectionstatechange = () => {
  if (pc.connectionState === 'connected') {
    // 连接成功
  } else if (['failed', 'closed', 'disconnected'].includes(pc.connectionState)) {
    // 连接断开，清理资源
    endSession();
  }
};

pc.ontrack = (e) => {
  // 将远端音频流绑定到 audio 元素播放
  const remoteAudio = document.createElement('audio');
  remoteAudio.autoplay = true;
  remoteAudio.srcObject = e.streams[0];
  document.body.appendChild(remoteAudio);
};

获取本地媒体流

通过 navigator.mediaDevices.getUserMedia 获取麦克风权限（必须），以及摄像头权限（可选）。

纯音频模式：

const localStream = await navigator.mediaDevices.getUserMedia({ audio: true });

音视频模式（需要 AI 视觉理解时）：

const localStream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    facingMode: { ideal: 'environment' },  // 后置摄像头
    frameRate: { ideal: 30, max: 30 },
    width: { ideal: 640 },
    height: { ideal: 480 }
  }
});

添加媒体轨道到 PeerConnection

将本地音频轨道添加到 PeerConnection。如果开启了视频，视频轨道一并添加。

localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

维持视频发送质量（可选）：

在弱网环境下，浏览器可能自动降低视频分辨率。可通过设置 sender 参数尽量维持：

const sender = pc.getSenders().find(s => s.track && s.track.kind === 'video');
if (sender) {
  const params = sender.getParameters();
  if (!params.encodings || params.encodings.length === 0) params.encodings = [{}];
  params.encodings[0].scaleResolutionDownBy = 1.0;
  params.encodings[0].maxBitrate = 2500000;  // 2.5 Mbps
  params.encodings[0].maxFramerate = 30;
  params.degradationPreference = 'maintain-resolution';
  await sender.setParameters(params);
}

创建 DataChannel

创建名为 oai-events 的 DataChannel，用于与服务端交换控制消息（run-task、事件通知等）。

const dc = pc.createDataChannel('oai-events');

dc.onopen = () => {
  console.log('DataChannel open');
  // DataChannel 就绪后发送 run-task
  sendStartMessage(dc);
};

dc.onmessage = (e) => {
  const evt = JSON.parse(e.data);
  handleServerEvent(evt, dc);
};

同时监听 pc.ondatachannel 以处理服务端主动创建的 DataChannel：

pc.ondatachannel = (event) => {
  const ch = event.channel;
  if (ch.label === 'txt' || ch.label === 'oai-events') {
    ch.onopen = () => sendStartMessage(ch);
    ch.onmessage = (e) => handleServerEvent(JSON.parse(e.data), ch);
  }
};

生成 Offer SDP

调用 createOffer 并 setLocalDescription，浏览器生成包含本地媒体能力描述的 Offer SDP。服务端采用 ICE-lite 模式，客户端无需等待 ICE candidates 收集完成，setLocalDescription 后即可发送。

const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

// offer.sdp 即为待发送的 Offer SDP 字符串

交换 SDP（HTTP POST）

将 Offer SDP 通过 HTTP POST 发送到服务端 WebRTC 端点，服务端返回 Answer SDP。

Endpoint 格式：{workspace_id}.{region}.maas.aliyuncs.com，其中 workspace_id 为百炼工作空间 ID（如 llm-xxxxxxxxxx），region 为部署区域（如 cn-beijing）。创建工作空间后即可在百炼控制台获取。

请求配置：

const API_KEY = 'your-api-key';       // 百炼控制台获取
const WORKSPACE_ID = '{workspace-id}';  // 百炼控制台获取
const REGION = 'cn-beijing';
const SIGNALING_URL = `https://${WORKSPACE_ID}.${REGION}.maas.aliyuncs.com/api/v1/webrtc/inference?model=multimodal-dialog`;

const resp = await fetch(SIGNALING_URL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/sdp',
    'Authorization': `Bearer ${API_KEY}`,
  },
  body: offer.sdp,
});

if (!resp.ok) throw new Error('SDP 交换失败: ' + resp.status);
const answerSdp = await resp.text();

curl 命令格式：

curl -X POST 'https://{workspace_id}.{region}.maas.aliyuncs.com/api/v1/webrtc/inference?model=multimodal-dialog' \
  -H 'Content-Type: application/sdp' \
  -H 'Authorization: Bearer $DASHSCOPE_API_KEY' \
  --data-binary '<Offer SDP 内容>'

设置 Answer SDP 建立连接

将从服务端获取的 Answer SDP 设置为远端描述，WebRTC 连接随即建立。

await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
// 连接建立完成，pc.connectionState 将变为 'connected'

发送 run-task 启动会话

WebRTC 连接建立、DataChannel 就绪后，客户端发送 run-task 消息启动多模态会话。

let currentTaskId = null;

function sendStartMessage(channel) {
  currentTaskId = generateTaskId();
  const msg = {
    payload: {
      input: {
        workspace_id: '{workspace-id}',
        app_id: '{app-id}',
        directive: 'Start'
      },
      task_group: 'aigc',
      task: 'multimodal-generation',
      function: 'generation',
      model: 'multimodal-dialog',
      parameters: {
        client_info: {
          user_id: '{user-id}',
          device: { uuid: '{device-uuid}' },
          network: { ip: '{client-ip}' }
        },
        upstream: {
          mode: 'duplex',
          sample_rate: '16000',
          type: 'AudioAndVideo'   // 'Audio' 或 'AudioAndVideo'
        },
        dialog_attributes: {
          vocabulary_id: '{vocabulary-id}'  // 可选
        },
        downstream: {
          voice: 'longanhuan',
          sample_rate: 24000,
          audio_format: 'pcm'
        }
      }
    },
    header: {
      streaming: 'duplex',
      action: 'run-task',
      task_id: currentTaskId
    }
  };
  channel.send(JSON.stringify(msg));
}

function generateTaskId() {
  if (window.crypto && typeof window.crypto.randomUUID === 'function') {
    return window.crypto.randomUUID().replace(/-/g, '');
  }
  const r = () => Math.random().toString(16).slice(2);
  return (Date.now().toString(16) + r() + r()).slice(0, 32);
}

参数说明：

实时对话

run-task 发送成功后，进入实时对话状态：

• 上行：浏览器采集的音频/视频通过 RTP 协议自动发送到服务端

• 下行音频：AI 语音回复通过 ontrack 回调接收并播放

• 下行事件：通过 DataChannel 接收业务事件

function handleServerEvent(evt, channel) {
  const type = evt.type || evt.header?.action;

  switch (type) {
    case 'open_videochat':
      // 服务端请求开启视频通道
      // 延迟数秒响应，确保视频处理通道就绪
      setTimeout(() => {
        channel.send(JSON.stringify({
          payload: {
            input: { text: '', type: 'prompt', directive: 'RequestToRespond' },
            parameters: {
              biz_params: {
                videos: [{ action: 'connect', type: 'voicechat_video_channel' }]
              }
            }
          },
          header: {
            streaming: 'duplex',
            action: 'continue-task',
            task_id: currentTaskId
          }
        }));
      }, 3000);
      break;

    default:
      console.log('[服务端事件]', type, evt);
      break;
  }
}

静音 / 取消静音：

// 静音
localStream.getAudioTracks().forEach(t => { t.enabled = false; });
// 取消静音
localStream.getAudioTracks().forEach(t => { t.enabled = true; });

开启/关闭视频：

// 关闭视频
localStream.getVideoTracks().forEach(t => { t.enabled = false; });
// 开启视频
localStream.getVideoTracks().forEach(t => { t.enabled = true; });

结束会话与资源清理

通话结束后需要正确释放所有资源，避免内存泄漏和设备占用。

function endSession() {
  // 1. 关闭 DataChannel
  if (dataChannel) {
    dataChannel.close();
    dataChannel = null;
  }

  // 2. 停止本地媒体流（释放麦克风/摄像头）
  if (localStream) {
    localStream.getTracks().forEach(t => t.stop());
    localStream = null;
  }

  // 3. 关闭 PeerConnection
  if (pc) {
    pc.close();
    pc = null;
  }

  // 4. 重置状态
  currentTaskId = null;
}