You can play a local stream as well as remote streams including screen-share, canvas streams using EnxStream and EnxPlayerView Tags.

Tags:

  • <EnxStream streamId=StreamID eventHandlers=ListenerEvents> – To create stream
  • <EnxPlayerView streamId=StreamID isLocal="remote" eventHandlers=ListenerEvents> – To play remote stream
  • <EnxPlayerView streamId=StreamID isLocal="local" eventHandlers=ListenerEvents> – To play local stream

Props:

  • streamId – Stream ID of the Stream to be played
  • isLocal – Enum: local, remote
  • eventHandlers – To add all event listeners to handle with the Stream

Helper Methods:

  • changePlayerScaleType(scalingMode, streamId) – Parameters explained below:
    • scalingMode – Enumerated Values: SCALE_ASPECT_BALANCED,  SCALE_ASPECT_FIT,  SCALE_ASPECT_FILL
    • streamId – String. The Stream ID that needs to be scaled in Player
  • setZOrderMediaOverlay(isOverlay, streamId) – Parameters explained below:
    • isOverlay – Boolean. Use true to overlay
    • streamId – The Stream ID that you want to play as overlay
  • setConfigureOption(configObject, streamId) – Parameters explained below:
    • configObject – JSON Object
    • streamId = The Stream ID that you want to configure
var propertyDict = {
	textColor: -10053376, 
	textSize: 12, 
	textStyle: 1, 
	text_background: 0
	}

var dict = {
	enable: true, 
	properties:propertyDict
	}

var overlayDict = { overlay: dict }

Enx.setConfigureOption(overlayDict, this.state.localStreamId); 
Enx.changePlayerScaleType(SCALE_ASPECT_FIT, this.state.localStreamId); 

<EnxStream 
	streamId={String(element.streamId)} 
	eventHandlers={this.streamEventHandlers}>

<EnxPlayerView 
	streamId={String(element.streamId)} 
	isLocal="local"
	eventHandlers={this.streamEventHandlers}>