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

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

publicConfig.debug && new VConsole();
var
  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'),
  nicknameInput = document.getElementById('nickname'),
  environmentAddressInput = document.getElementById('environment-address'),
  appKeyInput = document.getElementById('appKey'),
  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'),

  groupListSelect = document.getElementById('group-list'),

  callBtn = document.getElementById('call'),
  termBtn = document.getElementById('term'),

  versionInfo = document.getElementById('version-info')
;
var
  environmentSettings = {
    environmentAddress: document.getElementById('environment-address'),
    truthAddress: document.getElementById('truth-address'),
    appKey: document.getElementById('appKey'),
    token: document.getElementById('token'),
    getToken: document.getElementById('get-token')
  },
  guestSettings = {
    createClient: document.getElementById('create-client'),
    destroyClient: document.getElementById('destroy-client'),
    groupList: document.getElementById('group-list'),
    nickname: document.getElementById('nickname'),
    call: document.getElementById('call'),
    queryGroupList: document.getElementById('query-group-list'),
    extraParam: document.getElementById('extra-param'),
    svcResolution: document.getElementById('svc-resolution'),
    securityType: document.getElementById('security-type'),
    agentUri: document.getElementById('agent-uri'),
    oneToOneCall: document.getElementById('one-to-one-call')
  },
  interfaceTest = {
    term: document.getElementById('term'),
    openCamera: document.getElementById('open-camera'),
    triggerAudioInput: document.getElementById('trigger-audio-input'),
    triggerAudioOutput: document.getElementById('trigger-audio-output'),
    triggerVideoInput: document.getElementById('trigger-video-input'),
    requestVideoSize: document.getElementById('request-video-size'),
    switchAudioInput: document.getElementById('switch-audio-input'),
    switchAudioOutput: document.getElementById('switch-audio-output'),
    switchVideoInput: document.getElementById('switch-video-input'),
    ratioInput: document.getElementById('ratio'),
    ratioBtn: document.getElementById('set-ratio'),
    toUserId: document.getElementById('to-user-id'),
    messageType: document.getElementById('message-type'),
    messageContent: document.getElementById('message-content'),
    sendMessage: document.getElementById('send-message')
  },
  otherSettings = {
    version: document.getElementById('version'),
    downloadLog: document.getElementById('download-log'),
    waitCount: document.getElementById('wait-count'),
    waitTime: document.getElementById('wait-time')
  };

var {JuphoonRTCGuest, GuestEventType, Reporter, LoggerLevel, RenderType, WebDevicesEventType} = JuphoonRTCGuestSDK;
var devicesInfo, tab = new mdui.Tab('#tab'), waitingDialog = new mdui.Dialog('#waiting-dialog', {modal: true});
Reporter.setLogLevel(LoggerLevel.DEBUG);
otherSettings.version.textContent = JuphoonRTCGuest.getVersion().version + ' -- ' + JuphoonRTCGuest.getVersion().gitHashShort + ' -- ' + JuphoonRTCGuest.getVersion().buildTime;

var client, token, facingMode = 'user', localStream, remoteStream;

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

JuphoonRTCGuest.setConfig({address: environmentAddressInput.value});

function getToken() {
  JuphoonRTCGuest.getToken(publicConfig.webacdEnvironment)
    .then(_token => {
      tokenInput.value = _token;
      environmentSettingsDisable(true);
      guestSettings.createClient.disabled = false;
    })
    .catch(reason => {
      alert('获取token失败，确认地址已信任');
      alert(reason);
    });
}

function createClient() {
  guestSettings.createClient.disabled = true;

  client = JuphoonRTCGuest
    .createGuestClient(appKeyInput.value, tokenInput.value, publicConfig.webacdEnvironment + '/webrtc');

  client.login()
    .then(() => {
      guestSettingsDisable(false);
      guestSettings.destroyClient.disabled = false;
      guestSettings.queryGroupList.disabled = false;
      guestSettings.createClient.disabled = true;
    })
    .catch(reason => {
      alert(reason);
      guestSettings.createClient.disabled = false;
    });

  client.onSocketStateChange = (ev) => {
    console.log(event);
  };

  client.addEventListener(GuestEventType.CONFERENCE_LEAVE, (ev) => {
    guestSettings.createClient.disabled = false;
    waitingDialog.close();
    tab.prev();
    localStream.stop();
    remoteStream.stop();
    interfaceTestDisable(true);
  });

  client.addEventListener(GuestEventType.MESSAGE_RECEIVE, (ev) => {
    console.log(ev.message);
  });

  client.addEventListener(GuestEventType.CONFERENCE_PARTICIPANT_UPDATE, () => {
    interfaceTest.toUserId.innerHTML = '';
    Object.keys(client.participantMap)
      .forEach(value => {
        value = client.participantMap[value];
        if (value.isConferenceDelivery() || value.id0 === 'self') return;
        const option = document.createElement('option');
        option.value = value.id0;
        option.text = value.nick;
        interfaceTest.toUserId.options.add(option);
      })
  })
}

