@jp-web/ts-sdk/output/webrtc/conference/debugTools/index.js

视频客服，视频会议Web端及微信小程序端SDK

var environmentAddressInput = document.getElementById('environment-address');
var tokenAccountInput = document.getElementById('token-account');
var appKeyInput = document.getElementById('appKey');
var clientListInfo = document.getElementById('client-list');
var stopConAllBtn = document.getElementById('stop-all');
var joinConAllBtn = document.getElementById('join-all');
var leaveConAllBtn = document.getElementById('leave-all');
var openLocalStreamBtn = document.getElementById('open-local-stream');
var openRemoteStreamBtn = document.getElementById('open-remote-stream');
var originRoomNumberInput = document.getElementById('origin-room-number');
var countdownInput = document.getElementById('count-down');

var {JuphoonRTCConference, Reporter, LoggerLevel, ConferenceEventType} = JuphoonRTCConferenceSDK;
var client, videoLayout, recorder, socketState, tokenList = [], clientList = [], roomNumList = [], getTokenList = [],
  timerList = [], secondsList = [];

//将config.js中设置的环境配入
environmentAddressInput.value = publicConfig.webacdEnvironment;
appKeyInput.value = publicConfig.appKey;

Reporter.setLogLevel(LoggerLevel.DEBUG);
JuphoonRTCConference.setConfig({address: environmentAddressInput.value});

