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

user_8643964 0
Viewed 383

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

agora.io webrtc progressive-web-apps ionic-framework
2 Answers

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
});
user_69318620 
localStream.init(()=>{
    // Play the local stream
    localStream.setVideoProfile('720p_5');
    const playerContainer = document.createElement("div");
    playerContainer.id = uid;
    playerContainer.style.width = "40%";
    playerContainer.style.height = "40%";
    playerContainer.style.backgroundColor = "red";
    playerContainer.style.position = "fixed";
    document.body.append(playerContainer);
    // let c =  document.body.append(playerContainer)
    localStream.play(`${playerContainer.id}`, { fit: "contain", muted: false }, function (errState) {

    });
    // Publish the local stream
    this.client.publish(localStream);
});
user_90447160
Related