如何通过即构小程序组件实现直播带货功能?
之前,我们已经介绍了即构小程序直播组件的功能、适用类目以及组件的集成方法,可以戳下面查看:
小程序直播功能可应用的场景非常广泛,例如秀场直播、在线直播课、电商直播卖货等。针对不同的场景需求,即构小程序直播组件提供了个性化的功能,例如针对电商直播场景,提供了音视频直播、商家后台管理、IM互动、商品列表推送、美颜、后台管理等功能。

一、初始化SDK
集成 SDK 后,若想使用 SDK 的功能,还需要对 SDK 进行初始化操作。

二、登录房间
1、设置房间相关回调
登录房间之前需要设置房间相关回调,便于登录房间成功后接收房间相关的事件通知,比如处理因网络中断退出房间等问题。
以房间状态回调为例:

DISCONNECTED:表示未连接状态,在登录房间前和退出房间后进入该状态。如果登录房间的过程出现稳态异常,例如 AppID 和 AppSign 不正确,或者有相同用户名在其他地方登录导致本端被 KickOut,都会进入该状态。
CONNECTING:表示正在请求连接状态,登录房间成功后会进入此状态,通常通过该状态进行应用界面的展示。如果因为网络质量不佳产生的连接中断,SDK 会进行内部重试,也会回到正在请求连接状态。
CONNECTED:表示连接成功状态,进入该状态表示已经登录房间成功,用户可以正常收到房间内的用户和流信息增删的回调通知。
其余回调接口请根据业务实际情况进行选择处理,完整的房间回调接口请戳这里查看~~~
2、登录获取Token
在开发阶段,ZEGO 提供了只用于测试环境获取 token 的接口,正式上线一定要由开发者的业务服务器实现 token 逻辑。登录 token 的获取详见:房间登录安全。
调用示例:


三、推流
直播过程中,主播要推送自己的本地画面,需要执行推流操作。
1、组件说明
微信小程序中的推流功能,需要使用 ZEGO "小程序直播插件”提供的 zego-pusher 标签。
调用示例:

2、开始推流
主播登录房间成功后,根据业务逻辑准备推流。使用 SDK 推流播放需要执行如下步骤:
1)触发推流。
2)调用 SDK 的 startPublishingStream 获取 streamID 对应的推流地址。
3)将步骤 2 中获取的推流地址设置为 zego-pusher 的 url。
4)获取推流组件实例,然后调用实例 的 start() 录制视频。
调用示例:


3、推流事件处理
微信小程序会在 zego-pusher 的 bindstatechange 绑定的方法中通知出推流状态事件,开发者需要执行如下操作:
1)在 bindstatechange 绑定的回调函数中,调用 SDK 提供的 updatePlayerState API 将推流事件透传给 SDK。
2)在 SDK 提供的 publisherStateUpdate 回调中处理推流的开始、失败状态。
调用示例:

调用示例:

4、停止推流
停止推流,开发者需要执行如下操作:
1)调用 SDK 提供的 stopPublishingStream(streamID) 清空推流状态。
2)调用 zego-pusher 实例提供的 stop() 停止推流。
注意:上述第 1 步为必选操作,否则可能导致 SDK 状态异常。
调用示例:

四、拉流
直播过程中,如果直播间里的观众要看到主播的推流画面,就需要执行拉流操作。
1、组件说明
微信小程序中的拉流流功能,需要用到插件提供的 zego-player 标签。
调用示例:

2、开始拉流
观众登录房间成功后,根据业务逻辑准备拉流。使用 SDK 拉流播放需要执行如下步骤:
1)触发拉流
2)调用 SDK 的 startPlayingStream 获取 streamID 对应的播放地址
3)将步骤 2 中获取的推流地址设置为 zego-player 的 url, 流ID设置为sid。
4)获取拉流组件实例,然后调用实例 的 play() 播放视频 或者设置拉流组件的 autoplay 属性为 true,实现自动拉流。
调用示例:



3、拉流事件处理
微信小程序会在 zego-player 的 bindstatechange 绑定的方法中通知出拉流状态事件,开发者需要执行如下操作:
1)在 bindstatechange 绑定的回调函数中,调用 SDK 提供的 updatePlayerState API将推流事件透传给 SDK。
2)在 SDK 提供的 onPlayStateUpdate 回调中处理播推、拉流的开始、失败状态。
调用示例:

调用示例:

4、停止拉流
停止拉流,开发者需要执行如下操作:
1)调用 SDK 提供的 stopPlayingStream(streamid) 清空拉流状态。
2)调用 zego-player 提供的 stop() 停止推流。
注意:上述第 1 步为必选操作,否则可能导致 SDK 状态异常。
调用示例:

五、退出房间
调用如下 logoutRoom 退出房间。在退出房间前,请确保停止推拉流,并清理相关状态。
调用示例:

六、配置公众平台域名
ZEGO分配给开发者的 URL(包含 HTTPS、WSS 协议),需要在微信公众平台进行“合法域名”配置后,小程序才能正常访问。
微信后台配置地址:微信公众平台 -> 设置 -> 开发设置 -> 服务器域名。
请开发者将 ZEGO 分配的请求域名,按照协议分类,填到指定的 request合法域名 或者 socket合法域名 中。例如:


发表评论