Player

This topic describes the properties and example of the IP camera (IPC) player component TYIpcPlayer.

Example

For more information, see GitHub Template.

Note: This template is developed based on React Hooks. The app version 3.22 and later are supported for debugging and previewing. For example, the Tuya Smart app or the app developed with the v3.22 App SDK are recommended.

import { TYIpcPlayer } from '@tuya/tuya-panel-ipc-sdk';

// In most cases, the size of the player container is 16:9 and must be rounded. You can also customize the size and apply the adaptive size setting of `flex: 1`.
const realWidth = Math.round(winWidth);
const realHeight = Math.round((winWidth * 9) / 16));

const onChangeStreamStatus = (status: number) => {
    console.log(status);
};

return (
  <View style={{width: realWidth, height: realHeight }}>
       <TYIpcPlayer 
    	 deviceOnline={props.deviceOnline}
    	 onChangeStreamStatus={onChangeStreamStatus}
  	/>
   </View>
)

List of properties

Field	Description	Minimum App SDK version	Required
deviceOnline	Indicates whether a device is online.	3.17	Yes
onChangeStreamStatus	The callback of video stream status changes.	3.17	Yes
isWirless	Indicates whether a Bluetooth Low Energy (Bluetooth LE) device is used.	3.17	No
privateMode	The private mode.	3.17	No
clarityStatus	The video streaming mode.	3.17	No
hightScaleMode	Indicates whether to maintain the video height when videos are played back.	3.17	No
channelNum	The maximum number of channels that can be used for playback.	3.17	No
voiceStatus	The audio mode.	3.17	No
isShareDeveice	Indicates whether a device is a shared device.	3.17	No
fullPlayerWidth	The width of the player in full screen mode.	3.17	This property is required when the full screen mode is supported.
fullPlayerHeight	The height of the player in full screen mode.	3.17	This property is required when the full screen mode is supported.
isFullScreen	Indicates whether the full screen mode is used.	3.17	No
onChangeScreenOrientation	Listens for the full screen mode.	3.17	No
onFullScreenTapView	Listens for the tap event in full screen mode.	3.17	No
onNormalScreenTapView	Listens for the tap event that occurs when the screen is not in full screen mode.	3.17	No
hideFullMenu	Specifies whether to hide the full screen menu.	3.17	No
stopFullAnim	Specifies whether to stop the full screen animation.	3.17	No
onChangeSupportedMicWay	Indicates whether the device supports video talk.	3.17	No
onListenIsTalking	Indicates whether the device is processing video or audio talk.	3.17	This property is required when video talk is supported.
onListenTalkingChangeMute	Indicates whether the audio modes are switched during the video or audio talk.	3.17	This property is required when video talk is supported.
renderNormalComArr	The custom features that apply when the screen is not in full-screen mode.	3.17	No
renderFullComArr	The custom features that apply when the screen is in full screen mode.	3.17	No
scaleMultiple	Zooms in videos at a fixed multiple.	3.22	No
onChangeZoomStatus	Listens for the display mode in the video screen, such as double taps and drag and drop.	3.22	This property is required if scaleMultiple is set.
onChangeActiveZoomStatus	Automatically restores the video zoom ratio in the preview mode.	3.22	This property is required if scaleMultiple is set.
onChangeRecording	Indicates whether the device is recording videos.	3.17	This property is required when video recording is supported.
showCutScreen	Specifies whether to display the built-in screenshot dialog box.	3.17	No
cutStyle	The style of the screenshot dialog box.	3.17	No
pressEnterAlbum	The custom method to enter an album.	3.17	No
showOneWayMic	Specifies whether to display the animation used in the one-way talk.	3.17	No
micTalkImage	The central icon used in the one-way talk.	3.17	No
micTalkImageStyle	The style of the central icon used in the one-way talk.	3.17	No
showTwoWayMic	Specifies whether to display a prompt for the built-in two-way talk.	3.17	No
twoMicStyle	The style of a prompt for the two-way talk.	3.17	No
showTimeInterval	Specifies whether to display a timer in the recording process.	3.17	No
timerInterValStyle	The style of the recording timer.	3.17	No
rockerDirections	Specifies whether to allow users to control the PTZ rocker directions by long pressing the video playback component.	3.20	No
onRetryConnect	The custom method of tapping to retry. This method has been defined in the component. Streams can be pulled again by default.	3.17	No
playerLoadParam	The style of a video mask layer.	3.17	No
channelNum	The number of the current live streaming channel. It expressly applies to multi-channel devices, such as dashboard cameras.	3.22	No
enterBackDisConP2P	Specifies whether to close a peer-to-peer (P2P) connection after the app runs in the background or in lock screen mode.	3.22	No
backIsNeedDisConnectP2P	Specifies whether to close a peer-to-peer (P2P) connection after the preview page is exited.	3.22	No
playerProps	Passes through the new features of the video component.	3.17	No
audioLoadParam	The style of a video mask in audio mode.	3.17	No
audioLoadText	The text content in audio mode.	3.17	No
showCustomVideoLoad	Specifies whether to display the loading box in the custom video area.	3.17	No
showCustomVideoText	Specifies whether to display the loading text in the custom video area.	3.17	No
showCustomRetry	Specifies whether to display the custom retry button.	3.17	No
showCustomRetryText	The text on the custom retry button.	3.17	No
initStatus	Initializes the video talk status, recording status, mute status, and high-definition status each time the app runs in the foreground.	3.17	No
enterBackgroundEvent	The event in which the player enters the background. In this case, the app runs in the background or is navigated to the native page.	3.17	No
enterForegroundEvent	The event in which the player enters the foreground. In this case, the app runs in the foreground or is navigated from the native page to the React Native page.	3.17	No

