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

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

var startBtn = document.getElementById('start'),
  stopBtn = document.getElementById('stop'),
  joinBtn = document.getElementById('join'),
  leaveBtn = document.getElementById('leave'),
  triggerAudioOutputBtn = document.getElementById('trigger-audio-output'),
  triggerVideoInputBtn = document.getElementById('trigger-video-input'),
  triggerAudioInputBtn = document.getElementById('trigger-audio-input'),
  downloadLogBtn = document.getElementById('download-log'),
  openCameraBtn = document.getElementById('open-camera'),
  conferenceNumberInput = document.getElementById('conference-number'),
  nicknameInput = document.getElementById('nickname'),
  accountNameInput = document.getElementById('account-name'),
  passwordInput = document.getElementById('password'),
  environmentAddressInput = document.getElementById('environment-address'),
  appKeyInput = document.getElementById('appKey'),
  mtcConfPasswordKeyInput = document.getElementById('mtc-conf-password-key'),
  tokenInput = document.getElementById('token'),
  logView = document.getElementById('log'),
  mergeModeSelect = document.getElementById('mergeModeSelect'),
  intellegenceMergeModeSelect = document.getElementById('intellegenceMergeModeSelect'),
  screenShareModeSelect = document.getElementById('screenShareModeSelect'),

  switchVideoInputSelect = document.getElementById('switch-video-input'),
  switchAudioInputSelect = document.getElementById('switch-audio-input'),
  switchAudioOutputSelect = document.getElementById('switch-audio-output'),

  startRemoteRecordBtn = document.getElementById('start-remote-record'),
  stopRemoteRecordBtn = document.getElementById('stop-remote-record'),
  startLocalRecordBtn = document.getElementById('start-local-record'),
  stopLocalRecordBtn = document.getElementById('stop-local-record'),

  messageTypeInput = document.getElementById('message-type'),
  messageContentInput = document.getElementById('message-content'),
  sendMessageBtn = document.getElementById('send-message'),
  snapshotBtn = document.getElementById('snapshot'),

  versionInfo = document.getElementById('version-info'),

  enableRecordInput = document.getElementById('enable-record'),

  sendAudioBitrateText = document.getElementById('send-audio-bitrate'),
  sendVideoBitrateText = document.getElementById('send-video-bitrate'),
  receiveAudioBitrateText = document.getElementById('receive-audio-bitrate'),
  receiveVideoBitrateText = document.getElementById('receive-video-bitrate'),

  enableConfCtrlCheckBox = document.getElementById('enable-conf-ctrl'),

  recordResolutionSelect = document.getElementById('record-resolution'),
  recordMergeModeSelect = document.getElementById('record-merge-mode'),
  recordVideoWidthInput = document.getElementById('record-video-width'),
  recordVideoHeightInput = document.getElementById('record-video-height'),
  recordFrameRateInput = document.getElementById('record-frame-rate'),
  recordBitrateInput = document.getElementById('record-bitrate'),
  recordFileNameInput = document.getElementById('record-file-name'),
  recordStorageProtocolInput = document.getElementById('record-storage-protocol'),
  recordremoteFileNameInput = document.getElementById('record-remote-file-name'),
  createClientBtn = document.getElementById('create-client'),
  destroyClientBtn = document.getElementById('destroy-client'),
  enableConfCtrlCheckbox = document.getElementById('enable-conf-ctrl'),

  channelIdInput = document.getElementById('channel-id'),
  queryChannelIdBtn = document.getElementById('query-channel-id'),

  roleSelect = document.getElementById('role')
;

var {JuphoonRTCConference, ConferenceEventType, ConferenceErrorType, Reporter, LoggerLevel, RenderType, WebDevicesEventType, ConferencePictureSize, RTCCoreStatsEventType, StreamEventType, SimpleRoleCompose} = JuphoonRTCConferenceSDK;
var videoLayout, devicesInfo, recorder, localStream, remoteStream, statsInfoKey;
Reporter.setLogLevel(LoggerLevel.DEBUG);
versionInfo.textContent = JSON.stringify(JuphoonRTCConference.getVersion());
// Reporter.onlog = () => {
//   logView.value = Reporter.asText();
// }
var client, token, facingMode = 'user';
var reshFlag = false;

environmentAddressInput.value = publicConfig.webacdEnvironment;
appKeyInput.value = publicConfig.appKey;

JuphoonRTCConference.setConfig({address: environmentAddressInput.value});
function getToken() {
  JuphoonRTCConference.getToken()
    .then(_token => {
      tokenInput.value = _token;
      createClientBtn.disabled = false;
      destroyClientBtn.disabled = false;
      enableConfCtrlCheckbox.disabled = false;
    })
    .catch(reason => console.error(reason));
}

