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

Property

Type

Description

channel

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

The participant who is publishing the stream. From this object you can get the MediaStream that is being published.

Last updated

Logo

© Copyright 2024 ALO.ai, Inc. • All Rights Reserved