Properties

deviceOnline

Minimum App SDK version

3.17

Description

Indicates whether a device is online. This property is bound with the value of redux store.

Data type

Boolean

Required

Yes

Example

<TYIpcPlayer deviceOnline={this.props.deviceOnline} /> 

onChangeStreamStatus

Minimum App SDK version

3.17

Description

The callback that is executed after the video streaming status is changed.

Valid values of status:

• 0: offline device
• 1: private mode
• 2: creating a P2P connection
• 3: failed to build a channel
• 4: retrieving video streams
• 5: failed to get video streams
• 6: normal playback
• 7: audio mode, support by device firmware required

Required

Yes

Example

onChangeStreamStatus = status => {
	this.setState({
		videoStatus: status,
	});
};

<TYIpcPlayer onChangeStreamStatus={this.onChangeStreamStatus} />

isWirless

Minimum App SDK version

3.17

Description

Indicates whether a Bluetooth LE device is used. It depends on the setting of dpCode: wireless_awake.

Data type

Boolean

Required

Yes

Default value

false

Example

<TYIpcPlayer isWirless={this.props.wireless_awake !== undefined} /> 

privateMode

Minimum App SDK version

3.17

Description

Specifies whether to enable the private mode. It depends on whether dpCode: basic_private is true.

Data type

Boolean

Required

No

Default value

false

Example

<TYIpcPlayer privateMode={Booleanean(this.props.basic_private)} />  

clarityStatus

Minimum App SDK version

3.17

Description

The type of video stream definition. Valid values: HD and SD.

Multiple types of video streams and audio modes are supported, including:

• SS: saved streams
• SD: standard definition
• HD: high definition
• UD: ultra high definition
• SSP: super ultra HD
• AUDIO: audio

Data type

String

Required

No

Default value

HD

Example

this.state = {
  clarityStatus: 'ON'
}

<TYIpcPlayer clarityStatus={this.state.clarityStatus} />  

hightScaleMode

Minimum App SDK version

3.17

Description

Specifies whether to maintain the video height when videos are played back.

Data type

Boolean

Required

No

Default value

false

Example

this.state = {
  hightScaleMode: true
}

<TYIpcPlayer hightScaleMode={this.state.hightScaleMode} />   

channelNum

Minimum App SDK version

3.17

Description

The maximum number of channels that can be used for playback.

Data type

number

Required

No

Default value

-1

Example

this.state = {
  channelNum: -1
}