function createClient() {
  client = JuphoonRTCConference
    .createConferenceClient(appKeyInput.value, tokenInput.value);

  reset(false);
  client.addEventListener(ConferenceEventType.CONFERENCE_JOIN, () => interfaceTestReset(false), {once: true});
  client.onSocketStateChange = (ev) => {
    console.log(event);
  };
  client.conferenceParticipantUpdate = (ev) => {
    console.log(event);
  };
  client.conferenceParticipantLeft = (ev) => {
    console.log(event);
  };
  client.addEventListener(ConferenceEventType.ERROR, (ev) => {
    switch (ev.error) {
      case ConferenceErrorType.LOGIN_PASSWORD_ERROR:
        alert('用户名或密码错误');
        reset(true);
        break;
    }
  })
}

function destroyClient() {
  if (!client) return;
  // client.destroy();
  reset(true);
}

function start() {
  startBtn.disabled = true;
  stopBtn.disabled = false;
  client.start(conferenceNumberInput.value, true, {
    nickName: nicknameInput.value,
    accountName: accountNameInput.value,
    accountPwd: passwordInput.value,
    mtcConfPasswordKey: mtcConfPasswordKeyInput.value,
    enableRecord: enableRecordInput.checked,
    isCcConf: enableConfCtrlCheckBox.checked ? 1 : 0,
    role: parseInt(roleSelect.value)
  })
    .catch(reason => {
      reset(true);
      alert('加入会议失败，请检查参数');
    });
  client.addEventListener(ConferenceEventType.CONFERENCE_JOIN, (ev) => {
    console.log(ev);
    videoLayout = client.videoLayout;
    recorder = client.recorder;
    client.requestVideo(null, ConferencePictureSize.SMALL)
      .catch(reason => console.error(reason));
    client.startVideo()
      .then(stream => {
        stream.start('remote-video')
          .then(videoDOM => videoDOM.muted = false);
      })
      .catch(reason => console.log(reason));
  });

  client.addEventListener(ConferenceEventType.ERROR, (ev) => {
    switch (ev.error) {
      case ConferenceErrorType.CONFERENCE_PASSWORD_ERROR:
        alert('会议密码错误');
        reset(true);
        break;
    }
  });

  client.addEventListener(ConferenceEventType.RECORD_DELIVERY_JOIN, (ev) => {
    startRemoteRecordBtn.disabled = false;
  });

  client.addEventListener(ConferenceEventType.CONFERENCE_LEAVE, () => {
    reset(true);
    interfaceTestReset(true);
    this.client.destroy();
  })

  client.addEventListener(ConferenceEventType.CONFERENCE_DESTROY, () => {
    reset(true);
    interfaceTestReset(true);
    this.client.destroy();
  })
}

function stop() {
	reshFlag = true;
  // location.reload(true)
  clearInterval(statsInfoKey);
  stopBtn.disabled = true;
  startBtn.disabled = false;
  client.stop();
  reset(true);
  interfaceTestReset(true);
}

function join() {
  joinBtn.disabled = true;
  leaveBtn.disabled = false;
  client.join(conferenceNumberInput.value, true, {
    nickName: nicknameInput.value,
    accountName: accountNameInput.value,
    accountPwd: passwordInput.value,
    conferencePassword: mtcConfPasswordKeyInput.value,
    enableRecord: enableRecordInput.checked,
    isCcConf: enableConfCtrlCheckBox.checked ? 1 : 0,
    role: parseInt(roleSelect.value)
  })
    .catch(reason => {
      reset(true);
      alert('加入会议失败，请检查参数');
    });
  client.addEventListener(ConferenceEventType.CONFERENCE_JOIN, (ev) => {
    console.log(ev);
    videoLayout = client.videoLayout;
    recorder = client.recorder;
    client.requestVideo(null, '0x100')
      .catch(reason => console.error(reason));
    client.startVideo()
      .then(stream => {
        remoteStream = stream;
        // stream.updateOptions({renderType: RenderType.COVER});
        stream.start('remote-video')
          .then(dom => {
            dom.muted = false;
          });
      });
  });

  client.addEventListener(ConferenceEventType.ERROR, (ev) => {
    switch (ev.error) {
      case ConferenceErrorType.CONFERENCE_PASSWORD_ERROR:
        alert('会议密码错误');
        reset(true);
        break;
    }
  });

  client.addEventListener(ConferenceEventType.RECORD_DELIVERY_JOIN, (ev) => {
    startRemoteRecordBtn.disabled = false;
  });

  client.addEventListener(ConferenceEventType.CONFERENCE_LEAVE, () => {
    reset(true);
    interfaceTestReset(true);
    this.client.destroy();
  })

  client.addEventListener(ConferenceEventType.CONFERENCE_DESTROY, () => {
    reset(true);
    interfaceTestReset(true);
    this.client.destroy();
  })
}

