写点什么

如何通过即构小程序组件实现直播带货功能?

用户头像
ZEGO即构
关注
发布于: 2021 年 01 月 16 日

之前,我们已经介绍了即构小程序直播组件的功能、适用类目以及组件的集成方法,可以戳下面查看:

 

即构小程序组件功能及适用类目

即构小程序组件的集成指引

 

小程序直播功能可应用的场景非常广泛,例如秀场直播、在线直播课、电商直播卖货等。针对不同的场景需求,即构小程序直播组件提供了个性化的功能,例如针对电商直播场景,提供了音视频直播、商家后台管理、IM 互动、商品列表推送、美颜、后台管理等功能。

 

下面我们来看,基于即构直播小程序组件,如何从零实现目前大热的电商直播功能。

 

一、初始化 SDK

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

// 声明变量let { ZegoExpressEngine } = require("../lib/ZegoExpressMiniProgram-1.6.0");let zg;// 初始化实例zg = new ZegoExpressEngine(this.data.appID, this.data.server);// 配置必要参数zg.setLogConfig({      logLevel: 'debug',      remoteLogLevel: 'debug',      logURL: this.data.logUrl})
复制代码

如果要实现一个完整的直播功能,还需要处理 SDK 的相关回调。回调只要在 SDK 生命周期内设置一次即可。

 

二、登录房间

1、设置房间相关回调

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

以房间状态回调为例:

zg.on('roomStateUpdate', (roomID, updateType, err) => {      console.log('>>>[liveroom-room] roomStateUpdate, updateType: ' + updateType + ', err: ' , err);})
复制代码

房间状态 updateType 分为 'DISCONNECTED','CONNECTING' 和 'CONNECTED'。

DISCONNECTED:表示未连接状态,在登录房间前和退出房间后进入该状态。如果登录房间的过程出现稳态异常,例如 AppID 和 AppSign 不正确,或者有相同用户名在其他地方登录导致本端被 KickOut,都会进入该状态。

CONNECTING:表示正在请求连接状态,登录房间成功后会进入此状态,通常通过该状态进行应用界面的展示。如果因为网络质量不佳产生的连接中断,SDK 会进行内部重试,也会回到正在请求连接状态。

CONNECTED:表示连接成功状态,进入该状态表示已经登录房间成功,用户可以正常收到房间内的用户和流信息增删的回调通知。

其余回调接口请根据业务实际情况进行选择处理,完整的房间回调接口请戳这里查看~~~

 

2、登录获取 Token

在开发阶段,ZEGO 提供了只用于测试环境获取 token 的接口,正式上线一定要由开发者的业务服务器实现 token 逻辑。

登录 token 的获取详见:房间登录安全

调用示例:

/* ZEGO 提供开发阶段获取 token 接口:https://wsliveroom-alpha.zego.im:8282/token,只能用于测试环境,正式环境一定要由客户业务服务器实现 token*/// 获取登录 tokengetLoginToken: function () {    var self = this;    const requestTask = wx.request({      url: 'xxxx', // 该接口由开发者后台自行实现,开发者的 token 从各自后台获取      data: {        app_id: self.data.appID,        id_name: self.data.userID,      },      header: {        'content-type': 'text/plain'      },      success: function (res) {        console.log(">>>[liveroom-room] get login token success. token is: " + res.data);        if (res.statusCode != 200) {          return;        }        zg.setUserStateUpdate(true);        self.loginRoom(res.data, self);      },      fail: function (e) {        console.log(">>>[liveroom-room] get login token fail, error is: ")        console.log(e);      }    });},
复制代码

 

/**调用 `loginRoom` 登录房间**注意:需保证 `roomID` 信息的全局唯一,只支持长度不超过 128 字节 的数字,下划线,字母。登录房间成功是后续所有操作的前提。小程序中演示源码片段如下,仅供参考:**/zg.loginRoom(this.data.roomID, token, { userID: this.data.userID, userName: this.data.userName })        .then(result => {          console.log(TAG_NAME, 'login room succeeded', result);        }).catch(err => {          console.error(TAG_NAME, 'login room fail', err);        })
复制代码

 

三、推流

直播过程中,主播要推送自己的本地画面,需要执行推流操作。

 

1、组件说明

微信小程序中的推流功能,需要使用 ZEGO "小程序直播插件”提供的 zego-pusher 标签。

调用示例:

