@jp-web/ts-sdk
Version:
视频客服，视频会议Web端及微信小程序端SDK
252 lines (234 loc) • 9.73 kB
JavaScript
var environmentAddressInput = document.getElementById('environment-address');
var appKeyInput = document.getElementById('appKey');
var clientInfoInput = document.getElementById('client-list');
var allJoinCon = document.getElementById('all-join-con');
var allLeaveCon = document.getElementById('all-leave-con');
var allStopCon = document.getElementById('all-stop-con');
var videoAddressInput = document.getElementById('video-address-input');
var videoSource = document.getElementById('video-source');
var roomMemberCountInput = document.getElementById('room-member-count');
var roomCountInput = document.getElementById('room-count');
var clientAccountInput = document.getElementById('client-account');
var originRoomNumberInput = document.getElementById('origin-room-number');
var countDownInput = document.getElementById('count-down');
var {JuphoonWeChatConference, Platform, PlatformType, ConferenceEventType, ConferenceErrorType} = JuphoonWeChatConferenceSDK;
var token, client, tokenList = [], clientList = [], roomNumList = [], roomNum, accountName = '123', accountPwd = '123',
index, socketState, getTokenList = [], roomMemberCount, roomCount, timer, timerList = [], seconds,
secondsList = [];
environmentAddressInput.value = publicConfig.webacdEnvironment;
appKeyInput.value = publicConfig.appKey;
//将sdk导出的Platform的类的类型设置为WEB
Platform.setPlatformType(PlatformType.WEB);
//设置服务环境
JuphoonWeChatConference.setConfig({address: environmentAddressInput.value});
function getToken() {
// roomMemberCount = parseInt(roomMemberCountInput.value);
// roomCount = parseInt(roomCountInput.value);
// const memberCount = roomMemberCount * roomCount;
// for (var i = 0; i < memberCount; i++) {
for (var i = 0; i < clientAccountInput.value; i++) {
const getToken = JuphoonWeChatConference.getToken()
.then(_token => {
token = _token;
tokenList.push(token);
})
.catch(reason => console.error(reason));
getTokenList.push(getToken);
}
Promise.all(getTokenList).then(() => {
console.warn(clientList);
createClient();
}).catch(err => {
console.error(err);
})
}
//创建client
function createClient() {
//设置会议房间号的初始值
roomNum = parseInt(originRoomNumberInput.value - 1);
//设置倒计时秒数的初始值
seconds = parseInt(countDownInput.value);
console.log(seconds);
for (let i = 0; i < tokenList.length; i++) {
JuphoonWeChatConference.config.socket = null;
client = JuphoonWeChatConference.createConferenceClient(appKeyInput.value, tokenList[i], publicConfig.webacdEnvironment + '/webrtc');
console.log(client);
clientList.push(client);
client.login({accountName: 'test' + Math.floor(Math.random() * 1000000).toString(), accountPwd: accountPwd});
//登录事件监听
client.addEventListener(ConferenceEventType.LOGIN, (ev) => {
console.warn(ev);
for (let i in clientList) {
//按钮都变得可以操作
document.getElementById(`add-btn[${i}]`).disabled = false;
document.getElementById(`leave-btn[${i}]`).disabled = false;
document.getElementById(`stop-btn[${i}]`).disabled = false;
allJoinCon.disabled = allLeaveCon.disabled = allStopCon.disabled = false;
}
});
//登录错误监听
client.addEventListener(ConferenceEventType.ERROR, (ev) => {
switch (ev.error) {
case ConferenceErrorType.LOGIN_PASSWORD_ERROR:
alert('用户名或密码错误');
}
})
//创建随机房间号
// if (i % roomMemberCount === 0) {
// roomNum = Math.floor(Math.random() * 999999);
// }
roomNumList.push(roomNum);
roomNum += 1;
//添加倒计时时间到数组中
secondsList.push(seconds);
//添加定时器到数组中
timerList.push(timer);
//调用设置socket状态的函数
setSocketState(i);
clientInfoInput.innerHTML += `<li id="client-info[${i}]" style="border: 1px solid #8D8D8D;margin-bottom: 15px;">
<b>username: </b>${clientList[i].socket.headers.username},
<b>roomNum: </b>${roomNum},
<span id="client-state[${i}]">
<b>client状态: </b>${clientList[i]._state},
</span>
<span id="socket-state[${i}]">
<b>socket状态: </b>${socketState}
</span>
<b>离开会议倒计时: </b>
<span id="count-down[${i}]">0</span>
<button disabled id="add-btn[${i}]" onclick="joinCon(${i}, clientList[${i}], roomNumList[${i}])">加入会议</button>
<button disabled id="leave-btn[${i}]" onclick="leaveCon(${i}, clientList[${i}], roomNumList[${i}])">离开会议</button>
<button disabled id="stop-btn[${i}]" onclick="stopCon(${i}, clientList[${i}], roomNumList[${i}])">结束会议</button>
<div id="pull-push-address[${i}]" style="display: inline-block;"></div>
<br>
</li>`;
client.addEventListener(ConferenceEventType.SOCKET_STATE_CHANGE, () => {
setSocketState(i);
document.getElementById(`socket-state[${i}]`).innerHTML = `<b>socket状态: </b>${socketState}`;
})
}
}
//加入会议的点击事件
function joinCon(i, client, roomNum) {
//设置定时器
setTimeCountdown(i, client, roomNum);
document.getElementById(`add-btn[${i}]`).disabled = true;
var username = client.socket.headers.username;
console.log('【创建会议】 用户名:' + username + '房间号:' + roomNum);
client.join(roomNum.toString(), true, {displayName: username, conferencePassword: 123, enableRecord: false})
.then(() => {
//获取拉流地址
setSocketState(i);
document.getElementById(`pull-push-address[${i}]`).innerHTML = `<b>pullUrl: </b>${clientList[i].clientInfo.confDeliveryInfo.pullUrl}`;
document.getElementById(`client-state[${i}]`).innerHTML = `<b>client状态: </b>${clientList[i]._state},`;
document.getElementById(`socket-state[${i}]`).innerHTML = `<b>socket状态: </b>${socketState}`;
})
.catch(reason => {
console.log(reason);
alert('请输入会议号');
});
}
//离开会议的点击事件
function leaveCon(i, client, roomNum) {
//清除定时器并重置倒计时
clearTimeCountdown(i);
document.getElementById(`leave-btn[${i}]`).disabled = true;
var username = client.socket.headers.username;
console.log('【离开会议】 用户名:' + username + '房间号:' + roomNum);
client.leave();
client.addEventListener(ConferenceEventType.CONFERENCE_LEAVE, (ev) => {
console.warn(ev);
})
}
//结束会议的点击事件
function stopCon(i, client, roomNum) {
document.getElementById(`stop-btn[${i}]`).disabled = true;
var username = client.socket.headers.username;
console.log('【结束会议】 用户名:' + username + '房间号:' + roomNum);
client.stop();
}
//全部加入会议
function allJoinConference() {
allJoinCon.disabled = true;
console.log('【全部加入会议】');
for (let i in clientList) {
joinCon(i, clientList[i], roomNumList[i]);
}
}
//全部离开会议
function allLeaveConference() {
allLeaveCon.disabled = true;
console.log('【全部离开会议】');
for (let i in clientList) {
leaveCon(i, clientList[i], roomNumList[i]);
}
}
//全部结束会议
function allStopConference() {
allStopCon.disabled = true;
console.log('【全部结束会议】');
for (let i in clientList) {
stopCon(i, clientList[i], roomNumList[i]);
}
}
//设置socketState的状态
function setSocketState(i) {
switch (clientList[i].socket.state) {
case 0:
socketState = '正在连接'
break;
case 1:
socketState = '连接已打开'
break;
case 2:
socketState = '正在关闭'
break;
case 3:
socketState = '已关闭'
break;
case 4:
socketState = '正在重连'
break;
}
}
//设置video的地址
function setVideoAddress() {
videojs('my-player').src(videoAddressInput.value);
videojs('my-player').play();
}
//清除数据
function clearInfo() {
// roomMemberCountInput.value = '2';
// roomCountInput.value = '1';
clientAccountInput.value = 1;
countDownInput.value = 60;
tokenList = [];
clientList = [];
roomNumList = [];
timerList = [];
secondsList = [];
clientInfoInput.innerHTML = '';
allJoinCon.disabled = allLeaveCon.disabled = allStopCon.disabled = true;
}
//设置定时器
function setTimeCountdown(i, client, roomNum) {
if (secondsList[i] === seconds) {
timerList[i] = null;
timerList[i] = setInterval(() => {
secondsList[i]--;
document.getElementById(`count-down[${i}]`).innerHTML = secondsList[i];
if (secondsList[i] === 0) {
//清除定时器
clearInterval(timerList[i]);
//调用离开会议的函数
leaveCon(i, client, roomNum);
}
}, 1000);
}
}
//清除定时器并重置倒计时
function clearTimeCountdown(i) {
//清除定时器
clearInterval(timerList[i]);
document.getElementById(`count-down[${i}]`).innerHTML = 0;
}