LivePlayer

Real-time audio/video playback. Related API: Taro.createLivePlayerContext

Currently, it is open only to Mini Programs in the following categories owned by Chinese entities. The component needs to pass the category review, and then on the Mini Program Console, you can activate the permissions for this component by choosing Development > API Settings.

Reference

Type

ComponentType<LivePlayerProps>

Examples

React

class App extends Components {
  render () {
    return (
      <LivePlayer src='url' mode='live' autoplay  />
    )
  }
}

Vue

<template>
  <live-player src="url" mode="live" :autoplay="true"  />
</template>

LivePlayerProps

Property	Type	Default	Required	Description
src	string		No	Audio/video address. Only flv and rtmp formats are supported.
mode	"live" | "RTC"	"live"	No	Mode
autoplay	boolean	false	No	Auto playback
muted	boolean	false	No	Specifies whether to mute the component.
orientation	"vertical" | "horizontal"	"vertical"	No	The orientation of the image.
objectFit	"contain" | "fillCrop"	"contain"	No	Filling mode. Available values include `contain` and `fillCrop`.
backgroundMute	boolean	false	No	Specifies whether to mute the component when it enters the background. (This property has been discarded. By default, the component is muted when entering the background.)
minCache	number	1	No	Minimum buffer (in s)
maxCache	number	3	No	Minimum buffer (in s)
soundMode	"speaker" | "ear"	"speaker"	No	Sound output mode
autoPauseIfNavigate	boolean	true	No	Specifies whether to automatically pause the real-time audio/video playback on the current page upon the navigation to another Mini Program page.
autoPauseIfOpenNavigate	boolean	true	No	Specifies whether to automatically pause the real-time audio/video playback on the current page upon the navigation to another native page of WeChat.
onStateChange	BaseEventOrigFunction<onStateChangeEventDetail>		No	A playback status change. detail = {code}
onFullScreenChange	BaseEventOrigFunction<onFullScreenChangeEventDetail>		No	A full-screen mode change. detail = {direction, fullScreen}
onNetstatus	BaseEventOrigFunction<onNetStatusEventDetail>		No	The notification of the network status. detail = {info}
onAudioVolumenotify	BaseEventOrigFunction<>		否	Playback volume level change. detail = {}

Property Support

Property	WeChat Mini-Program	H5	React Native
LivePlayerProps.src	✔️
LivePlayerProps.mode	✔️
LivePlayerProps.autoplay	✔️
LivePlayerProps.muted	✔️
LivePlayerProps.orientation	✔️
LivePlayerProps.objectFit	✔️
LivePlayerProps.backgroundMute	✔️
LivePlayerProps.minCache	✔️
LivePlayerProps.maxCache	✔️
LivePlayerProps.soundMode	✔️
LivePlayerProps.autoPauseIfNavigate	✔️
LivePlayerProps.autoPauseIfOpenNavigate	✔️
LivePlayerProps.onStateChange	✔️
LivePlayerProps.onFullScreenChange	✔️
LivePlayerProps.onNetstatus	✔️
LivePlayerProps.onAudioVolumenotify	✔️

mode

Valid values of mode

Value	Description
live	Live stream
RTC	Real-time call. The latency is lower in this mode.

orientation

Valid values of orientation

Value	Description
vertical	Vertical
horizontal	Horizontal

objectFit

Valid values of object-fit

Value	Description
contain	Indicates that the longer edge of the image fills the screen, and the shorter edge is filled with black.
fillCrop	Indicates that the image fills the screen, and the part out of the display area will be truncated.

soundMode

Valid values of soundMode

Value	Description
speaker	Loudspeaker
ear	Receiver

onStateChangeEventDetail

Param	Type	Decription
code	number	status code

onFullScreenChangeEventDetail

Param	Type	Decription
direction	number	Screen orientation
fullScreen	number | boolean	Full screen or not

onNetStatusEventDetail

Param	Type
info	netStatus

status

Status codes

Code	Description
2001	Connected to the server
2002	Connected to the server. Pull started.
2003	The network has received the first video packet (IDR)
2004	Video playback started
2005	Video playback in progress
2006	Video playback ended
2007	Video playback loading
2008	Decoder started
2009	Video resolution changed
-2301	Network disconnected. Too many failed reconnection attempts. Restart the playback for more retries.
-2302	Failed to get the accelerated pull address
2101	Failed to decode the current video frame
2102	Failed to decode the current audio frame
2103	Network disconnected and auto reconnection has started
2104	Unstable inbound packet: This may be caused by insufficient downstream bandwidth, or inconsistent outbound stream from the VJ end.
2105	Stutter occurred during the video playback
2106	Failed to start hard decoding. Soft decoding is used instead.
2107	Discontinuous sequence of video frames. Some frames may be dropped.
2108	Hard decoding of the first I-frame of current stream failed. Switched to soft decoding automatically.
3001	RTMP DNS resolution failed
3002	Failed to connect to the RTMP server
3003	Failed to shake hands with the RTMP server
3005	Failed to read/write data on the RTMP server

API Support

API	WeChat Mini-Program	H5	React Native
LivePlayer	✔️