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

JavaScript

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

Looking at the onPublishedStreamChange Event Payload

Example Payload for Remote Stream

JavaScript

{
  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

JavaScript

{
  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

Property	Type	Description
channel	VideoChannel	The channel the stream is published in
inputDeviceIds	Hash	For remote streams this will be null. For local streams this will a hash showing the ids of the audio and video devices that were selected when the stream was published. This is helpful in determining which devices are in use if you did not specify input devices before publishing.
isLocal	Boolean	This will be true if the event is for a local stream
isPublished	Boolean	This will be true if the event represents a stream that is published. When a stream is unpublished you will receive and event with this value set to false
participant	Participant	The participant who is publishing the stream. From this object you can get the MediaStream that is being published.