实时数字人交互协议详解

// WebSocket 连接示例
const protocol = 'webrtc'; // 或 'rtmp'
const avatorId = 'your-avator-id';
const bizId = '0'; // 或 'asr'（humanctrl场景中启用asr）
const token = 'your-access-token';

const wsUrl = `wss://wsapi.nuwaai.com/websk/humanAgent/humanchat/${protocol}/${avatorId}/${bizId}?access_token=${token}`;
const ws = new WebSocket(wsUrl);

// 连接建立
ws.onopen = function() {
  console.log('WebSocket 连接已建立');
};

// 接收消息
ws.onmessage = function(event) {
  const message = JSON.parse(event.data);
  console.log('收到消息:', message);
  
  // 处理连接验证响应
  if (message.type === 'avator-connect') {
    if (message.code === 200) {
      console.log('连接验证成功，会话ID:', message.data.sessionid);
      console.log('提示问题:', message.data.question);
      // 连接验证成功后，可以进行下一步操作
    } else {
      console.error('连接验证失败:', message.msg);
    }
  }
};

// 连接关闭
ws.onclose = function() {
  console.log('WebSocket 连接已关闭');
};

// 连接错误
ws.onerror = function(error) {
  console.error('WebSocket 连接错误:', error);
};

// 发送 WebRTC 媒体协商请求
function sendPlayStream(ws, localSdp) {
  const playStreamMessage = {
    type: 'playStream',
    data: {
      sdp: localSdp
    }
  };
  
  ws.send(JSON.stringify(playStreamMessage));
  console.log('发送 playStream 请求:', playStreamMessage);
}

// 处理 WebRTC 协商回应
function handleAvatorPlay(message) {
  if (message.code === 200) {
    const remoteSdp = message.data.sdp;
    console.log('收到 avator-play 响应，远端 SDP:', remoteSdp);
    
    // 使用远端 SDP 建立 WebRTC 连接
    // 这里需要根据你的 WebRTC 实现进行处理
    // 例如：
    // pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: remoteSdp }));
  } else {
    console.error('媒体协商失败:', message.msg);
  }
}

// 示例：在 WebSocket 消息处理中添加
ws.onmessage = function(event) {
  const message = JSON.parse(event.data);
  console.log('收到消息:', message);
  
  if (message.type === 'avator-connect') {
    // 处理连接验证响应...
  } else if (message.type === 'avator-play') {
    // 处理媒体协商响应
    handleAvatorPlay(message);
  }
};

// 发送 RTMP 媒体协商请求
function sendPlayRtmp(ws, rtmpUrl) {
  const playRtmpMessage = {
    type: 'playRtmp',
    data: {
      url: rtmpUrl
    }
  };
  
  ws.send(JSON.stringify(playRtmpMessage));
  console.log('发送 playRtmp 请求:', playRtmpMessage);
}

// 处理 RTMP 协商回应
function handleAvatorPlayRtmp(message) {
  if (message.code === 200) {
    console.log('RTMP 媒体协商成功');
    
    // 开始通过 RTMP 协议接收音视频流
    // 这里需要根据你的 RTMP 播放器实现进行处理
    // 例如：使用 video.js 或其他播放器加载 RTMP 流
  } else {
    console.error('RTMP 媒体协商失败:', message.msg);
  }
}

// 示例：在 WebSocket 消息处理中添加
ws.onmessage = function(event) {
  const message = JSON.parse(event.data);
  console.log('收到消息:', message);
  
  if (message.type === 'avator-connect') {
    // 处理连接验证响应...
  } else if (message.type === 'avator-play') {
    // 处理媒体协商响应
    handleAvatorPlayRtmp(message);
  }
};

// 发送文本对话消息
function sendTextMessage(ws, text) {
  const textMessage = {
    type: 'agent',
    data: {
      content: text
    }
  };
  
  ws.send(JSON.stringify(textMessage));
  console.log('发送文本消息:', textMessage);
}

// 示例：发送文本消息
// sendTextMessage(ws, '你好，数字人！');

// 处理对话相关的响应
function handleChatMessages(message) {
  switch (message.type) {
    case 'chat_begin':
      console.log('对话开始');
      break;
    case 'chat':
      console.log('大模型回应:', message.data.content);
      break;
    case 'chat_end':
      console.log('对话结束');
      break;
    case 'avator-text':
      console.log('数字人回复:', message.data.text);
      break;
    case 'avator-playstop':
      console.log('数字人回复结束');
      break;
  }
}

// 示例：在 WebSocket 消息处理中添加
ws.onmessage = function(event) {
  const message = JSON.parse(event.data);
  console.log('收到消息:', message);
  
  if (message.type === 'avator-connect') {
    // 处理连接验证响应...
  } else if (message.type === 'avator-play') {
    // 处理媒体协商响应...
  } else if (['chat_begin', 'chat', 'chat_end', 'avator-text', 'avator-playstop'].includes(message.type)) {
    // 处理对话相关的响应
    handleChatMessages(message);
  }
};

// 发送数字人控制消息（仅在 humanctrl 连接中有效）
function sendAvatarControlMessage(ws, content) {
  const controlMessage = {
    type: 'avatar',
    data: {
      content: content
    }
  };
  
  ws.send(JSON.stringify(controlMessage));
  console.log('发送数字人控制消息:', controlMessage);
}