<TYIpcPlayer channelNum={this.state.channelNum} />   

voiceStatus

Minimum App SDK version

3.17

Description

The audio mode. Valid values: ON and OFF.

Data type

String

Required

No

Default value

OFF

Example

this.state = {
  voiceStatus: 'OFF'
}

<TYIpcPlayer voiceStatus={this.state.voiceStatus} />   

isShareDeveice

Minimum App SDK version

3.17

Description

Indicates whether a device is a shared device. This property defines functional permissions and is bound to devInfo.isShare of redux store.

Data type

Boolean

Required

No

Default value

false

Example

<TYIpcPlayer isShareDeveice={this.props.devInfo.isShare} />   

fullPlayerWidth

Minimum App SDK version

3.17

Description

The width of the player in full screen mode. We recommend that you set immersive StatusBar for Android and hide StatusBar in full screen mode. The width of the outermost container is returned by onLayOut.

Note: Set number to an integer.

Data type

Number

Required

This property is required when the full screen mode is supported.

Default value

null

Example

 _onLayout = e => {
  const { width, height } = e.nativeEvent.layout;
  this.setState({
    fullPlayerWidth: Math.ceil(width),
    fullPlayerHeight: Math.ceil(height),
  });
};
 <View style={styles.ipcPlayerpage} onLayout={e => this._onLayout(e)}>
   <StatusBar
     hidden={isFullScreen}
     barStyle={isIOS ? 'dark-content' : 'light-content'}
     translucent={true}
     backgroundColor="#000000"
   />
   <TYIpcPlayer fullPlayerWidth={this.state.fullPlayerWidth} /> 
</View>

fullPlayerHeight

Minimum App SDK version

3.17

Description

The height of the player in full screen mode. We recommend that you set immersive StatusBar for Android and hide StatusBar in full screen mode. The height of the outermost container is returned by onLayOut.

Note: Set number to an integer.

Data type

Number

Required

This property is required when the full screen mode is supported.

Default value

null

Example

 _onLayout = e => {
  const { width, height } = e.nativeEvent.layout;
  this.setState({
    fullPlayerWidth: Math.ceil(width),
    fullPlayerHeight: Math.ceil(height),
  });
 
};
 <View style={styles.ipcPlayerpage} onLayout={e => this._onLayout(e)}>
   <StatusBar
     hidden={isFullScreen}
     barStyle={isIOS ? 'dark-content' : 'light-content'}
     translucent={true}
     backgroundColor="#000000"
   />
   <TYIpcPlayer fullPlayerHeight={this.state.fullPlayerHeight} /> 
</View>

isFullScreen

Minimum App SDK version

3.17

Description

Indicates whether the full screen mode is used. The status is returned by the listener for onChangeScreenOrientation.

Data type

Boolean

Required

This property is required when the full screen mode is supported.

Default value

false

Example

<TYIpcPlayer isFullScreen={this.state.isFullScreen} />

onChangeScreenOrientation

Minimum App SDK version

3.17

Description

Listens for switching between the screen orientations of the video player.

Required

This property is required when the full screen mode is supported.

Example

onChangeScreenOrientation = isFull => {
  // Valid values:<ul><li>`true`: landscape screen or full screen</li><li>`false`: portrait screen or full screen</li></ul>
  setTimeout(() => {
    this.setState({
      isFullScreen: isFull,
    });
  }, 0);
};
 
<TYIpcPlayer 
  isFullScreen={this.state.isFullScreen} 
  onChangeScreenOrientation={this.onChangeScreenOrientation} 
 /> 

onFullScreenTapView

Minimum App SDK version

3.17

Description

Listens for the tap event in full screen mode.

Required

This property is required when the full screen mode is supported and when users are required to tap the full screen exit icon or perform specific operations.

Example

onFullScreenTapView = hideFullMenu => {
  this.setState({
    hideFullMenu,
    stopFullAnim: false,
  }); 
};;
 
<TYIpcPlayer 
  stopFullAnim={this.state.stopFullAnim} 
  hideFullMenu={this.state.isFullScreen} 
  onFullScreenTapView={this.onFullScreenTapView} 
 /> 

