• Skip to Search
  • Skip to Content
  • Skip to Side Navigation
Getting StartedSDK ReferenceGlossary
  • Home
  • Getting Started
  • SDK Reference
  • Portal
  • How-To
  • Troubleshooting
  • FAQs
  • Reference
  • Glossary
How-To Guides
  • API Usage
  • Artificially lower bandwidth or bitrate
  • Set up publishing or subscribing for only audio or only video
  • Set up High Availability
  • Optimal RTMP encoder settings
  • How do I find my stream key?
  • Preventing stream sharing
  • Debug tokens in the Portal
  • Display multiple copies of the same stream
  • Find the video dimension of the stream
  • Measure timing
  • Create test input
  • Verify encoder ability to contribute via UDP
  • Manage issues with installing Phenix SDKs
  • RTSP ingest from IP cameras
  • Work with timestamps in reports
  • How do I deal with corporate firewalls?
  • How do I record streams for VOD playback?
  • How do I set up ad insertion?
  • How do closed captions work in the Phenix system?
  • How do I set up and use SRT Ingest?
  • How do I set up and use RTMP Ingest?
  • How do I set up and use replay?

Display multiple copies of the same stream

Sometimes, you may wish to show multiple copies of the same stream in your UI. For example, when multiple views of an event are available, your UI may show all available views as small tiles, and the selected view as a large tile.

Instead of joining the same channel twice, access the mediaStream and attach it to more than one video.

response.mediaStream.getStream()

returns a WebRTC stream that can be attached to another video. This saves the bandwidth and decoding for a second stream.

Please refer to the WebSDK documentation for viewing a channel.

Instructions

  1. Create multiple video UI elements, for example, videoElement1 and videoElement2.

  2. Join a channel for videoElement1.

  3. Populate videoElement2, for example:

JavaScript
1{.syntaxhighlighter-pre syntaxhighlighter-params="brush: java; gutter: false; theme: Confluence" theme="Confluence"}
2 if (response.mediaStream) {
3 setUserMessage('joinChannel()::subscriberCallback(error, response) returned response.mediaStream.getStreamId()=' + response.mediaStream.getStreamId());
4 videoElement2.srcObject = response.mediaStream.getStream();
5 videoElement2.onloadedmetadata = function(e) {
6 console.log("metadataloaded");
7 videoElement2.play();
8 };
9 }

Example

See an example of this in JSFiddle.

Page Content
    Copyright 2023 © Phenix RTS
    Privacy Policy | Terms of Service
    v2023-01-31T21:25:10