function queryGroupList() {
  guestSettings.queryGroupList.disabled = true;

  client.listAllGroups()
    .then(businessList => {
      businessList.forEach((value, index) => {
        const option = document.createElement('option');
        option.value = value.telNumber;
        option.text = value.memo + ' ' + value.telNumber + ' ' + value.group;
        groupListSelect.options.add(option);
      });
      new mdui.Select('#group-list');

      guestSettings.groupList.disabled = false;
      guestSettings.call.disabled = false;
    })
    .catch(reason => {
      alert(reason);
      guestSettings.queryGroupList.disabled = false;
    })
}

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

function call() {
  guestSettings.call.disabled = true;

  client.call(groupListSelect.value, {
    extraParam: guestSettings.extraParam.value,
    svcResolution: guestSettings.svcResolution.value,
    displayName: guestSettings.nickname.value,
    securityType: Number.parseInt(guestSettings.securityType.value)
  })
    .then(() => {
      waitingDialog.open();
      guestSettingsDisable(true);
      interfaceTestDisable(false);
    });

  let remove = client.addEventListener(GuestEventType.CALL_QUEUE_COUNT, (ev) => {
    console.log(ev);
    otherSettings.waitCount.textContent = ev.message.count;
    otherSettings.waitTime.textContent = ev.message.time;
  });

  client.addEventListener(GuestEventType.CALL_STATE_CHANGE, (ev) => {
    switch (ev.message.state) {
      case 'talking':
        remove();
        waitingDialog.close();
        tab.next();
        interfaceTestDisable(false);
        break;
    }
  });
}

function term() {
  interfaceTest.term.disabled = true;
  client.term()
    .then(() => {
      guestSettings.createClient.disabled = false;
      waitingDialog.close();
      tab.prev();
      interfaceTestDisable(true);
    })
    .catch(reason => {
      alert(reason);
      interfaceTest.term.disabled = false;
    })
}

function openCamera() {
  client.startCameraVideo()
    .then(stream => {
      localStream = stream;
      stream.start('local-video');
    })
    .catch(err => {
      alert(JSON.stringify(err));
      console.error(err);
    });
  client.startVideo()
    .then(stream => {
      remoteStream = stream;
      stream.start('remote-video')
        .then(dom => dom.muted = false);
    })
}

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 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 startLocalRecord() {

}

function stopLocalRecord() {

}

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;
}

function reset(disable) {
  disable = disable || false;
  nicknameInput.disabled = disable;
  groupListSelect.disabled = disable;
  callBtn.disabled = disable;
}

JuphoonRTCGuest.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;
    option.selected = value.selected;
    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;
    option.selected = value.selected;
    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;
    option.selected = value.selected;
    switchVideoInputSelect.options.add(option);
  });
}

function environmentSettingsDisable(disable) {
  Object.keys(environmentSettings).forEach(key => {
    environmentSettings[key].disabled = disable;
  });
}

function guestSettingsDisable(disable) {
  Object.keys(guestSettings).forEach(key => {
    guestSettings[key].disabled = disable;
  });
}

function interfaceTestDisable(disable) {
  Object.keys(interfaceTest).forEach(key => {
    interfaceTest[key].disabled = disable;
  });
}

function otherSettingsDisable(disable) {
  Object.keys(otherSettings).forEach(key => {
    otherSettings[key].disabled = disable;
  });
}

function requestVideo(value) {
  interfaceTest.requestVideoSize.disabled = true;

  client.setRequestVideo(Number.parseInt(value))
    .catch(reason => {
      alert('设置请求分辨率失败\n' + JSON.stringify(reason));
    })
    .finally(() => {
      interfaceTest.requestVideoSize.disabled = false;
    });
}

function setRatio() {
  interfaceTest.ratioInput.disabled = true;

  client.setRatio(eval(interfaceTest.ratioInput.value))
    .catch(reason => {
      alert(reason);
    })
    .finally(() => {
      interfaceTest.ratioInput.disabled = false;
    })
}

function sendMessage() {
  interfaceTest.sendMessage.disabled = true;

  client.sendMessage(interfaceTest.messageType.value, interfaceTest.messageContent.value, interfaceTest.toUserId.value)
    .catch(reason => {
      alert(JSON.stringify(reason));
    })
    .finally(() => {
      interfaceTest.sendMessage.disabled = false;
    });

}

function urgent() {
  client.requestUrgent()
    .then(() => {
      alert('加急成功');
    })
    .catch(() => {
      alert('加急失敗');
    });
}

function oneToOneCall() {
  client.oneToOneCall(guestSettings.agentUri.value, {
    extraParam: guestSettings.extraParam.value,
    svcResolution: guestSettings.svcResolution.value,
    displayName: guestSettings.nickname.value,
    securityType: Number.parseInt(guestSettings.securityType.value)
  })
    .then(() => {
      waitingDialog.open();
      guestSettingsDisable(true);
      interfaceTestDisable(false);
    });

  client.addEventListener(GuestEventType.CALL_STATE_CHANGE, (ev) => {
    switch (ev.message.state) {
      case 'talking':
        waitingDialog.close();
        tab.next();
        interfaceTestDisable(false);
        break;
    }
  });
}

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

environmentSettingsDisable(false);