---

onNormalScreenTapView

Minimum App SDK version

3.17

Description

Listens for the tap event that occurs when the screen is not in full screen mode.

Required

No

Example

<TYIpcPlayer onNormalScreenTapView={() => {}} /> 

hideFullMenu

Minimum App SDK version

3.17

Description

Specifies whether to hide the full screen menu. Set the property in the callback of onFullScreenTapView.

Data type

Boolean

Required

This property is required when the full screen mode is supported and when users are required to tap the full screen exit icon.

Default value

false

Example

onFullScreenTapView = hideFullMenu => {
  this.setState({
    hideFullMenu,
    stopFullAnim: false,
  }); 
};;
 
<TYIpcPlayer 
  stopFullAnim={this.state.stopFullAnim} 
  hideFullMenu={this.state.isFullScreen} 
  onFullScreenTapView={this.onFullScreenTapView} 
 /> 

stopFullAnim

Minimum App SDK version

3.17

Description

Specifies whether to stop the full screen animation. This property is used to implement certain data points (DPs) and stop animation in full screen mode.

Data type

Boolean

Required

No

Default value

false

onFullScreenTapView = hideFullMenu => {
  this.setState({
    hideFullMenu,
    stopFullAnim: false,
  }); 
};;
 
<TYIpcPlayer 
  stopFullAnim={this.state.stopFullAnim} 
  hideFullMenu={this.state.isFullScreen} 
  onFullScreenTapView={this.onFullScreenTapView} 
 /> 

onChangeSupportedMicWay

Minimum App SDK version

3.17

Description

Indicates whether the device supports video talk. If it is true, the video talk mode is returned after a P2P connection is created.

Required

This parameter is required when video talk is supported.

Example

onChangeSupportedMicWay = micData => {
   // Valid values of `isSupportMic`:<ul><li>`true`: supported</li><li>`false`: not supported</li></ul>
   // Valid values of `isTwoWayTalk`:<ul><li>`true`: two-way talk<ul><li>`false`: one-way talk<ul><li>`undefined`: video talk not supported</li></ul>
   const { isSupportMic, isTwoWayTalk } = micData;
   this.setState({
     isSupportMic,
     isTwoWayTalk: Boolean(isTwoWayTalk),
   });
 };

<TYIpcPlayer onChangeSupportedMicWay={this.onChangeSupportedMicWay} />

onListenIsTalking

Minimum App SDK version

3.17

Description

Indicates whether the device is processing video or audio talk.

Required

This parameter is required when video talk is supported.

Example

onListenIsTalking = isTalking => {
  this.setState({
    isTalking,
  });
};
<TYIpcPlayer onListenIsTalking={this.onListenIsTalking} />

onListenTalkingChangeMute

Minimum App SDK version

3.17

Description

Indicates whether the audio modes are switched during the video or audio talk.

Note: The audio mode must be set to off in the one-way talk and set to on in the two-way talk.

Required

This parameter is required when video talk is supported.

Example

onListenTalkingChangeMute = voiceStatus => {
  this.setState({
    currentVoice: voiceStatus,
  });
};
<TYIpcPlayer onListenTalkingChangeMute={this.onListenTalkingChangeMute} />

renderNormalComArr

Minimum App SDK version

3.17

Description

The custom features that apply when the screen is not in full screen mode. The parent property is the player container.

Data type

Array

Required

No

Default value

[]

Example

this.state = {
 renderNormalComArr = [
     { component: Normal1, propData: {} },
     { component: Normal2, propData: {} },  
   ]
 }
 
<TYIpcPlayer renderNormalComArr={this.state.renderNormalComArr} />

renderFullComArr

Minimum App SDK version

3.17

Description

The custom features that apply when the screen is in full screen mode. The parent property is the player container.

Data type

Array

Required

No

Default value

[]

Example

this.state = {
 renderFullComArr = [
     { component: Full1, propData: {} },
     { component: Full2, propData: {} },
   ]
 }
 
<TYIpcPlayer renderFullComArr={this.state.renderFullComArr} />

scaleMultiple

