JsSIP调用session.answer后浏览器无法显示视频流问题排查

安全阿岳

2026-7-21

问题排查与修复方案

针对你遇到的JsSIP视频流无法播放问题，结合代码片段，以下是关键问题和修复建议：

1. 废弃API的使用问题

window.URL.createObjectURL()已被标准废弃，现代浏览器推荐直接使用srcObject属性绑定媒体流。旧方法可能引发兼容性问题，导致视频流无法正常加载。

2. 视频元素缺少必要属性

视频播放需依赖autoplay和playsinline（适配移动端）属性确保自动播放，否则即使流绑定正确，视频也可能处于暂停状态。需在HTML的<video>标签中添加这些属性：

<video id="remoteView" autoplay playsinline></video>
<video id="selfView" autoplay playsinline muted></video> <!-- 本地流建议静音避免回声 -->

3. Track事件处理逻辑优化

简化track事件绑定逻辑，确保流正确赋值并处理播放异常：

修改后的代码示例：

userAgent.on('newRTCSession', function(data) {
  console.log('### newRTCSession', data);
  session = data.session;

  // 统一处理track事件，区分本地/远程流
  session.on('track', function(e) {
    console.log('### session track', e);
    const stream = e.streams[0];
    if (!stream) return;

    if (data.originator === 'remote') {
      remoteView.srcObject = stream;
      // 显式调用play，兼容浏览器自动播放限制
      remoteView.play().catch(err => console.error('远程视频播放失败:', err));
    } else {
      selfView.srcObject = stream;
      selfView.play().catch(err => console.error('本地视频播放失败:', err));
    }
  });

  if (data.originator === 'remote') {
    showIncomingCall();
  }
});