共计 7114 个字符,预计需要花费 18 分钟才能阅读完成。
之前,咱们曾经介绍了即构小程序直播组件的性能、实用类目以及组件的集成办法,能够戳上面查看:
即构小程序组件性能及实用类目
即构小程序组件的集成指引
小程序直播性能可利用的场景十分宽泛,例如秀场直播、在线直播课、电商直播卖货等。针对不同的场景需要,即构小程序直播组件提供了个性化的性能,例如针对电商直播场景,提供了音视频直播、商家后盾治理、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
*/
// 获取登录 token
getLoginToken: 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 周即可实现全副性能的配置。