Minimum App SDK version

3.22

Description

Zooms in videos at a fixed multiple.

Number supports decimals. Special values:

• -1: the width-maintained mode
• -2: the height-maintained mode

Common values: 1.0 (same as -1) to 6.0

Data type

Number

Required

No

Default value

undefined

Example

onChangeZoomStatus = data => {
   if (typeof data !== 'number') {
    const { scaleStatus, currentVideoScale } = data;
    // Listens for the video image changes and returns the zoom ratio and screen size ratio of the current video.
    // Required to display the current screen size ratio and can be ignored in other conditions.
   };
}
 
<TYIpcPlayer 
  scaleMultiple={this.state.scaleStatus}  
  onChangeZoomStatus={this.onChangeZoomStatus} 
 />

onChangeZoomStatus

Minimum App SDK version

3.22

Description

Listens for the display mode in the video screen, such as double taps and drag and drop.

Required

This parameter is required if scaleMultiple is set.

Example

onChangeZoomStatus = data => {
   if (typeof data !== 'number') {
    const { scaleStatus, currentVideoScale } = data;
    // Listens for the video image changes and returns the zoom ratio and screen size ratio of the current video.
    // Required to display the current screen size ratio and can be ignored in other conditions.
   };
}
 
<TYIpcPlayer 
  scaleMultiple={this.state.scaleStatus}  
  onChangeZoomStatus={this.onChangeZoomStatus} 
 />

onChangeActiveZoomStatus

Minimum App SDK version

3.22

Description

Automatically restores the video zoom ratio in the preview mode. In most cases, the callback is triggered when the app enters the foreground from the background and is navigated from other pages to the preview page.

Required

This property is required if scaleMultiple is set.

Example

onChangeActiveZoomStatus = data => {
   // The return value of this event is bound with the specified value of `scaleMultiple` for the Player component.
   const { zoomStatus } = data;
   this.setState({
        scaleStatus: zoomStatus,
   })
}
 
<TYIpcPlayer 
  scaleMultiple={this.state.scaleStatus}  
  onChangeActiveZoomStatus={this.onChangeZoomStatus} 
 />

onChangeRecording

Minimum App SDK version

3.22

Description

Indicates whether the device is recording videos.

Required

This property is required when video recording is supported.

Example

 // Indicates whether the device is recording videos.
onChangeRecording = isRecording => {
 // Recording cannot be stopped within three seconds after it is started to avoid a high failure rate.
  let isRecordingDisable = false; // Specifies whether to disable tapping of the recording button.
  clearTimeout(this.isRecordDisableTime);
  if (isRecording) {
    isRecordingDisable = true;
  }
  this.setState({
    isRecording,
    isRecordingDisable,
  });

  this.isRecordDisableTime = setTimeout(() => {
    this.setState({
      isRecordingDisable: false,
    });
  }, 3000);
};

<TYIpcPlayer onChangeRecording={this.onChangeRecording} /> 

showCutScreen

Minimum App SDK version

3.17

Description

Specifies whether to display the built-in screenshot dialog box.

Data type

Boolean

Required

No

Default value

true

Example

<TYIpcPlayer showCutScreen={false} />

cutStyle

Minimum App SDK version

3.17

Description

The style of the screenshot dialog box.

{

​    containerStyle: {},  // The style of the container.

​    descTxtStyle: {},     // The style of the description text.

​    albumBox: {},         // The box of the album button.

​    albumTxt: {},          // The text style of the album button.

}

Data type

Object

Required

No

Default value

{}

Example

<TYIpcPlayer showCutScreen={false} />

pressEnterAlbum

Minimum App SDK version

3.17

Description

The custom method to enter an album. Default value: TYIpcNative.enterAlbum().

Data type

Func

Required

No

Example

<TYIpcPlayer pressEnterAlbum={() => {console.log('Album')}} />

showOneWayMic

Minimum App SDK version

3.17

Description

Specifies whether to display the animation used in the built-in one-way talk.

Data type

Boolean

Required

No

Default value

true

Example

<TYIpcPlayer showOneWayMic={false} />

micTalkImage