<zego-pusher         id="zg-pusher"         url="{{pusherInfo.url}}"         class="push-content"        waitingImage="{{waitingImage}}"         enableCamera="{{enableCamera}}"         debug="{{debug}}"         autoFocus="{{autoFocus}}"         aspect="{{aspect}}"         minBitrate="{{minBitrate}}"         maxBitrate="{{maxBitrate}}"         zoom="{{zoom}}"        mode="{{mode}}"        muted="{{muted}}"        beauty="{{beauty}}"         whiteness="{{whiteness}}"        orientation="{{orientation}}"        bindstatechange="onPushStateChange"         bindnetstatus="onPushNetStateChange"></zego-pusher>
复制代码

 

2、开始推流

主播登录房间成功后,根据业务逻辑准备推流。使用 SDK 推流播放需要执行如下步骤:

1)触发推流。

2)调用 SDK 的 startPublishingStream 获取 streamID 对应的推流地址。

3)将步骤 2 中获取的推流地址设置为 zego-pusher 的 url。

4)获取推流组件实例,然后调用实例 的 start() 录制视频。

调用示例:

zgPusher = this.selectComponent("#zg-pusher");
复制代码

 

// 1/2. 主播登录房间成功后触发推流,调用 SDK 的 startPublishingStream 获取 streamID 对应的推流地址zg.loginRoom(this.data.roomID, token, { userID: this.data.userID, userName: this.data.userName })        .then(result => {          console.log(TAG_NAME, 'login room succeeded', result);          zg.startPublishingStream(this.data.pusherInfo.streamID).then(({ streamID, url}) => {                this.data.pusherInfo = {                  streamID,                  url                }                this.setData({                  pusherInfo: this.data.pusherInfo                }, () => {                  zgPusher.start();                })          });        }).catch(err => {          console.error(TAG_NAME, 'login room fail', err);        })
复制代码

 

3、推流事件处理

微信小程序会在 zego-pusher 的 bindstatechange 绑定的方法中通知出推流状态事件,开发者需要执行如下操作:

1)在 bindstatechange 绑定的回调函数中,调用 SDK 提供的 updatePlayerState API 将推流事件透传给 SDK。

2)在 SDK 提供的 publisherStateUpdate 回调中处理推流的开始、失败状态。

调用示例:

// zego-pusher 绑定推流事件onPushStateChange(e) {    console.log(      `${TAG_NAME} onPushStateChange `,       e.detail.code ,      e.detail.message    );    zg.updatePlayerState(this.data.pusherInfo.streamID, e);},// 推流后,服务器主动推过来的,流状态更新;主动停止推流没有回调,其他情况均回调zg.on('publisherStateUpdate', ({ streamID, state, errorCode }) => {      console.warn(TAG_NAME, 'publisherStateUpdate', state, streamID, errorCode);      this.setData({        publishing: state === 'PUBLISHING' ? true : false,        beginToPush: false      })    })
复制代码

3)微信小程序会在 zego-pusher 的 bindnetstatus 绑定的方法中通知出推流网络事件,开发者也需要在对应的小程序回调中,调用 updatePlayerNetStatus 将推流事件透传给 SDK。

调用示例:

// zego-pusher 绑定网络状态事件onPushNetStateChange(e) {    console.log(      `${TAG_NAME} onPushNetStateChange `,       e.detail.code ,      e.detail.message    );    zg.updatePlayerNetStatus(this.data.pusherInfo.streamID, e);},// SDK 获取推流网络质量zg.on('publishQualityUpdate', (streamID, publishStats) => {     console.log('publishQualityUpdate', streamID, stats);});
复制代码

4)停止推流

停止推流,开发者需要执行如下操作:

1)调用 SDK 提供的 stopPublishingStream(streamID) 清空推流状态。

2)调用 zego-pusher 实例提供的 stop() 停止推流。

注意:上述第 1 步为必选操作,否则可能导致 SDK 状态异常。

调用示例:

// 停止推流zg.stopPublishingStream (this.data.pushStreamID);zgPusher.stop();
复制代码

 

四、拉流

直播过程中,如果直播间里的观众要看到主播的推流画面,就需要执行拉流操作。

1、组件说明

微信小程序中的拉流流功能,需要用到插件提供的 zego-player 标签。

调用示例:

<zego-player         id="zg-player"         sid="{{playerInfo.streamID}}"         url="{{playerInfo.url}}"        orientation="{{orientation}}"         objectFit="{{objectFit}}"         minCache="{{minCache}}"         maxCache="{{maxCache}}"         mode="{{mode}}"         muted="{{muted}}"         debug="{{debug}}"        pictureInPictureMode="{{pictureInPictureMode}}"         objectFit="{{objectFit}}"         class="play-content"         bindstatechange="onPlayStateChange"         bindnetstatus="onPlayNetStateChange"></zego-player>
复制代码

