875 lines
23 KiB
JavaScript
875 lines
23 KiB
JavaScript
|
// pages/meeting/meeting.js
|
|||
|
|
const app = getApp()
|
|||
|
|
const Utils = require('../../utils/util.js')
|
|||
|
|
const AgoraMiniappSDK = require("../../lib/mini-app-sdk-production.js");
|
|||
|
|
const max_user = 10;
|
|||
|
|
const Layouter = require("../../utils/layout.js");
|
|||
|
|
const APPID = require("../../utils/config.js").APPID;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* log relevant, remove these part and relevant code if not needed
|
|||
|
|
*/
|
|||
|
|
const Uploader = require("../../utils/uploader.js")
|
|||
|
|
const LogUploader = Uploader.LogUploader;
|
|||
|
|
const LogUploaderTask = Uploader.LogUploaderTask;
|
|||
|
|
|
|||
|
|
Page({
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 页面的初始数据
|
|||
|
|
*/
|
|||
|
|
data: {
|
|||
|
|
/**
|
|||
|
|
* media objects array
|
|||
|
|
* this involves both player & pusher data
|
|||
|
|
* we use type to distinguish
|
|||
|
|
* a sample media object
|
|||
|
|
* {
|
|||
|
|
* key: **important, change this key only when you want to completely refresh your dom**,
|
|||
|
|
* type: 0 - pusher, 1 - player,
|
|||
|
|
* uid: uid of stream,
|
|||
|
|
* holding: when set to true, the block will stay while native control hidden, used when needs a placeholder for media block,
|
|||
|
|
* url: url of pusher/player
|
|||
|
|
* left: x of pusher/player
|
|||
|
|
* top: y of pusher/player
|
|||
|
|
* width: width of pusher/player
|
|||
|
|
* height: height of pusher/player
|
|||
|
|
* }
|
|||
|
|
*/
|
|||
|
|
media: [],
|
|||
|
|
/**
|
|||
|
|
* muted
|
|||
|
|
*/
|
|||
|
|
muted: false,
|
|||
|
|
/**
|
|||
|
|
* beauty 0 - 10
|
|||
|
|
*/
|
|||
|
|
beauty: 0,
|
|||
|
|
totalUser: 1,
|
|||
|
|
/**
|
|||
|
|
* debug
|
|||
|
|
*/
|
|||
|
|
debug: false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面加载
|
|||
|
|
*/
|
|||
|
|
onLoad: function(options) {
|
|||
|
|
Utils.log(`onLoad`);
|
|||
|
|
// get channel from page query param
|
|||
|
|
this.channel = options.channel;
|
|||
|
|
// default role to broadcaster
|
|||
|
|
this.role = options.role || "broadcaster";
|
|||
|
|
// get pre-gened uid, this uid will be different every time the app is started
|
|||
|
|
this.uid = Utils.getUid();
|
|||
|
|
// store agora client
|
|||
|
|
this.client = null;
|
|||
|
|
// store layouter control
|
|||
|
|
this.layouter = null;
|
|||
|
|
// prevent user from clicking leave too fast
|
|||
|
|
this.leaving = false;
|
|||
|
|
|
|||
|
|
// page setup
|
|||
|
|
wx.setNavigationBarTitle({
|
|||
|
|
title: `${this.channel}(${this.uid})`
|
|||
|
|
});
|
|||
|
|
wx.setKeepScreenOn({
|
|||
|
|
keepScreenOn: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* please remove this part in your production environment
|
|||
|
|
*/
|
|||
|
|
if (/^sdktest.*$/.test(this.channel)) {
|
|||
|
|
this.testEnv = true
|
|||
|
|
wx.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '您正处于测试环境',
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面初次渲染完成
|
|||
|
|
*/
|
|||
|
|
onReady: function() {
|
|||
|
|
let channel = this.channel;
|
|||
|
|
let uid = this.uid;
|
|||
|
|
Utils.log(`onReady`);
|
|||
|
|
|
|||
|
|
// schedule log auto update, remove this if this is not needed
|
|||
|
|
this.logTimer = setInterval(() => {
|
|||
|
|
this.uploadLogs();
|
|||
|
|
}, 60 * 60 * 1000);
|
|||
|
|
|
|||
|
|
// init layouter control
|
|||
|
|
this.initLayouter();
|
|||
|
|
|
|||
|
|
// init agora channel
|
|||
|
|
this.initAgoraChannel(uid, channel).then(url => {
|
|||
|
|
Utils.log(`channel: ${channel}, uid: ${uid}`);
|
|||
|
|
Utils.log(`pushing ${url}`);
|
|||
|
|
let ts = new Date().getTime();
|
|||
|
|
|
|||
|
|
if (this.isBroadcaster()) {
|
|||
|
|
// first time init, add pusher media to view
|
|||
|
|
this.addMedia(0, this.uid, url, {
|
|||
|
|
key: ts
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}).catch(e => {
|
|||
|
|
Utils.log(`init agora client failed: ${e}`);
|
|||
|
|
wx.showToast({
|
|||
|
|
title: `客户端初始化失败`,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 5000
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 只有提供了该回调才会出现转发选项
|
|||
|
|
*/
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* calculate size based on current media length
|
|||
|
|
* sync the layout info into each media object
|
|||
|
|
*/
|
|||
|
|
syncLayout(media) {
|
|||
|
|
let sizes = this.layouter.getSize(media.length);
|
|||
|
|
for (let i = 0; i < sizes.length; i++) {
|
|||
|
|
let size = sizes[i];
|
|||
|
|
let item = media[i];
|
|||
|
|
|
|||
|
|
if (item.holding) {
|
|||
|
|
//skip holding item
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
item.left = parseFloat(size.x).toFixed(2);
|
|||
|
|
item.top = parseFloat(size.y).toFixed(2);
|
|||
|
|
item.width = parseFloat(size.width).toFixed(2);
|
|||
|
|
item.height = parseFloat(size.height).toFixed(2);
|
|||
|
|
}
|
|||
|
|
return media;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* check if current media list has specified uid & mediaType component
|
|||
|
|
*/
|
|||
|
|
hasMedia(mediaType, uid) {
|
|||
|
|
let media = this.data.media || [];
|
|||
|
|
return media.filter(item => {
|
|||
|
|
return item.type === mediaType && `${item.uid}` === `${uid}`
|
|||
|
|
}).length > 0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* add media to view
|
|||
|
|
* type: 0 - pusher, 1 - player
|
|||
|
|
* *important* here we use ts as key, when the key changes
|
|||
|
|
* the media component will be COMPLETELY refreshed
|
|||
|
|
* this is useful when your live-player or live-pusher
|
|||
|
|
* are in a bad status - say -1307. In this case, update the key
|
|||
|
|
* property of media object to fully refresh it. The old media
|
|||
|
|
* component life cycle event detached will be called, and
|
|||
|
|
* new media component life cycle event ready will then be called
|
|||
|
|
*/
|
|||
|
|
addMedia(mediaType, uid, url, options) {
|
|||
|
|
Utils.log(`add media ${mediaType} ${uid} ${url}`);
|
|||
|
|
let media = this.data.media || [];
|
|||
|
|
|
|||
|
|
if (mediaType === 0) {
|
|||
|
|
//pusher
|
|||
|
|
media.splice(0, 0, {
|
|||
|
|
key: options.key,
|
|||
|
|
type: mediaType,
|
|||
|
|
uid: `${uid}`,
|
|||
|
|
holding: false,
|
|||
|
|
url: url,
|
|||
|
|
left: 0,
|
|||
|
|
top: 0,
|
|||
|
|
width: 0,
|
|||
|
|
height: 0
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
//player
|
|||
|
|
media.push({
|
|||
|
|
key: options.key,
|
|||
|
|
rotation: options.rotation,
|
|||
|
|
type: mediaType,
|
|||
|
|
uid: `${uid}`,
|
|||
|
|
holding: false,
|
|||
|
|
url: url,
|
|||
|
|
left: 0,
|
|||
|
|
top: 0,
|
|||
|
|
width: 0,
|
|||
|
|
height: 0
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
media = this.syncLayout(media);
|
|||
|
|
return this.refreshMedia(media);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* remove media from view
|
|||
|
|
*/
|
|||
|
|
removeMedia: function(uid) {
|
|||
|
|
Utils.log(`remove media ${uid}`);
|
|||
|
|
let media = this.data.media || [];
|
|||
|
|
media = media.filter(item => {
|
|||
|
|
return `${item.uid}` !== `${uid}`
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (media.length !== this.data.media.length) {
|
|||
|
|
media = this.syncLayout(media);
|
|||
|
|
this.refreshMedia(media);
|
|||
|
|
} else {
|
|||
|
|
Utils.log(`media not changed: ${JSON.stringify(media)}`)
|
|||
|
|
return Promise.resolve();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* update media object
|
|||
|
|
* the media component will be fully refreshed if you try to update key
|
|||
|
|
* property.
|
|||
|
|
*/
|
|||
|
|
updateMedia: function(uid, options) {
|
|||
|
|
Utils.log(`update media ${uid} ${JSON.stringify(options)}`);
|
|||
|
|
let media = this.data.media || [];
|
|||
|
|
let changed = false;
|
|||
|
|
for (let i = 0; i < media.length; i++) {
|
|||
|
|
let item = media[i];
|
|||
|
|
if (`${item.uid}` === `${uid}`) {
|
|||
|
|
media[i] = Object.assign(item, options);
|
|||
|
|
changed = true;
|
|||
|
|
Utils.log(`after update media ${uid} ${JSON.stringify(item)}`)
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (changed) {
|
|||
|
|
return this.refreshMedia(media);
|
|||
|
|
} else {
|
|||
|
|
Utils.log(`media not changed: ${JSON.stringify(media)}`)
|
|||
|
|
return Promise.resolve();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* call setData to update a list of media to this.data.media
|
|||
|
|
* this will trigger UI re-rendering
|
|||
|
|
*/
|
|||
|
|
refreshMedia: function(media) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
for (let i = 0; i < media.length; i++) {
|
|||
|
|
if (i < max_user) {
|
|||
|
|
//show
|
|||
|
|
media[i].holding = false;
|
|||
|
|
} else {
|
|||
|
|
//hide
|
|||
|
|
media[i].holding = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (media.length > max_user) {
|
|||
|
|
wx.showToast({
|
|||
|
|
title: '由于房内人数超过7人，部分视频未被加载显示',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Utils.log(`updating media: ${JSON.stringify(media)}`);
|
|||
|
|
this.setData({
|
|||
|
|
media: media
|
|||
|
|
}, () => {
|
|||
|
|
resolve();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面显示
|
|||
|
|
*/
|
|||
|
|
onShow: function() {
|
|||
|
|
let media = this.data.media || [];
|
|||
|
|
media.forEach(item => {
|
|||
|
|
if (item.type === 0) {
|
|||
|
|
//return for pusher
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let player = this.getPlayerComponent(item.uid);
|
|||
|
|
if (!player) {
|
|||
|
|
Utils.log(`player ${item.uid} component no longer exists`, "error");
|
|||
|
|
} else {
|
|||
|
|
// while in background, the player maybe added but not starting
|
|||
|
|
// in this case we need to start it once come back
|
|||
|
|
player.start();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面隐藏
|
|||
|
|
*/
|
|||
|
|
onHide: function() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onError: function(e) {
|
|||
|
|
Utils.log(`error: ${JSON.stringify(e)}`);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面卸载
|
|||
|
|
*/
|
|||
|
|
onUnload: function() {
|
|||
|
|
Utils.log(`onUnload`);
|
|||
|
|
clearInterval(this.logTimer);
|
|||
|
|
clearTimeout(this.reconnectTimer);
|
|||
|
|
this.logTimer = null;
|
|||
|
|
this.reconnectTimer = null;
|
|||
|
|
|
|||
|
|
// unlock index page join button
|
|||
|
|
let pages = getCurrentPages();
|
|||
|
|
if (pages.length > 1) {
|
|||
|
|
//unlock join
|
|||
|
|
let indexPage = pages[0];
|
|||
|
|
indexPage.unlockJoin();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// unpublish sdk and leave channel
|
|||
|
|
if (this.isBroadcaster()) {
|
|||
|
|
try {
|
|||
|
|
this.client && this.client.unpublish();
|
|||
|
|
} catch (e) {
|
|||
|
|
Utils.log(`unpublish failed ${e}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.client && this.client.leave();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* callback when leave button called
|
|||
|
|
*/
|
|||
|
|
onLeave: function() {
|
|||
|
|
if (!this.leaving) {
|
|||
|
|
this.leaving = true;
|
|||
|
|
this.navigateBack();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* navigate to previous page
|
|||
|
|
* if started from shared link, it's possible that
|
|||
|
|
* we have no page to go back, in this case just redirect
|
|||
|
|
* to index page
|
|||
|
|
*/
|
|||
|
|
navigateBack: function() {
|
|||
|
|
Utils.log(`attemps to navigate back`);
|
|||
|
|
if (getCurrentPages().length > 1) {
|
|||
|
|
//have pages on stack
|
|||
|
|
wx.navigateBack({});
|
|||
|
|
} else {
|
|||
|
|
//no page on stack, usually means start from shared links
|
|||
|
|
wx.redirectTo({
|
|||
|
|
url: '../index/index',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 推流状态更新回调
|
|||
|
|
*/
|
|||
|
|
onPusherFailed: function() {
|
|||
|
|
Utils.log('pusher failed completely', "error");
|
|||
|
|
wx.showModal({
|
|||
|
|
title: '发生错误',
|
|||
|
|
content: '推流发生错误，请重新进入房间重试',
|
|||
|
|
showCancel: false,
|
|||
|
|
success: () => {
|
|||
|
|
this.navigateBack();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 静音回调
|
|||
|
|
*/
|
|||
|
|
onMute: function() {
|
|||
|
|
if (!this.data.muted) {
|
|||
|
|
this.client.muteLocal('audio', () => {
|
|||
|
|
console.log('muteLocal success')
|
|||
|
|
}, err => {
|
|||
|
|
console.log(err)
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.client.unmuteLocal('audio', () => {
|
|||
|
|
console.log('unmuteLocal success')
|
|||
|
|
}, err => {
|
|||
|
|
console.log(err)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
muted: !this.data.muted
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 摄像头方向切换回调
|
|||
|
|
*/
|
|||
|
|
onSwitchCamera: function() {
|
|||
|
|
Utils.log(`switching camera`);
|
|||
|
|
// get pusher component via id
|
|||
|
|
const agoraPusher = this.getPusherComponent();
|
|||
|
|
agoraPusher && agoraPusher.switchCamera();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 美颜回调
|
|||
|
|
*/
|
|||
|
|
onMakeup: function() {
|
|||
|
|
let beauty = this.data.beauty == 5 ? 0 : 5;
|
|||
|
|
this.setData({
|
|||
|
|
beauty: beauty
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 上传日志
|
|||
|
|
*/
|
|||
|
|
uploadLogs: function() {
|
|||
|
|
let logs = Utils.getLogs();
|
|||
|
|
Utils.clearLogs();
|
|||
|
|
|
|||
|
|
let totalLogs = logs.length;
|
|||
|
|
let tasks = [];
|
|||
|
|
let part = 0;
|
|||
|
|
let ts = new Date().getTime();
|
|||
|
|
// 1w logs per task slice
|
|||
|
|
const sliceSize = 500;
|
|||
|
|
do {
|
|||
|
|
let content = logs.splice(0, sliceSize);
|
|||
|
|
tasks.push(new LogUploaderTask(content, this.channel, part++, ts, this.uid));
|
|||
|
|
} while (logs.length > sliceSize)
|
|||
|
|
wx.showLoading({
|
|||
|
|
title: '0%',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
LogUploader.off("progress").on("progress", e => {
|
|||
|
|
let remain = e.remain;
|
|||
|
|
let total = e.total;
|
|||
|
|
Utils.log(`log upload progress ${total - remain}/${total}`);
|
|||
|
|
if (remain === 0) {
|
|||
|
|
wx.hideLoading();
|
|||
|
|
wx.showToast({
|
|||
|
|
title: `上传成功`,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
wx.showLoading({
|
|||
|
|
mask: true,
|
|||
|
|
title: `${((total - remain) / total * 100).toFixed(2)}%`,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
LogUploader.on("error"), e => {
|
|||
|
|
wx.hideLoading();
|
|||
|
|
wx.showToast({
|
|||
|
|
title: `上传失败: ${e}`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
LogUploader.scheduleTasks(tasks);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 上传日志回调
|
|||
|
|
*/
|
|||
|
|
onSubmitLog: function() {
|
|||
|
|
let page = this;
|
|||
|
|
let mediaAction = this.isBroadcaster() ? "下麦" : "上麦"
|
|||
|
|
wx.showActionSheet({
|
|||
|
|
itemList: [mediaAction, "上传日志"],
|
|||
|
|
success: res => {
|
|||
|
|
let tapIndex = res.tapIndex;
|
|||
|
|
if (tapIndex == 0) {
|
|||
|
|
if (this.isBroadcaster()) {
|
|||
|
|
this.becomeAudience().then(() => {
|
|||
|
|
this.removeMedia(this.uid);
|
|||
|
|
}).catch(e => {
|
|||
|
|
Utils.log(`switch to audience failed ${e.stack}`);
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
let ts = new Date().getTime();
|
|||
|
|
this.becomeBroadcaster().then(url => {
|
|||
|
|
this.addMedia(0, this.uid, url, {
|
|||
|
|
key: ts
|
|||
|
|
});
|
|||
|
|
}).catch(e => {
|
|||
|
|
Utils.log(`switch to broadcaster failed ${e.stack}`);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else if (tapIndex === 1) {
|
|||
|
|
this.setData({
|
|||
|
|
debug: !this.data.debug
|
|||
|
|
})
|
|||
|
|
wx.showModal({
|
|||
|
|
title: '遇到使用问题?',
|
|||
|
|
content: '点击确定可以上传日志，帮助我们了解您在使用过程中的问题',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确定')
|
|||
|
|
page.uploadLogs();
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取屏幕尺寸以用于之后的视窗计算
|
|||
|
|
*/
|
|||
|
|
initLayouter: function() {
|
|||
|
|
// get window size info from systemInfo
|
|||
|
|
const systemInfo = app.globalData.systemInfo;
|
|||
|
|
// 64 is the height of bottom toolbar
|
|||
|
|
this.layouter = new Layouter(systemInfo.windowWidth, systemInfo.windowHeight - 64);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化sdk推流
|
|||
|
|
*/
|
|||
|
|
initAgoraChannel: function(uid, channel) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
let client = {}
|
|||
|
|
if (this.testEnv) {
|
|||
|
|
client = new AgoraMiniappSDK.Client({
|
|||
|
|
servers: ["wss://miniapp.agoraio.cn/120-131-14-112/api"]
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
client = new AgoraMiniappSDK.Client()
|
|||
|
|
}
|
|||
|
|
//subscribe stream events
|
|||
|
|
this.subscribeEvents(client);
|
|||
|
|
AgoraMiniappSDK.LOG.onLog = (text) => {
|
|||
|
|
// callback to expose sdk logs
|
|||
|
|
Utils.log(text);
|
|||
|
|
};
|
|||
|
|
AgoraMiniappSDK.LOG.setLogLevel(-1);
|
|||
|
|
this.client = client;
|
|||
|
|
client.init(APPID, () => {
|
|||
|
|
Utils.log(`client init success`);
|
|||
|
|
// pass key instead of undefined if certificate is enabled
|
|||
|
|
client.join(undefined, channel, uid, () => {
|
|||
|
|
client.setRole(this.role);
|
|||
|
|
Utils.log(`client join channel success`);
|
|||
|
|
//and get my stream publish url
|
|||
|
|
if (this.isBroadcaster()) {
|
|||
|
|
client.publish(url => {
|
|||
|
|
Utils.log(`client publish success`);
|
|||
|
|
resolve(url);
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client publish failed: ${e.code} ${e.reason}`);
|
|||
|
|
reject(e)
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
resolve();
|
|||
|
|
}
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client join channel failed: ${e.code} ${e.reason}`);
|
|||
|
|
reject(e)
|
|||
|
|
})
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client init failed: ${e} ${e.code} ${e.reason}`);
|
|||
|
|
reject(e);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
reinitAgoraChannel: function(uid, channel) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
let client = {}
|
|||
|
|
if (this.testEnv) {
|
|||
|
|
client = new AgoraMiniappSDK.Client({
|
|||
|
|
servers: ["wss://miniapp.agoraio.cn/120-131-14-112/api"]
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
client = new AgoraMiniappSDK.Client()
|
|||
|
|
}
|
|||
|
|
//subscribe stream events
|
|||
|
|
this.subscribeEvents(client);
|
|||
|
|
AgoraMiniappSDK.LOG.onLog = (text) => {
|
|||
|
|
// callback to expose sdk logs
|
|||
|
|
Utils.log(text);
|
|||
|
|
};
|
|||
|
|
AgoraMiniappSDK.LOG.setLogLevel(-1);
|
|||
|
|
let uids = this.data.media.map(item => {
|
|||
|
|
return item.uid;
|
|||
|
|
});
|
|||
|
|
this.client = client;
|
|||
|
|
client.setRole(this.role);
|
|||
|
|
client.init(APPID, () => {
|
|||
|
|
Utils.log(`client init success`);
|
|||
|
|
// pass key instead of undefined if certificate is enabled
|
|||
|
|
Utils.log(`rejoin with uids: ${JSON.stringify(uids)}`);
|
|||
|
|
client.rejoin(undefined, channel, uid, uids, () => {
|
|||
|
|
Utils.log(`client join channel success`);
|
|||
|
|
if (this.isBroadcaster()) {
|
|||
|
|
client.publish(url => {
|
|||
|
|
Utils.log(`client publish success`);
|
|||
|
|
resolve(url);
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client publish failed: ${e.code} ${e.reason}`);
|
|||
|
|
reject(e)
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
resolve();
|
|||
|
|
}
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client join channel failed: ${e.code} ${e.reason}`);
|
|||
|
|
reject(e)
|
|||
|
|
})
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client init failed: ${e} ${e.code} ${e.reason}`);
|
|||
|
|
reject(e);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* return player component via uid
|
|||
|
|
*/
|
|||
|
|
getPlayerComponent: function(uid) {
|
|||
|
|
const agoraPlayer = this.selectComponent(`#rtc-player-${uid}`);
|
|||
|
|
return agoraPlayer;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* return pusher component
|
|||
|
|
*/
|
|||
|
|
getPusherComponent: function() {
|
|||
|
|
const agorapusher = this.selectComponent(`#rtc-pusher`);
|
|||
|
|
return agorapusher;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
becomeBroadcaster: function() {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
if (!this.client) {
|
|||
|
|
return reject(new Error("no client available"))
|
|||
|
|
}
|
|||
|
|
let client = this.client
|
|||
|
|
this.role = "broadcaster"
|
|||
|
|
client.setRole(this.role, ({updateURL}) => {
|
|||
|
|
Utils.log(`client switching role to ${this.role}`);
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
client.publish(updateURL => {
|
|||
|
|
Utils.log(`client publish success`);
|
|||
|
|
resolve(updateURL);
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client publish failed: ${e.code} ${e.reason}`);
|
|||
|
|
reject(e)
|
|||
|
|
});
|
|||
|
|
}, 2000)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
becomeAudience: function() {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
if (!this.client) {
|
|||
|
|
return reject(new Error("no client available"))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let client = this.client
|
|||
|
|
client.unpublish(() => {
|
|||
|
|
Utils.log(`client unpublish success`);
|
|||
|
|
this.role = "audience"
|
|||
|
|
Utils.log(`client switching role to ${this.role}`);
|
|||
|
|
client.setRole(this.role)
|
|||
|
|
resolve();
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`client unpublish failed: ${e.code} ${e.reason}`);
|
|||
|
|
reject(e)
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* reconnect when bad things happens...
|
|||
|
|
*/
|
|||
|
|
reconnect: function() {
|
|||
|
|
wx.showToast({
|
|||
|
|
title: `尝试恢复链接...`,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 5000
|
|||
|
|
});
|
|||
|
|
// always destroy client first
|
|||
|
|
// *important* miniapp supports 2 websockets maximum at same time
|
|||
|
|
// do remember to destroy old client first before creating new ones
|
|||
|
|
this.client && this.client.destroy();
|
|||
|
|
this.reconnectTimer = setTimeout(() => {
|
|||
|
|
let uid = this.uid;
|
|||
|
|
let channel = this.channel;
|
|||
|
|
this.reinitAgoraChannel(uid, channel).then(url => {
|
|||
|
|
Utils.log(`channel: ${channel}, uid: ${uid}`);
|
|||
|
|
Utils.log(`pushing ${url}`);
|
|||
|
|
let ts = new Date().getTime();
|
|||
|
|
|
|||
|
|
if (this.isBroadcaster()) {
|
|||
|
|
if (this.hasMedia(0, this.uid)) {
|
|||
|
|
// pusher already exists in media list
|
|||
|
|
this.updateMedia(this.uid, {
|
|||
|
|
url: url,
|
|||
|
|
key: ts,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// pusher not exists in media list
|
|||
|
|
Utils.log(`pusher not yet exists when rejoin...adding`);
|
|||
|
|
this.addMedia(0, this.uid, url, {
|
|||
|
|
key: ts
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).catch(e => {
|
|||
|
|
Utils.log(`reconnect failed: ${e}`);
|
|||
|
|
return this.reconnect();
|
|||
|
|
});
|
|||
|
|
}, 1 * 1000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 如果
|
|||
|
|
*/
|
|||
|
|
isBroadcaster: function() {
|
|||
|
|
return this.role === "broadcaster";
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 注册stream事件
|
|||
|
|
*/
|
|||
|
|
subscribeEvents: function(client) {
|
|||
|
|
/**
|
|||
|
|
* sometimes the video could be rotated
|
|||
|
|
* this event will be fired with ratotion
|
|||
|
|
* angle so that we can rotate the video
|
|||
|
|
* NOTE video only supportes vertical or horizontal
|
|||
|
|
* in case of 270 degrees, the video could be
|
|||
|
|
* up side down
|
|||
|
|
*/
|
|||
|
|
client.on("video-rotation", (e) => {
|
|||
|
|
Utils.log(`video rotated: ${e.rotation} ${e.uid}`)
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const player = this.getPlayerComponent(e.uid);
|
|||
|
|
player && player.rotate(e.rotation);
|
|||
|
|
}, 1000);
|
|||
|
|
});
|
|||
|
|
/**
|
|||
|
|
* fired when new stream join the channel
|
|||
|
|
*/
|
|||
|
|
client.on("stream-added", e => {
|
|||
|
|
let uid = e.uid;
|
|||
|
|
const ts = new Date().getTime();
|
|||
|
|
Utils.log(`stream ${uid} added`);
|
|||
|
|
/**
|
|||
|
|
* subscribe to get corresponding url
|
|||
|
|
*/
|
|||
|
|
client.subscribe(uid, (url, rotation) => {
|
|||
|
|
Utils.log(`stream ${uid} subscribed successful`);
|
|||
|
|
let media = this.data.media || [];
|
|||
|
|
let matchItem = null;
|
|||
|
|
for (let i = 0; i < media.length; i++) {
|
|||
|
|
let item = this.data.media[i];
|
|||
|
|
if (`${item.uid}` === `${uid}`) {
|
|||
|
|
//if existing, record this as matchItem and break
|
|||
|
|
matchItem = item;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!matchItem) {
|
|||
|
|
//if not existing, add new media
|
|||
|
|
this.addMedia(1, uid, url, {
|
|||
|
|
key: ts,
|
|||
|
|
rotation: rotation
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// if existing, update property
|
|||
|
|
// change key property to refresh live-player
|
|||
|
|
this.updateMedia(matchItem.uid, {
|
|||
|
|
url: url,
|
|||
|
|
key: ts,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, e => {
|
|||
|
|
Utils.log(`stream subscribed failed ${e} ${e.code} ${e.reason}`);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* remove stream when it leaves the channel
|
|||
|
|
*/
|
|||
|
|
client.on("stream-removed", e => {
|
|||
|
|
let uid = e.uid;
|
|||
|
|
Utils.log(`stream ${uid} removed`);
|
|||
|
|
this.removeMedia(uid);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* when bad thing happens - we recommend you to do a
|
|||
|
|
* full reconnect when meeting such error
|
|||
|
|
* it's also recommended to wait for few seconds before
|
|||
|
|
* reconnect attempt
|
|||
|
|
*/
|
|||
|
|
client.on("error", err => {
|
|||
|
|
let errObj = err || {};
|
|||
|
|
let code = errObj.code || 0;
|
|||
|
|
let reason = errObj.reason || "";
|
|||
|
|
Utils.log(`error: ${code}, reason: ${reason}`);
|
|||
|
|
let ts = new Date().getTime();
|
|||
|
|
if (code === 501 || code === 904) {
|
|||
|
|
this.reconnect();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* there are cases when server require you to update
|
|||
|
|
* player url, when receiving such event, update url into
|
|||
|
|
* corresponding live-player, REMEMBER to update key property
|
|||
|
|
* so that live-player is properly refreshed
|
|||
|
|
* NOTE you can ignore such event if it's for pusher or happens before
|
|||
|
|
* stream-added
|
|||
|
|
*/
|
|||
|
|
client.on('update-url', e => {
|
|||
|
|
Utils.log(`update-url: ${JSON.stringify(e)}`);
|
|||
|
|
let uid = e.uid;
|
|||
|
|
let url = e.url;
|
|||
|
|
let ts = new Date().getTime();
|
|||
|
|
if (`${uid}` === `${this.uid}`) {
|
|||
|
|
// if it's not pusher url, update
|
|||
|
|
Utils.log(`ignore update-url`);
|
|||
|
|
} else {
|
|||
|
|
this.updateMedia(uid, {
|
|||
|
|
url: url,
|
|||
|
|
key: ts,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// token 过期
|
|||
|
|
// 开启此监听需要获取 2.4.7 版本 sdk
|
|||
|
|
// client.on("onTokenPrivilegeDidExpire", () => {
|
|||
|
|
// console.log('当前 token 已过期，请更新 token 并重新加入频道')
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|