// 示例：发送数字人控制消息
// sendAvatarControlMessage(ws, '欢迎使用 Nuwa 数字人服务！');

// 处理数字人控制相关的响应
function handleAvatarControlResponse(message) {
  if (message.type === 'avator-ctrl') {
    console.log('数字人控制消息:', message.data);
  } else if (message.type === 'avator-playstop') {
    console.log('数字人回复结束');
  }
}

// 示例：在 WebSocket 消息处理中添加
ws.onmessage = function(event) {
  const message = JSON.parse(event.data);
  console.log('收到消息:', message);
  
  if (message.type === 'avator-connect') {
    // 处理连接验证响应...
  } else if (message.type === 'avator-ctrl' || message.type === 'avator-playstop') {
    // 处理数字人控制相关的响应
    handleAvatarControlResponse(message);
  }
};

// 发送数字人打断消息（仅在 humanctrl 连接中有效）
function sendInterruptChatMessage(ws) {
  const interrupt_chat_message = {
    type: 'interrupt_chat'
  };
  
  ws.send(JSON.stringify(interrupt_chat_message));
  console.log('发送数字人打断消息:', interrupt_chat_message);
}

// WebRTC 连接示例
let peerConnection = null;
let peerStream = null;

// 开始媒体协商
function startMediaNegotiation(socket, videoElementId) {
  // 创建 RTCPeerConnection
  peerConnection = new RTCPeerConnection(null);
  
  // 创建 MediaStream
  peerStream = new MediaStream();
  
  // 设置视频元素的源
  const video = document.getElementById(videoElementId);
  video.srcObject = peerStream;
  video.onplay = function() {
    video.muted = false;
  };
  
  // 处理音视频流
  peerConnection.ontrack = function(event) {
    console.log('收到视频流: ' + event.streams.length + ' 个流');
    peerStream.addTrack(event.track);
  };
  
  // 添加音频和视频接收器
  peerConnection.addTransceiver('audio', { direction: 'recvonly' });
  peerConnection.addTransceiver('video', { direction: 'recvonly' });
  
  // 创建并发送 SDP
  peerConnection.createOffer().then(offer => {
    return peerConnection.setLocalDescription(offer);
  }).then(() => {
    const message = {
      type: 'playStream',
      data: {
        sdp: peerConnection.localDescription.sdp
      }
    };
    socket.send(JSON.stringify(message));
    console.log('发送 WebRTC 协商请求');
  }).catch(error => {
    console.error('WebRTC 协商错误: ' + error);
  });
}

// 处理 SDP 应答
function handleSdpAnswer(sdp) {
  if (peerConnection) {
    const remoteDescription = new RTCSessionDescription({ type: 'answer', sdp: sdp });
    peerConnection.setRemoteDescription(remoteDescription).then(() => {
      console.log('WebRTC 协商成功');
    }).catch(error => {
      console.error('WebRTC 协商应答错误: ' + error);
    });
  }
}

// 断开 WebRTC 连接
function disconnectWebRTC() {
  if (peerConnection) {
    peerConnection.close();
    peerConnection = null;
  }
  if (peerStream) {
    peerStream.getTracks().forEach(track => track.stop());
    peerStream = null;
  }
  console.log('WebRTC 连接已断开');
}

// 示例：在 WebSocket 消息处理中添加
function handleWebSocketMessage(message, socket) {
  switch (message.type) {
    case 'avator-connect':
      if (message.code === 200) {
        console.log('鉴权成功，会话 ID: ' + message.data.sessionid);
        // 开始媒体协商
        startMediaNegotiation(socket, 'remote-video');
      } else {
        console.log('鉴权失败: ' + message.msg);
      }
      break;
    case 'avator-play':
      if (message.code === 200 && message.data && message.data.sdp) {
        // 处理 SDP 应答
        handleSdpAnswer(message.data.sdp);
      }
      break;
    // 其他消息处理...
  }
}

// RTMP 播放器示例（使用 video.js）
// 首先引入 video.js 和 videojs-flash 插件
// <script src="https://cdn.jsdelivr.net/npm/video.js@7.15.4/dist/video.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2.2.1/dist/videojs-flash.min.js"></script>

// 初始化播放器
const player = videojs('remote-video', {
  techOrder: ['html5', 'flash'],
  autoplay: true,
  controls: true,
  sources: [
    {
      src: 'rtmp://your-rtmp-server/live/stream',
      type: 'rtmp/flv'
    }
  ]
});

// 播放器事件监听
player.on('play', function() {
  console.log('播放器开始播放');
});

player.on('error', function() {
  console.error('播放器错误:', player.error());
});

player.on('ended', function() {
  console.log('播放结束');
});

// 发送 playRtmp 请求
function sendPlayRtmp(ws, rtmpUrl) {
  const playRtmpMessage = {
    type: 'playRtmp',
    data: {
      url: rtmpUrl
    }
  };
  
  ws.send(JSON.stringify(playRtmpMessage));
  console.log('发送 playRtmp 请求:', playRtmpMessage);
}

// 处理 avator-play 响应
function handleAvatorPlay(message) {
  if (message.code === 200) {
    console.log('RTMP 媒体协商成功，开始播放');
    // 播放器已经配置好，会自动开始播放
  } else {
    console.error('RTMP 媒体协商失败:', message.msg);
  }
}