零基础通过直播小程序组件实现电商带货
// 声明变量
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
})
zg.on('roomStateUpdate', (roomID, updateType, err) => {
console.log('>>>[liveroom-room] roomStateUpdate, updateType: ' + updateType + ', err: ' , err);
})
其余回调接口请根据业务实际情况进行选择处理，完整的房间回调接口请戳这里查看~~~
/* 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);
})
<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>
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);
})
// 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
})
})
// 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);
});
// 停止推流 zg.stopPublishingStream (this.data.pushStreamID); zgPusher.stop();
<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>
// 通过 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();
// 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}`);
};
// 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);
});
// 停止拉流 zg.stopPlayingStream(this.data.playInfo.streamID); zgPlayer.stop();
zg.logoutRoom(this.data.roomID);