function leave() {
	reshFlag = true;
  // location.reload(true)
  clearInterval(statsInfoKey);
  leaveBtn.disabled = true;
  joinBtn.disabled = false;
  client.leave();
  reset(true);
  interfaceTestReset(true);
}

function openCamera() {
  client.startCameraVideo()
    .then(stream => {
      localStream = stream;
      stream.start('local-video');
    })
    .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;
			}
    	reset(true);
    });

  statsInfoKey = setInterval(() => {
    client.core.stats.getStats(8000)
      .then(stats => {
        sendAudioBitrateText.textContent = stats.sendAudioBitrate.toString(10);
        sendVideoBitrateText.textContent = stats.sendVideoBitrate.toString(10);
        receiveAudioBitrateText.textContent = stats.receiveAudioBitrate.toString(10);
        receiveVideoBitrateText.textContent = stats.receiveVideoBitrate.toString(10);
      });
  }, 8100);
}

var audioOutput = true, audioInput = true, videoInput = true;
function triggerAudioOutput() {
  audioOutput ? client.disableAudioOutput() : client.enableAudioOutput();
  audioOutput = !audioOutput;
}

function triggerAudioInput() {
  audioInput ? client.disableUploadAudioStream() : client.enableUploadAudioStream();
  audioInput = !audioInput;
}

function triggerVideoInput() {
  videoInput ? client.disableUploadVideoStream() : client.enableUploadVideoStream();
  videoInput = !videoInput;
}

function downloadLog() {
  Reporter.asTextFile(`${new Date().toISOString()}_${client.confProps.nickName}_${client.confProps.accountName}`, LoggerLevel.INFO);
}

function mergeModeSelectChange(value) {
  value = Number.parseInt(value);

  switch (value) {
    case 1:
    case 2:
    case 3:
    case 4:
      intellegenceMergeModeSelect.disabled = false;
      screenShareModeSelect.disabled = false;
      break;
    case 5:
      intellegenceMergeModeSelect.disabled = false;
      screenShareModeSelect.disabled = false;
      break;
  }

  mergeModeSelect.disabled = true;
  videoLayout.setMergeMode(value)
    .catch(() => {
      confirm('设置合并模式失败');
    })
    .finally(() => {
      mergeModeSelect.disabled = false;
    });
}

function intellegenceMergeModeChange(value) {
  value = Number.parseInt(value);
  intellegenceMergeModeSelect.disabled = true;
  videoLayout.setIntellegenceMergeMode(value, screenShareModeSelect.value, client.selfParticipant)
    .catch(() => {
      confirm('设置智能合并模式失败');
    })
    .finally(() => {
      intellegenceMergeModeSelect.disabled = false;
    });
}

function screenShareModeChange(value) {
  value = Number.parseInt(value);
  screenShareModeSelect.disabled = true;
  videoLayout.setIntellegenceMergeMode(intellegenceMergeModeSelect.value, value, client.selfParticipant)
    .catch(() => {
      confirm('设置智能合并屏幕共享模式失败');
    })
    .finally(() => {
      screenShareModeSelect.disabled = false;
    });
}

function switchAudioInputChange(index) {
  index = Number.parseInt(index, 10);
  // devicesInfo.audioInputList[index]
}

function switchAudioOutputChange(index) {
  index = Number.parseInt(index, 10);
  const device = devicesInfo.audioOutputList[index];
  switchAudioOutputSelect.disabled = true;
  client.setAudioRoute(device)
    .catch(reason => {
      console.log(reason);
      confirm(reason);
    })
    .finally(() => switchAudioOutputSelect.disabled = false);
}

function switchVideoInputChange(index) {
  index = Number.parseInt(index, 10);
  const device = devicesInfo.videoInputList[index];
  switchVideoInputSelect.disabled = true;
  client.switchCamera({deviceId: device.deviceId})
    .catch(reason => {
      console.log(reason);
      confirm(reason);
    })
    .finally(() => switchVideoInputSelect.disabled = false);
}

