Local Stream

A local stream is the stream that the current user of Video Service published themselves. When listening for onPublishedStreamChange events you can identify local stream events by the isLocal property being set to true.

Rendering

Within the onPublishedStreamChange event is a participant object. This object contains the MediaStream that is being published. You can add participant.mediaStream to a video element in your html.

function handlePublishedStreamChange(eventDetail) {
    if (eventDetail.isLocal) {
      if (eventDetail.isPublished) {        
        document.getElementById('local-video').srcObject = eventDetail.participant.mediaStream;
        document.getElementById('local-username').innerHTML = eventDetail.participant.name;
        document.getElementById('publish-button').innerText = "Unpublish Stream";        
      } else {
        document.getElementById('local-video').src = null;
        document.getElementById('local-username').innerHTML = null;
        document.getElementById('publish-button').innerText = "Publish Stream";        
      }
    } else {
      ...
    }
}

<html>
  <div>
    <button id="video-button"
            onclick="togglePublishVideo();"
            disabled
    >
      Publish Video
    </button>
  </div>
  
  <div>
    <video
        id="local-video"
        className="video-feeds"        
        playsInline="true"
        autoPlay="true"
        width="100px"
    ></video>
    <div id="local-username"></div>
  </div>

</html>

PreviousRendering Streams NextRemote Streams

Last updated 3 years ago

Local Stream

Rendering

function handlePublishedStreamChange(eventDetail) {
    if (eventDetail.isLocal) {
      if (eventDetail.isPublished) {        
        document.getElementById('local-video').srcObject = eventDetail.participant.mediaStream;
        document.getElementById('local-username').innerHTML = eventDetail.participant.name;
        document.getElementById('publish-button').innerText = "Unpublish Stream";        
      } else {
        document.getElementById('local-video').src = null;
        document.getElementById('local-username').innerHTML = null;
        document.getElementById('publish-button').innerText = "Publish Stream";        
      }
    } else {
      ...
    }
}

<html>
  <div>
    <button id="video-button"
            onclick="togglePublishVideo();"
            disabled
    >
      Publish Video
    </button>
  </div>
  
  <div>
    <video
        id="local-video"
        className="video-feeds"        
        playsInline="true"
        autoPlay="true"
        width="100px"
    ></video>
    <div id="local-username"></div>
  </div>

</html>

PreviousRendering Streams NextRemote Streams

Last updated 3 years ago