! 新版开发者中心已正式上线,旧文档将于6月30日下架,不再维护 立即体验
小程序直播插件

插件API

下载pdf
更新时间:2020-05-14 14:16

插件"即构直播助手"中包含了组件zego-pusher, zego-player (分别替代了小程序原生组件live-pusher和live-player)

zego-pusher

组件相关属性

属性 类型 默认值 必填 说明
url String "" 推流地址(仅rtmp格式)
width Number 组件宽度,单位px
height Number 组件高度,单位px
mode String RTC SD(标清), HD(高清), FHD(超清), RTC(实时通话)
autopush Boolean false 是否自动推流
muted Boolean false 是否静音
enableCamera Boolean true 是否开启摄像头
autoFocus Boolean true 自动聚集,初始化设置生效
orientation String vertical 画面方向,可选值有 vertical,horizontal
beauty Number 0 美颜,取值范围 0-9 ,0 表示关闭
whiteness Number 0 美白,取值范围 0-9 ,0 表示关闭
aspect String 9:16 宽高比,可选值有 3:4, 9:16
minBitrate Number 200 最小码率,仅在mode为"RTC"的时候生效
maxBitrate Number 1000 最大码率,仅在mode为"RTC"的时候生效
audioQuality String high 录音质量,high或者low
waitingImage String "" 进入后台时推流的等待画面
waitingImageHash String "" 等待画面资源的MD5值
zoom Boolean false 调整焦距
devicePosition String front 前置或后置,值为front, back
mirror Boolean false 设置推流画面是否镜像,产生的效果在 live-player 反应到
localMirror String auto 控制本地预览画面是否镜像
audioReverbType Number 0 音频混响类型
enableAgc Boolean false 是否开启音频自动增益
enableAns Boolean false 是否开启音频噪声抑制
audioVolumeType String voicecall 音量类型
videoWidth Number 360 上推的视频流的分辨率宽度
videoHeight Number 640 上推的视频流的分辨率高度
bindstatechange EventHandle null 推流状态变化事件回调,detail = {code}
bindnetstatus EventHandle null 网络状态变化事件回调,detail = {info}
binderror EventHandle null 推流错误回调
bindbgmstart EventHandle null 背景音开始播放时触发
bindbgmprogress EventHandle null 背景音进度变化时触发,detail = {progress, duration}
bindbgmcomplete EventHandle null 背景音播放完成时触发
  • 推拉流的部分属性是较新版本的新特性,故小程序基础库要选择最新版本

localMirror的值

说明
auto 前置摄像头镜像,后置摄像头不镜像
enable 前后置摄像头均镜像
disable 前后置摄像头均不镜像

audioReverbType的值

说明
0 关闭
1 KTV
2 小房间
3 大会堂
4 低沉
5 洪亮
6 金属声
7 磁性

audioVolumeType的值

说明
media 媒体音量
voicecall 通话音量

组件实例化

如何获取组件实例

(1) 给组件标签定义个id或者class

<zego-pusher id="zg-pusher"></zego-pusher>

(2) 通过selectComponent获取组件实例:

var zgPusher = this.selectComponent('#zg-pusher');

组件接口

  • start

    开始推流,同时开启摄像头预览。调用之后会启动推流。在开始推流之前,url也要保证已经设置到组件属性中

    zgPusher.start();
  • stop

    停止推流,同时停止摄像头预览。

    zgPusher.stop();
  • pause

    暂停播放。

    zgPusher.pause();
  • resume

    恢复播放。

    zgPusher.resume();
  • startPreview

    开启摄像头预览。

    zgPusher.startPreview();
  • stopPreview

    关闭摄像头预览。

    zgPusher.stopPreview();
  • snapshot

    截图

    zgPusher.snapshot();
  • switchCamera

    切换前后摄像头

    zgPusher.switchCamera();
  • toggleTorch

    切换手电筒

    zgPusher.toggleTorch();
  • playBGM(url)

    播放背景音乐, url为string

    zgPusher.playBGM(url);
  • stopBGM

    停止背景音乐

    zgPusher.stopBGM();
  • pauseBGM

    暂停背景音乐

    zgPusher.pauseBGM();
  • resumeBGM

    恢复背景音乐

    zgPusher.resumeBGM();
  • setBGMVolume(volume)

    设置背景音音量, volume为string类型,表示音量大小,范围是 0-1

    zgPusher.setBGMVolume(volume);
  • setMICVolume(volume)

    设置麦克风音量, volume为number类型,表示音量大小,范围是 范围是 0.0-1.0

    zgPusher.setMICVolume(volume);

zego-player

组件相关属性

属性 类型 默认值 必填 说明
url String "" 拉流地址(仅rtmp、flv格式)
sid Stirng "" 流ID
width Number 组件宽度,单位px
height Number 组件高度,单位px
mode String live live(直播), RTC(实时通话)
autoplay Boolean false 自动播放
muted Boolean false 是否静音
orientation String vertical 画面方向,可选值有 vertical,horizontal
objectFit String contain 填充模式,可选值有 contain,fillCrop
minCache Number 1 最小缓冲区,单位s
maxCache Number 3 最大缓冲区,单位s
soundMode String speaker 声音输出设备,'speaker'或者'ear',代表扬声器或听筒
autoPauseNavigate Boolean true 当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放
autoPauseNative Boolean true 当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
pictureInPictureMode string/Array 设置小窗模式: push, pop 或通过数组形式设置多种模式
bindstatechange EventHandle null 推流状态变化事件回调,detail = {code}
bindnetstatus EventHandle null 网络状态变化事件回调,detail = {info}
bindfullscreenchange EventHandle null 全屏状态变化事件回调
bindaudiovolumenotify EventHandle null 播放音量大小通知,detail = {}
bindenterpictureinpicture EventHandle null 播放器进入小窗
bindleavepictureinpicture EventHandle null 播放器退出小窗

小窗特性pictureInPictureMode说明

zego-player小窗支持以下三种触发模式(在组件上设置 pictureInPictureMode 属性):

  • push 模式,即从当前页跳转至下一页时出现小窗(页面栈push)

  • pop 模式,即离开当页面时触发(页面栈pop)

  • 以上两种路由行为均触发小窗

此外,小窗还支持以下特性:

  • 小窗容器尺寸会根据原组件尺寸自动判断

  • 点击小窗,用户会被导航回小窗对应的播放器页面

  • 小窗出现后,用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

  • 多个 zego-player 的话最后一个设置 pictureInPictureMode 的组件会进入小窗

组件实例化

如何获取组件实例

(1) 给组件标签定义个id或者class

<zego-player id="zg-player"></zego-player>

(2) 通过selectComponent获取组件实例:

var zgPlayer = this.selectComponent('#zg-player');

组件接口

  • play

    开始播放。调用之后会启动播放。在开始播放之前,url也要保证已经设置到组件属性中。

    zgPlayer.play();
  • stop

    结束播放。

    zgPlayer.stop();
  • pause

    暂停播放。

    zgPlayer.pause();
  • resume

    恢复播放。

    zgPlayer.resume();
  • requestFullScreen

    全屏播放

    zgPlayer.requestFullScreen();
  • exitFullScreen

    退出全屏播放

    zgPlayer.exitFullScreen();
  • exitPictureInPicture

    退出小窗,该方法可在任意页面调用

    zgPlayer.exitPictureInPicture();
  • snapshot

    截图

    zgPlayer.snapshot();