function startRemoteRecord() {
  startRemoteRecordBtn.disabled = true;
  recorder.startRemoteRecord({
    videoWidth: Number.parseInt(recordVideoWidthInput.value),
    videoHeight: Number.parseInt(recordVideoHeightInput.value),
    recordResolution: Number.parseInt(recordResolutionSelect.value),
    frameRate: Number.parseInt(recordFrameRateInput.value),
    bitrate: Number.parseInt(recordBitrateInput.value),
    mergeMode: Number.parseInt(recordMergeModeSelect.value),
    storage: {
      protocol: 'aws',
    },
    fileName: recordFileNameInput.value,
    remoteFileName: recordremoteFileNameInput.value
  })
    .then(() => {
      stopRemoteRecordBtn.disabled = false;
      alert('开启远端录制成功');
    })
    .catch(reason => confirm(reason));
}
function stopRemoteRecord() {
  stopRemoteRecordBtn.disabled = true;
  recorder.stopRemoteRecord()
    .then(() => {
      startRemoteRecordBtn.disabled = false;
      alert('停止远端录制成功');
    })
    .catch(reason => confirm(reason));
}
function startLocalRecord() {

}

function stopLocalRecord() {

}

function sendMessage() {
  client.sendMessage(messageTypeInput.value, messageContentInput.value);
}

function snapshot() {
  localStream.snapshot()
    .then(blob => {
      document.getElementById('snapshot-preview').src = window.URL.createObjectURL(blob);
    });
}

function enableConfCtrlChange(dom) {
  startBtn.hidden = !dom.checked;
}

function interfaceTestReset(disable) {
  triggerAudioOutputBtn.disabled = disable;
  triggerVideoInputBtn.disabled = disable;
  triggerAudioInputBtn.disabled = disable;
  downloadLogBtn.disabled = disable;
  openCameraBtn.disabled = disable;
  mergeModeSelect.disabled = disable;
  switchAudioInputSelect.disabled = disable;
  switchAudioOutputSelect.disabled = disable;
  switchVideoInputSelect.disabled = disable;
  startLocalRecordBtn.disabled = disable;
  messageTypeInput.disabled = disable;
  messageContentInput.disabled = disable;
  sendMessageBtn.disabled = disable;
  snapshotBtn.disabled = disable;

  //  录制配置参数
  recordResolutionSelect.disabled = disable;
  recordMergeModeSelect.disabled = disable;
  recordVideoWidthInput.disabled = disable;
  recordVideoHeightInput.disabled = disable;
  recordFrameRateInput.disabled = disable;
  recordBitrateInput.disabled = disable;
  recordFileNameInput.disabled = disable;
  recordStorageProtocolInput.disabled = disable;
  recordremoteFileNameInput.disabled = disable;
}

function reset(disable) {
  disable = disable || false;
  conferenceNumberInput.disabled = disable;
  nicknameInput.disabled = disable;
  accountNameInput.disabled = disable;
  passwordInput.disabled = disable;
  mtcConfPasswordKeyInput.disabled = disable;
  startBtn.disabled = disable;
  stopBtn.disabled = disable;
  joinBtn.disabled = disable;
  leaveBtn.disabled = disable;
  enableRecordInput.disabled = disable;
  channelIdInput.disabled = disable;
  queryChannelIdBtn.disabled = disable;
  roleSelect.disabled = disable;
}

JuphoonRTCConference.getMediaDevices()
  .then((_devicesInfo) => {
    devicesInfo = _devicesInfo;
    deviceListInit();

    _devicesInfo.addEventListener(WebDevicesEventType.DEVICE_CHANGE, () => {
      deviceListInit();
    });
  });

function deviceListInit() {
  switchAudioInputSelect.innerHTML = '';
  devicesInfo.audioInputList.forEach((value, index) => {
    const option = document.createElement('option');
    option.value = index.toString(10);
    option.text = value.label;
    switchAudioInputSelect.options.add(option);
  });
  switchAudioOutputSelect.innerHTML = '';
  devicesInfo.audioOutputList.forEach((value, index) => {
    const option = document.createElement('option');
    option.value = index.toString(10);
    option.text = value.label;
    switchAudioOutputSelect.options.add(option);
  });
  switchVideoInputSelect.innerHTML = '';
  devicesInfo.videoInputList.forEach((value, index) => {
    const option = document.createElement('option');
    option.value = index.toString(10);
    option.text = value.label;
    switchVideoInputSelect.options.add(option);
  });
}

function query() {
  client.query(channelIdInput.value)
    .then(info => {
      alert(JSON.stringify(info));
    })
    .catch(reason => {

      alert(reason.message);
    });
}

window.addEventListener('beforeunload', (ev) => {
  ev.preventDefault();
  ev.returnValue = 'reload?';
  return 'reload?';
});