2、开始拉流

观众登录房间成功后,根据业务逻辑准备拉流。使用 SDK 拉流播放需要执行如下步骤:

1)触发拉流

2)调用 SDK 的 startPlayingStream 获取 streamID 对应的播放地址

3)将步骤 2 中获取的推流地址设置为 zego-player 的 url, 流 ID 设置为 sid。

4)获取拉流组件实例,然后调用实例 的 play() 播放视频 或者设置拉流组件的 autoplay 属性为 true,实现自动拉流。

调用示例:

//  通过 SDK 获取 streamID 对应的播放地址zg.startPlayingStream(streamList[0].streamID).then(({ streamID, url }) => {            console.warn(TAG_NAME, 'startPlayingStream', streamID, url);            that.data.playerInfo.streamID = streamID;            that.data.playerInfo.url = url;            that.setData({              playerInfo: that.data.playerInfo            }, () => {              console.error(that.data.playerInfo, zgPlayer)              zgPlayer.play();            })          }).catch(err => {            console.warn(TAG_NAME, 'startPlayingStream', err);          });
复制代码

 

zgPlayer = this.selectComponent("#zg-player");
复制代码

 

zgPlayer.play();
复制代码

 

3、拉流事件处理

微信小程序会在 zego-player 的 bindstatechange 绑定的方法中通知出拉流状态事件,开发者需要执行如下操作:

1)在 bindstatechange 绑定的回调函数中,调用 SDK 提供的 updatePlayerState API 将推流事件透传给 SDK。

2)在 SDK 提供的 onPlayStateUpdate 回调中处理播推、拉流的开始、失败状态。

调用示例:

// zego-player 绑定的拉流事件onPlayStateChange(e) {    // 透传拉流事件给 SDK,type 0 拉流    zg.updatePlayerState(e.detail.streamID, e);},// 服务端主动推过来的 流的播放状态, 视频播放状态通知;type: { start:0, stop:1};zg.onPlayStateUpdate = function (updatedType, streamID) {    console.log(`${TAG_NAME} onPlayStateUpdate ${updatedType === 0 ? 'start ' : 'stop '} ${streamID}`);};
复制代码

3)微信小程序会在 zego-player 的 bindnetstatus 绑定的方法中通知出拉流网络事件,开发者也需要在对应的小程序回调中,调用 updatePlayerNetStatus 将推流事件透传给 SDK。

调用示例:

// zego-player 绑定网络状态事件onPlayNetStateChange(e) {    console.log(      `${TAG_NAME} onPlayNetStateChange `,      e.detail.info    );    zg.updatePlayerNetStatus(e.detail.streamID, e);},// SDK 拉流网络质量回调zg.on('playQualityUpdate', (streamID, stats) => {      console.log(`${TAG_NAME} playQualityUpdate ${streamID}`, stats);});
复制代码

 

4、停止拉流

停止拉流,开发者需要执行如下操作:

1)调用 SDK 提供的 stopPlayingStream(streamid) 清空拉流状态。

2)调用 zego-player 提供的 stop() 停止推流。

注意:上述第 1 步为必选操作,否则可能导致 SDK 状态异常。

调用示例:

// 停止拉流zg.stopPlayingStream(this.data.playInfo.streamID);zgPlayer.stop();
复制代码

 

五、退出房间

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

调用示例:

zg.logoutRoom(this.data.roomID);
复制代码

 

六、配置公众平台域名

ZEGO 分配给开发者的 URL(包含 HTTPS、WSS 协议),需要在微信公众平台进行“合法域名”配置后,小程序才能正常访问。

微信后台配置地址:微信公众平台 -> 设置 -> 开发设置 -> 服务器域名。

请开发者将 ZEGO 分配的请求域名,按照协议分类,填到指定的 request 合法域名 或者 socket 合法域名 中。例如:



通过以上步骤即可实现小程序直播功能,对于商品列表、后台管理等功能,可以在留言区或私信我开通,只需 1 周即可完成全部功能的配置。


发布于: 2021 年 01 月 16 日阅读数: 79
用户头像

ZEGO即构

关注

专注音视频领域19年 2020.04.15 加入

全球领先的音视频云服务商,已为映客、酷狗、喜马拉雅、荔枝、好未来、作业帮、掌门一对一、Live.Me、UpLive、Mico、平安科技等众多行业头部企业提供音视频云服务。

评论

发布
暂无评论
如何通过即构小程序组件实现直播带货功能?