Minimum App SDK version

3.17

Description

The central icon used in the one-way talk.

Data type

Number

Required

No

Example

<TYIpcPlayer micTalkImage={micTalkImage} />

micTalkImageStyle

Minimum App SDK version

3.17

Description

The style of the central icon used in the one-way talk.

Data type

Object

Required

No

Example

<TYIpcPlayer micTalkImageStyle={{tintColor: 'red'}} />

showTwoWayMic

Minimum App SDK version

3.17

Description

Specifies whether to display a prompt for the built-in two-way talk.

Data type

Boolean

Required

No

Default value

true

Example

<TYIpcPlayer showTwoWayMic={false} />

showTimeInterval

Minimum App SDK version

3.17

Description

Specifies whether to display a built-in timer in the recording process.

Data type

Boolean

Required

No

Example

<TYIpcPlayer showTimeInterval={false} />

timerInterValStyle

Minimum App SDK version

3.17

Description

The style of the recording timer.

{

​    timerPageFull: {},  // The style of the container in full screen.

​    timerPageNormal: {},     // The style of the container not in full screen.

​    timerContain: {},         // The style of the timer container.

​    dotStyle: {},          // The style of a dot of the timer.

​    timeStyle: {},       // The text style of the timer.

}

Data type

Object

Required

No

Example

<TYIpcPlayer timerInterValStyle={ {timerPageFull: {}} } />

rockerDirections

Minimum App SDK version

3.20

Description

Specifies whether to allow users to control the PTZ rocker directions by long pressing the video playback component.

In most cases, the enumeration values of dpCode: 'ptz_control' represent the rocker directions. Valid values:

0: up

2: right

4: down

6: left

Valid values of rockerDirections:

{

​    rockerEnabled:  true,  // Specifies whether to enable the rocker.

​    up: false,   // Specifies whether to allow the rocker to rotate up.

​    left: false,  // Specifies whether to allow the rocker to rotate left.

​    right: false, // Specifies whether to allow the rocker to rotate right.

​    down: false, // Specifies whether to allow the rocker to rotate down.

​    showIndicator: false, // Specifies whether to display the direction arrow icons of the rocker.

}

Data type

Object

Required

No

Example

const rockerDirections = {
  rockerEnabled: true, 
  up: true: 
  left: true, 
  right: true, 
  down: true, 
  showIndicator: true
};

<TYIpcPlayer 
  rockerDirections={rockerDirections} 
/>

onRetryConnect

Minimum App SDK version

3.17

Description

The custom method of tapping to retry. This method has been defined in the component. Streams can be pulled again by default.

Data type

Func

Required

No

Example

<TYIpcPlayer onRetryConnect={() => {} } />

playerLoadParam

Minimum App SDK version

3.17

Description

The style of a video mask layer.

{

  playerLoadContainer: {}  // The style of the container.

  fullBackIconContainer: {}  // The style of full screen exit icon.

  fullBackImg: imgSrc  // The icon to exit the full screen mode.

  fullBackImgStyle: {}  // The style of full screen exit image.

  loadAnimBoxStyle: {} // The style of the animation loading container.

  loadingAnimBgImg: imgSrc // The background image for loading animation.

  loadingAnimBgImgStyle: {} // The style of the background image for loading animation.

  loadingAnimImg:  imgSrc // The loading animation.

  loadingAnimImgStyle: imgSrc // The style of loading animation.

  loadingTextStyle: {}  // The style of loading text.

  reTryTextStyle: {} // The style of retry text.

}

Data type

Object

Required

No

Example

<TYIpcPlayer playerLoadParam={playerLoadParam} />

channelNum

Minimum App SDK version

3.22

Description

The number of the current live streaming channel. It expressly applies to multi-channel devices, such as dashboard cameras.

Data type

Number

Required

No

Default value

undefined

Example

// Sets the value to `1` or other positive integers.
const channelNum = 1;

<TYIpcPlayer channelNum={channelNum} />

enterBackDisConP2P

Minimum App SDK version

3.20

Description