//获取token
function getToken() {
  for (let i = 0; i < tokenAccountInput.value; i++) {
    var getToken = JuphoonRTCConference.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() {
  //设置会议房间号的初始值
  roomNum = parseInt(originRoomNumberInput.value) - 1;
  //重置全部系列按钮为可点击
  reDisabledAllBtn();
  for (let i = 0; i < tokenList.length; i++) {
    client = JuphoonRTCConference.createConferenceClient(appKeyInput.value, tokenList[i]);
    clientList.push(client);
    console.warn(client);
    roomNumList.push(roomNum);
    roomNum += 1;
    secondsList.push(parseInt(countdownInput.value));
    setSocketState(i);
    clientListInfo.innerHTML += `<li>
                                    <b>username: </b><span id="username[${i}]">null</span>
                                    <b>roomNum: </b>${roomNum}
                                    <b>client状态: </b><span id="client-state[${i}]">${clientList[i]._state}</span>
                                    <b>socket状态: </b><span id="socket-state[${i}]">${socketState}</span>
                                    <b>离开会议倒计时: </b><span id="leaveCountdown[${i}]">0</span>
                                    <button id="join-con[${i}]" onclick="joinCon(${i}, clientList[${i}], roomNumList[${i}])">加入会议</button>
                                    <button id="leave-con[${i}]" onclick="leaveCon(${i}, clientList[${i}], roomNumList[${i}])">离开会议</button>
                                    <button id="stop-con[${i}]" onclick="stopCon(${i}, clientList[${i}], roomNumList[${i}])">结束会议</button>
                                    <button id="local-stream-btn[${i}]" onclick="openLocalStream(${i}, clientList[${i}])">打开本地画面</button>
                                    <div id="local-stream[${i}]" style="width: 50px;height: 50px;vertical-align: top;display: none;"></div>
                                    <button id="remote-stream-btn[${i}]" onclick="openRemoteStream(${i}, clientList[${i}])">打开远端画面</button>
                                    <div id="remote-stream[${i}]" style="width: 50px;height: 50px;vertical-align: top;display: none;"></div>
                                 </li>`;
    client.addEventListener(ConferenceEventType.CONFERENCE_JOIN, (ev) => {
      console.warn(ev);
    });
    client.addEventListener(ConferenceEventType.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(ConferenceEventType.ERROR, (ev) => {
      console.warn(ev);
      switch (ev.error) {
        case ConferenceErrorType.LOGIN_PASSWORD_ERROR:
          alert('用户名或密码错误');
          break;
      }
    })
  }
}

//加入会议
function joinCon(i, client, roomNum) {
  document.getElementById(`join-con[${i}]`).disabled = true;
  document.getElementById(`username[${i}]`).innerHTML = client.clientInfo.username;
  client.join(roomNum.toString(), true, {
    nickName: client.socket.headers.username,
    accountName: 'test' + Math.floor(Math.random() * 1000000),
    accountPwd: '123',
    mtcConfPasswordKey: '123',
    enableRecord: false,
    isCcConf: 0
  })
  .catch(reason => {
    reset(true);
    alert('加入会议失败，请检查参数');
  });
  client.addEventListener(ConferenceEventType.CONFERENCE_JOIN, (ev) => {
    //调用定时器并开始倒计时
    setTimeCountdown(i, client, roomNum);
    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;
    console.log('【加入会议】 用户名:' + client.clientInfo.username + '房间号:' + roomNum);
    videoLayout = client.videoLayout;
    recorder = client.recorder;
  });
  client.addEventListener(ConferenceEventType.RECORD_DELIVERY_JOIN, (ev) => {
    console.warn(ev);
  });
  client.addEventListener(ConferenceEventType.CONFERENCE_LEAVE, (ev) => {
    console.warn(ev);
    client._localStream && client._localStream.stop();
    client._remoteStream && client._remoteStream.stop();
    client.destroy();
    setSocketState(i);
    document.getElementById(`client-state[${i}]`).innerHTML = client._state;
    document.getElementById(`socket-state[${i}]`).innerHTML = socketState;
  });
  client.addEventListener(ConferenceEventType.CONFERENCE_DESTROY, (ev) => {
    console.warn(ev);
    client._localStream && client._localStream.stop();
    client._remoteStream && client._remoteStream.stop();
    client.destroy();
    setSocketState(i);
    document.getElementById(`client-state[${i}]`).innerHTML = client._state;
    document.getElementById(`socket-state[${i}]`).innerHTML = socketState;
  });
}

//离开会议
function leaveCon(i, client, roomNum) {
  //清除定时器并重置倒计时
  clearTimeCountdown(i);
  document.getElementById(`leave-con[${i}]`).disabled = true;
  client.leave();
  var username = client.clientInfo.username;
  console.log('【离开会议】 用户名:' + username + '房间号:' + roomNum);
}

//结束会议
function stopCon(i, client, roomNum) {
  document.getElementById(`stop-con[${i}]`).disabled = true;
  client.stop();
  var username = client.clientInfo.username;
  console.log('【结束会议】 用户名:' + username + '房间号:' + roomNum);
}

//开启本地视频
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 stopConAll() {
  stopConAllBtn.disabled = true;
  for (let i = 0; i < tokenList.length; i++) {
    stopCon(i, clientList[i], roomNumList[i]);
  }
}

//会议全部加入
function joinConAll() {
  joinConAllBtn.disabled = true;
  for (let i = 0; i < tokenList.length; i++) {
    joinCon(i, clientList[i], roomNumList[i]);
  }
}

//会议全部离开
function leaveConAll() {
  leaveConAllBtn.disabled = true;
  for (let i = 0; i < tokenList.length; i++) {
    leaveCon(i, clientList[i], roomNumList[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]);
  }
}

//点击创建client设置全部系列按钮可以点击
function reDisabledAllBtn() {
  stopConAllBtn.disabled = joinConAllBtn.disabled = leaveConAllBtn.disabled
    = openLocalStreamBtn.disabled = openRemoteStreamBtn.disabled = false;
}

//清空数据
function clearInfo() {
  tokenList = [];
  clientList = [];
  roomNumList = [];
  getTokenList = [];
  timerList = [];
  stopConAllBtn.disabled = joinConAllBtn.disabled = leaveConAllBtn.disabled
    = openLocalStreamBtn.disabled = openRemoteStreamBtn.disabled = true;
  clientListInfo.innerHTML = '';
  countdownInput.value = 30;
  tokenAccountInput.value = 1;
}

//设置倒计时
function setTimeCountdown(i, client, roomNum) {
  if (secondsList[i] === parseInt(countdownInput.value)) {
    timerList[i] = null;
    timerList[i] = setInterval(() => {
      secondsList[i]--;
      document.getElementById(`leaveCountdown[${i}]`).innerHTML = secondsList[i];
      if (secondsList[i] === 0) {
        clearInterval(timerList[i]);
        leaveCon(i, client, roomNum);
      }
    }, 1000);
  }
}

//清除倒计时
function clearTimeCountdown(i) {
  clearInterval(timerList[i]);
  document.getElementById(`leaveCountdown[${i}]`).innerHTML = 0;
}