Play Stream: React Native SDK – Video API

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. Different type of configuration. At this moment, it supports only overlay object.
    • overlay: JSON Object.
      • enable: Boolean. Set it to true to enable.
      • properties: JSON Object. All properties of the Over Contents are defined here.
        • textColor: String. Hexa Color Code forText. e.g. #FFFFFF
        • textSize: Number. Text Size. Range 5-36.
        • textStyle: String. Font Family name. e.g. Arial
        • text_background: String. Hexa Color Code for Text Background.
  • streamId = The Stream ID that you want to configure

var propertyDict = {
	textColor: "#000000", 
	textSize: 12, 
	textStyle: "Arial", 
	text_background: "#FFFFFF"
};

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

var configObject = { overlay: dict };

Enx.setConfigureOption(configObject, 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}> 

---