LivePlayer

实时音视频播放。相关api:Taro.createLivePlayerContext

需要先通过类目审核,再在小程序管理后台,“设置”-“接口设置”中自助开通该组件权限。

参考文档

类型

  1. ComponentType<LivePlayerProps>

示例代码

  • React
  • Vue
  1. class App extends Components {
  2. render () {
  3. return (
  4. <LivePlayer src='url' mode='live' autoplay />
  5. )
  6. }
  7. }
  1. <template>
  2. <live-player src="url" mode="live" :autoplay="true" />
  3. </template>

LivePlayerProps

参数类型默认值必填说明
srcstring音视频地址。目前仅支持 flv, rtmp 格式
mode“live” | “RTC”“live”模式
autoplaybooleanfalse自动播放
mutedbooleanfalse是否静音
orientation“vertical” | “horizontal”“vertical”画面方向
objectFit“contain” | “fillCrop”“contain”填充模式
backgroundMutebooleanfalse进入后台时是否静音(已废弃,默认退台静音)
不推荐使用
minCachenumber1进最小缓冲区,单位s
maxCachenumber3进最小缓冲区,单位s
soundMode“speaker” | “ear”“speaker”声音输出方式
autoPauseIfNavigatebooleantrue当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放
autoPauseIfOpenNavigatebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
onStateChangeBaseEventOrigFunction<onStateChangeEventDetail>播放状态变化事件,detail = {code}
onFullScreenChangeBaseEventOrigFunction<onFullScreenChangeEventDetail>全屏变化事件,detail = {direction, fullScreen}
onNetstatusBaseEventOrigFunction<onNetStatusEventDetail>网络状态通知,detail = {info}
onAudioVolumenotifyBaseEventOrigFunction<>播放音量大小通知,detail = {}

API 支持度

API微信小程序H5React 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

mode 的合法值

参数说明
live直播
RTC实时通话,该模式时延更低

orientation

orientation 的合法值

参数说明
vertical竖直
horizontal水平

objectFit

objectFit 的合法值

参数说明
contain图像长边填满屏幕,短边区域会被填充⿊⾊
fillCrop图像铺满屏幕,超出显示区域的部分将被截掉

soundMode

soundMode 的合法值

参数说明
speaker扬声器
ear听筒

onStateChangeEventDetail

参数类型说明
codenumber状态码

onFullScreenChangeEventDetail

参数类型说明
directionnumber方向
fullScreennumber | boolean全屏

onNetStatusEventDetail

参数类型
infonetStatus

status

状态码

参数说明
2001已经连接服务器
2002已经连接 RTMP 服务器,开始拉流
2003网络接收到首个视频数据包(IDR)
2004视频播放开始
2005视频播放进度
2006视频播放结束
2007视频播放Loading
2008解码器启动
2009视频分辨率改变
-2301网络断连,且经多次重连抢救无效,更多重试请自行重启播放
-2302获取加速拉流地址失败
2101当前视频帧解码失败
2102当前音频帧解码失败
2103网络断连, 已启动自动重连
2104网络来包不稳:可能是下行带宽不足,或由于主播端出流不均匀
2105当前视频播放出现卡顿
2106硬解启动失败,采用软解
2107当前视频帧不连续,可能丢帧
2108当前流硬解第一个I帧失败,SDK自动切软解
3001RTMP -DNS解析失败
3002RTMP服务器连接失败
3003RTMP服务器握手失败
3005RTMP 读/写失败

API 支持度

API微信小程序H5React Native
LivePlayer✔️