Rendering Streams

Published Stream Events

One of the events you should add a listener for, after you Instantiating Video Service, is onPublishedStreamChange. This event will be fired for a variety of reasons related to a published stream:

  • You just joined a channel

    • You will receive an event for each participant that is currently publishing a stream.

  • A new stream is published in a channel

  • A stream has been unpublished

  • A stream has been modified

    • Audio track added/removed

    • Video track added/removed

Adding the Event Listener

aloVideo.events.addEventListener('onPublishedStreamChange', e => {    
    handlePublishedVideoChange(e.detail);
});

Looking at the onPublishedStreamChange Event Payload

Example Payload for Remote Stream

{
  detail: {
    channel: VideoChannel {...}
    inputDeviceIds: null
    isLocal: false
    isPublished: true
    participant: Participant
      connectionId: "5370_ON_d3b077a0-272d-4ee1-b43b-2951d6c2782b_*_*_1617366678452"
      id: "5370_ON_d3b077a0-272d-4ee1-b43b-2951d6c2782b"
      isCurrentUser: false
      isMutedLocally: false
      isPublishingAudio: true
      isPublishingStream: true
      isPublishingVideo: false
      mediaStream: MediaStream {id: "janus", active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}
      ...
  }
}

Example Payload for Local Stream

{
  detail: {
    channel: VideoChannel {...}
    inputDeviceIds: {
      audioInputDeviceId: "default"
      videoInputDeviceId: "c72ee2c098ce749a5245ebbfd0560349c48929b42f89f7a3a3969ba1b5087517"
    }
    isLocal: true
    isPublished: true
    participant: Participant
      connectionId: "8921_ON_sb4556-1722-4dda-x43s-2145ds6c2782s_*_*_1617366678452"
      id: "8921_ON_sb4556-1722-4dda-x43s-2145ds6c2782s"
      isCurrentUser: true
      isPublishingAudio: true
      isPublishingStream: true
      isPublishingVideo: true
      mediaStream: MediaStream {...}
      ...
  }
}

Event Properties

Last updated