Specifies whether to close a peer-to-peer (P2P) connection after the app runs in the background or in lock screen mode. By default, the P2P connection is closed five seconds later for iOS and is immediately closed for Android.

Data type

Boolean

Required

No

Default value

false

Example

<TYIpcPlayer enterBackDisConP2P={false} />

backIsNeedDisConnectP2P

Minimum App SDK version

3.22

Description

Specifies whether to close a peer-to-peer (P2P) connection after the preview page is exited.

Data type

Boolean

Required

No

Default value

true

Example

<TYIpcPlayer backIsNeedDisConnectP2P={false} />

playerProps

Minimum App SDK version

3.17

Description

Passes through the native features of the video component. The features are updated along with the app version.

List of supported new features and SDK versions

Property	Description	Type	Minimum App SDK version	Default value
rotateZ	The rendered rotation angle. Valid values: 0, 90, and 270.	Number	3.26.5	0
pTZControllable	Specifies whether to support PTZ control in the video area.	Boolean	3.26.5	true
maxScaleMultiple	The maximum zoom ratio.	Number	3.26.5	6
scalable	Specifies whether zoom control is enabled.	Boolean	3.27.5	true
trackingStatus	Specifies whether to display the close-up tracking status.	Boolean	3.27.5	false

Data type

Object

Required

No

Default value

{}

Example

<TYIpcPlayer playerProps={} />

audioLoadParam

Minimum App SDK version

3.17

Description

The style of a video mask in audio mode.

{

  audioTextStyle: {},  // The audio text style.

  audioLoadContainer: {}, // The style of the container.

  fullBackIconContainer: {}, // The container of the full screen exit icon.

  fullBackImg: imgSrc, // The icon to exit the full screen mode.

  fullBackImgStyle: {},  // The style of full screen exit image.

}

Data type

Object

Required

No

Example

<TYIpcPlayer audioLoadParam={audioLoadParam} />

audioLoadText

Minimum App SDK version

3.17

Description

The text content in audio mode.

Data type

String

Required

No

Example

<TYIpcPlayer audioLoadText={audioLoadText} />

showCustomVideoLoad

Minimum App SDK version

3.17

Description

Specifies whether to display the loading box in the custom video area. The loading box can be customized.

Data type

Boolean

Required

No

Default value

false

Example

<TYIpcPlayer showCustomVideoLoad={false} />

showCustomVideoText

Minimum App SDK version

3.17

Description

Specifies whether to display the loading text in the custom video area.

Data type

String

Required

No

Example

<TYIpcPlayer showCustomVideoText={showCustomVideoText} />

showCustomRetry

Minimum App SDK version

3.17

Description

Specifies whether to display the custom retry button.

Data type

Boolean

Required

No

Default value

false

Example

<TYIpcPlayer showCustomRetry={false} />

showCustomRetryText

Minimum App SDK version

3.17

Description

The text on the custom retry button.

Data type

String

Required

No

Example

<TYIpcPlayer showCustomRetryText={'hello'} />

initStatus

Minimum App SDK version

3.17

Description

Initializes the video talk status, recording status, mute status, and high-definition status each time the app runs in the foreground.

Required

No

Example

<TYIpcPlayer initStatus={initStatus} />

// Indicates whether the device is recording videos.
const initStatus = data => {
 const { isMuting, isRecording, isTalkBacking, isHDOn } = data;
};

<TYIpcPlayer initStatus={this.initStatus} /> 

enterBackgroundEvent

Minimum App SDK version

3.17

Description

The event in which the player enters the background. In this case, the app runs in the background or is navigated to the native page.

Data type

function

Required

No

Example

<TYIpcPlayer enterBackgroundEvent={enterBackgroundEvent} />

const enterBackgroundEvent = () => {
    // The event that occurs when the player enters the background.
    // ......
}

enterForegroundEvent

Minimum App SDK version

3.17

Description

The event in which the player enters the background. In this case, the app runs in the background or is navigated to the native page.

Data type

function

Required

No

Example

<TYIpcPlayer enterForegroundEvent={enterForegroundEvent} />

const enterForegroundEvent = () => {
    // The event that occurs when the player enters the foreground.
    // ......
}