ionic-framework - 带有 Agora-Rtc-SDK 的 Ionic 应用程序 - 流播放问题

Question

我正在尝试在离子应用 PWA 中使用 agora-rtc-sdk 进行一些实验。实际上我使用的是 3.5.2 版 sdk（4 版在 npm 上不可用）。

一切似乎都很好（流开始，加入等）我遇到了 play() 函数的问题。Play 函数采用 DOM id 来构建本地播放器以显示流，但使用内部角度它不起作用。还有另一种方法可以将流附加到视频元素吗？

谢谢弗拉维奥

标签： ionic-frameworkwebrtcprogressive-web-appsagora.io

Answer 1

使用 Agora Web 3.x SDK，您可以自己获取流并手动创建视频元素。

使用stream-subscribed回调创建一个新<video/>对象并将流连接为源。您必须先添加一个事件侦听器，onloadmetadata然后才能调用play().

// connect remote streams
client.on('stream-subscribed', (evt) => {
  const remoteStream = evt.stream;
  const remoteId = remoteStream.getId();
  console.log('Successfully subscribed to remote stream: ' + remoteId);
  
  // create video element
  var video = document.createElement('video');
  video.id = 'agoraVideo-' + remoteId;
  video.setAttribute('webkit-playsinline', 'webkit-playsinline');
  video.setAttribute('playsinline', 'playsinline');
  console.log(video);

  video.srcObject = remoteStream.stream;// add video stream to video element as source
  video.onloadedmetadata = () => {
    // ready to play video
    video.play();
  }
  // Add video element to the DOM
});