Ionic app with Agora-Rtc-SDK - stream play issue

Question

i'm trying a little esperiment using agora-rtc-sdk inside a ionic app PWA. Actually i'm using ver 3.5.2 sdk (ver 4 is not available over npm).

All seems ok (streams starts, join etc) bunt i'm having problems with play() function. Play function take a DOM id to build a local player to show a stream, but using inside angular it does not work. Is there another way to take the stream an append it to video element?

Thanks Flavio

Answer 1

Using the Agora Web 3.x SDK, it's very much possible to take the stream and manually create the video element yourself.

Use the stream-subscribed callback to create a new <video/> object and connect the stream as the source. You'll have to add an event listener for onloadmetadata before you can call 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
});