@jp-web/ts-sdk
Version:
视频客服，视频会议Web端及微信小程序端SDK
260 lines (241 loc) • 9.53 kB
JavaScript
var environmentAddressInput = document.getElementById('environment-address');
var appKeyInput = document.getElementById('appKey');
var clientListInfo = document.getElementById('client-list');
var callConAllBtn = document.getElementById('call-all');
var termConAllBtn = document.getElementById('term-all');
var openLocalStreamBtn = document.getElementById('open-local-stream');
var openRemoteStreamBtn = document.getElementById('open-remote-stream');
var clientCountInput = document.getElementById('client-count');
var groupNumberInput = document.getElementById('group-number');
var {JuphoonRTCGuest, Reporter, LoggerLevel, GuestEventType} = JuphoonRTCGuestSDK;
var videoLayout, recorder, socketState, tokenList = [], clientList = [], roomNumList = [], getTokenList = [], clientCount, groupNumber;
//将config.js中设置的环境配入
environmentAddressInput.value = publicConfig.webacdEnvironment;
appKeyInput.value = publicConfig.appKey;
Reporter.setLogLevel(LoggerLevel.DEBUG);
JuphoonRTCGuest.setConfig({address: environmentAddressInput.value});
//获取token
function getToken() {
clientCount = parseInt(clientCountInput.value);
groupNumber = groupNumberInput.value;
const memberCount = clientCount;
for (var i = 0; i < memberCount; i++) {
var getToken = JuphoonRTCGuest.getToken()
.then(_token => {
tokenList.push(_token);
})
.catch(reason => {
console.error(reason);
})
getTokenList.push(getToken);
}
Promise.all(getTokenList).then(() => {
createClients();
}).catch((error) => {
console.error(error);
});
}
//创建client
function createClients() {
for (let i = 0; i < tokenList.length; i++) {
JuphoonRTCGuest.config.socket = null;
const client = JuphoonRTCGuest.createGuestClient(appKeyInput.value, tokenList[i]);
client.login()
.then(() => {
for (let i in clientList) {
//按钮都变得可以操作
document.getElementById(`call-con[${i}]`).disabled = false;
document.getElementById(`term-con[${i}]`).disabled = false;
document.getElementById(`local-stream-btn[${i}]`).disabled = false;
document.getElementById(`remote-stream-btn[${i}]`).disabled = false;
callConAllBtn.disabled = termConAllBtn.disabled = openLocalStreamBtn.disabled = openRemoteStreamBtn.disabled = false;
}
});
client.addEventListener(GuestEventType.CALL_STATE_CHANGE, (ev) => {
console.log(ev);
setSocketState(i);
document.getElementById(`username[${i}]`).innerHTML = client.clientInfo.username;
document.getElementById(`client-state[${i}]`).innerHTML = client._state;
document.getElementById(`socket-state[${i}]`).innerHTML = socketState;
});
client.addEventListener(GuestEventType.LOGIN, (ev) => {
console.log(ev, client);
document.getElementById(`client-state[${i}]`).innerHTML = client._state;
});
clientList.push(client);
setSocketState(i);
clientListInfo.innerHTML += `<li>
<b>username: </b><span id="username[${i}]">null</span>
<b>group number: </b>${groupNumber}
<b>client状态: </b><span id="client-state[${i}]">${clientList[i]._state}</span>
<b>socket状态: </b><span id="socket-state[${i}]">${socketState}</span>
<button id="call-con[${i}]" onclick="callCon(${i}, clientList[${i}])" disabled>呼叫</button>
<button id="term-con[${i}]" onclick="termCon(${i}, clientList[${i}])" disabled>挂断</button>
<button id="local-stream-btn[${i}]" onclick="openLocalStream(${i}, clientList[${i}])" disabled>打开本地画面</button>
<div id="local-stream[${i}]" style="width: 150px;height: 100px;vertical-align: top;display: none;"></div>
<button id="remote-stream-btn[${i}]" onclick="openRemoteStream(${i}, clientList[${i}])" disabled>打开远端画面</button>
<div id="remote-stream[${i}]" style="width: 150px;height: 100px;vertical-align: top;display: none;"></div>
</li>`;
client.addEventListener(GuestEventType.CONFERENCE_JOIN, (ev) => {
console.warn(ev);
});
client.addEventListener(GuestEventType.SOCKET_STATE_CHANGE, (ev) => {
console.warn(ev);
setSocketState(i);
document.getElementById(`socket-state[${i}]`).innerHTML = socketState;
});
client.conferenceParticipantUpdate = (ev) => {
console.log(ev);
};
client.conferenceParticipantLeft = (ev) => {
console.log(ev);
};
client.addEventListener(GuestEventType.ERROR, (ev) => {
console.warn(ev);
switch (ev.error) {
case ConferenceErrorType.LOGIN_PASSWORD_ERROR:
alert('用户名或密码错误');
break;
}
})
}
}
//加入会议
function callCon(i, client) {
document.getElementById(`call-con[${i}]`).disabled = true;
document.getElementById(`username[${i}]`).innerHTML = client.clientInfo.username;
client.call(groupNumber, {
extraParam: '',
})
.catch(() => {
alert('加入会议失败，请检查参数');
});
client.addEventListener(GuestEventType.CONFERENCE_LEAVE, (ev) => {
console.warn(ev);
setSocketState(i);
document.getElementById(`client-state[${i}]`).innerHTML = client._state;
document.getElementById(`socket-state[${i}]`).innerHTML = socketState;
client._remoteStream && client._remoteStream.stop();
client._localStream && client._localStream.stop();
});
client.addEventListener(GuestEventType.CONFERENCE_DESTROY, (ev) => {
console.warn(ev);
setSocketState(i);
document.getElementById(`client-state[${i}]`).innerHTML = client._state;
document.getElementById(`socket-state[${i}]`).innerHTML = socketState;
});
}
// 挂断
function termCon(i, client) {
document.getElementById(`term-con[${i}]`).disabled = true;
client.term();
client._remoteStream && client._remoteStream.stop();
client._localStream && client._localStream.stop();
var username = client.clientInfo.username;
console.log('【挂断】 用户名:' + username + '组号:' + groupNumber);
}
//开启本地视频
function openLocalStream(i, client) {
document.getElementById(`local-stream-btn[${i}]`).disabled = true;
document.getElementById(`local-stream[${i}]`).style.display = "inline-block";
client.requestVideo(null, '0x100')
.catch(reason => console.error(reason));
client.startCameraVideo()
.then(stream => {
stream.start(`local-stream[${i}]`);
})
.catch(err => {
switch (err.type) {
case 'userMediaRequestReject':
alert('用户拒绝了程序获取媒体设备的请求');
break;
case 'userMediaAbort':
alert('媒体设备硬件异常');
break;
case 'userMediaOverConstrained':
alert('用户媒体设备硬件不支持');
break;
case 'userMediaNotFound':
alert('找不到满足请求参数的媒体类型');
break;
case 'userMediaNotReadable':
alert('媒体设备被占用');
break;
case 'userMediaNotSupport':
alert(err.constraint + '无法被满足');
break;
case 'userMediaPermissionDenied':
alert('用户禁止在此界面使用媒体设备');
break;
}
});
}
//开启远端视频
function openRemoteStream(i, client) {
document.getElementById(`remote-stream-btn[${i}]`).disabled = true;
document.getElementById(`remote-stream[${i}]`).style.display = "inline-block";
client.startVideo()
.then(stream => {
stream.start(`remote-stream[${i}]`)
.then(dom => {
dom.muted = false;
});
});
}
//设置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;
}
}
function callConAll() {
callConAllBtn.disabled = true;
for (let i = 0; i < tokenList.length; i++) {
callCon(i, clientList[i]);
}
}
function termConAll() {
termConAllBtn.disabled = true;
for (let i = 0; i < tokenList.length; i++) {
termCon(i, clientList[i]);
}
}
//开启全部本地视频
function openAllLocalStream() {
openLocalStreamBtn.disabled = true;
for (let i = 0; i < tokenList.length; i++) {
openLocalStream(i, clientList[i]);
}
}
//开启全部远端视频
function openAllRemoteStream() {
openRemoteStreamBtn.disabled = true;
for (let i = 0; i < tokenList.length; i++) {
openRemoteStream(i, clientList[i]);
}
}
//清空数据
function clearInfo() {
callConAllBtn.disabled = termConAllBtn.disabled
= openLocalStreamBtn.disabled = openRemoteStreamBtn.disabled = false;
tokenList = [];
clientList = [];
roomNumList = [];
clientListInfo.innerHTML = '';
roomMemberCountInput.value = '2';
roomCountInput.value = '1';
}