demo.js

AgoraRTC.enableLogUpload();

var client;
var localTracks = {
  videoTrack: null,
  audioTrack: null
};
var currentMic = null
var currentCam = null
var mics = []
var cams = []
var camsId = ''
var remoteUsers = {};
var options = {
  appid: 'bb627d3728164785b13e182757b15f0b',
}

if(window.location.origin.includes('hazj.lgyzpt.com')){
  options.appid = '4f143573c56744c698820b1ef45ec064'
}

let param = JSON.parse(sessionStorage.getItem('huaiAnAppParam')||'{}')
var applyId = param.applyId
if(param.processType == 'complaint'){
  $("#beginTs").html('拍摄着装环节时，请手持工牌，并将工服上的logo置于屏幕中央，如图所示:')
  $("#beginImg").attr('src', 'https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png')
  $("#beginImg").css('width','70%')
}
var curVideoProfile;

AgoraRTC.onAutoplayFailed = () => {
  toast("click to start autoplay!");
};

AgoraRTC.onMicrophoneChanged = async changedDevice => {
  // When plugging in a device, switch to a device that is newly plugged in.
  if (changedDevice.state === "ACTIVE") {
    localTracks.audioTrack.setDevice(changedDevice.device.deviceId);
    // Switch to an existing device when the current device is unplugged.
  } else if (changedDevice.device.label === localTracks.audioTrack.getTrackLabel()) {
    const oldMicrophones = await AgoraRTC.getMicrophones();
    oldMicrophones[0] && localTracks.audioTrack.setDevice(oldMicrophones[0].deviceId);
  }
};

AgoraRTC.onCameraChanged = async changedDevice => {
  // When plugging in a device, switch to a device that is newly plugged in.
  if (changedDevice.state === "ACTIVE") {
    localTracks.videoTrack.setDevice(changedDevice.device.deviceId);
    // Switch to an existing device when the current device is unplugged.
  } else if (changedDevice.device.label === localTracks.videoTrack.getTrackLabel()) {
    const oldCameras = await AgoraRTC.getCameras();
    oldCameras[0] && localTracks.videoTrack.setDevice(oldCameras[0].deviceId);
  }
};

function createClient() {
  // create Agora client
  client = AgoraRTC.createClient({
    mode: "rtc",
    codec: "vp8"
  });
}

async function createTrackAndPublish() {
  // create local audio and video tracks
  const tracks = await Promise.all([
    AgoraRTC.createMicrophoneAudioTrack({
      encoderConfig: "music_standard"
    }),
    AgoraRTC.createCameraVideoTrack({
      encoderConfig: {
        width: 1280,
        height: 720,
        frameRate: 25
      },
      optimizationMode: 'detail'
    })
  ])

  localTracks.audioTrack = tracks[0]
  localTracks.videoTrack = tracks[1]
  // play local video track
  localTracks.videoTrack.play("local-player", {
    mirror: $("#mirror-check").prop("checked")
  });
  // localTracks.audioTrack.play("local-player", {
  //   mirror: $("#mirror-check").prop("checked")
  // });
  // publish local tracks to channel
  cams = await AgoraRTC.getCameras();
  mics = await AgoraRTC.getMicrophones();
  await client.publish(Object.values(localTracks));
}

/*
 * Join a channel, then create local video and audio tracks and publish them to the channel.
 */
async function join() {
  client.on("user-published", handleUserPublished);
  client.on("user-unpublished", handleUserUnpublished);
  // start Proxy if needed
  const mode = Number(options.proxyMode)
  if (mode != 0 && !isNaN(mode)) {
    client.startProxyServer(mode);
  }
  let flag = false
  options.uid = await client.join(options.appid, options.channel, options.token || null, options.uid || null).then(() => {
    console.log('加入频道成功')
    flag = true
  }).catch((error) => {
    console.error('加入频道失败:', error);
  });

  return flag
}

/*
 * Stop all local and remote tracks then leave the channel.
 */
async function leave() {
  for (trackName in localTracks) {
    var track = localTracks[trackName];
    if (track) {
      track.stop();
      track.close();
      localTracks[trackName] = undefined;
    }
  }
  // Remove remote users and player views.
  remoteUsers = {};
  // leave the channel
  if(!client){
    return
  }
  await client.leave();
}

/* 
 * Add a user who has subscribed to the live channel to the local interface.
 *
 * @param  {IAgoraRTCRemoteUser} user - The {@link  https://docs.agora.io/en/Voice/API%20Reference/web_ng/interfaces/iagorartcremoteuser.html| remote user} to add.
 * @param {trackMediaType - The {@link https://docs.agora.io/en/Voice/API%20Reference/web_ng/interfaces/itrack.html#trackmediatype | media type} to add.
 */
function handleUserPublished(user, mediaType) {
  const id = user.uid;
  remoteUsers[id] = user;
  $("#remote-uid").val(id)
}

/*
 * Remove the user specified from the channel in the local interface.
 *
 * @param  {string} user - The {@link  https://docs.agora.io/en/Voice/API%20Reference/web_ng/interfaces/iagorartcremoteuser.html| remote user} to remove.
 */
function handleUserUnpublished(user, mediaType) {
  if (mediaType === "video") {
    const id = user.uid;
    delete remoteUsers[id];
    $(`#player-wrapper-${id}`).remove();
  }
}




//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
const util = new window.publicMethod() ;

var intervalStr = ''
var callId = ''
var stepId = ''
var tryNum = ''
var ifListener = false
var ifClickHide = false
var countDownStr = ''
var snConfirmFlag = false
function getProcess(){

  if(!window.location.href.includes('demo.html')){
    return
  }

  util.httpRequest({
    url: '/getCurrentProcess',
    data: {
      callId: callId,
      applyId: applyId,
    }
  }).then(res=>{
    if(res.code == 200){
      res = res.data

      if(res.close == '1'){
        free()
        $("#confirmFlag").show()
        return
      }

      if(res.checkStatus && res.checkStatus==1){
        $('#waitting').show()
        $("#mp3Source")[0].pause()
      }else{
        $('#waitting').hide()
      }
  
      if(!res.voiceCode || ((res.voiceCode+''+res.tryNum)==(stepId+''+tryNum))){
        if(res.contentSN && !snConfirmFlag && !ifClickHide){
          $("#snValue2").val(res.contentSN)
          $("#snAlertDiv2").show()
          addSnInputEvent()
          snConfirmFlag = true
        }

        return
      }

      if(res.voiceCode.includes('gongFu_') && !sessionStorage.getItem('gongfuExampleAlert')){
        $("#gongfuExampleAlert").show()
      }else{
        $("#gongfuExampleAlert").hide()
      }

      if(res.voiceCode.includes('gongPai_') && !sessionStorage.getItem('gongpaiExampleAlert')){
        $("#gongpaiExampleAlert").show()
      }else{
        $("#gongpaiExampleAlert").hide()
      }

      if(res.voiceCode.startsWith('us') && res.voiceCode.includes('_4')){
        $('#nextQuestion').show()
      }else{
        $('#nextQuestion').hide()
      }
  
      if(res.voiceCode.startsWith('account_') && res.tryNum>=2){
        $("#inputAccountTs").css('display', 'flex') 
      }else{
        $("#inputAccountTs").css('display', 'none')
      }

      if(res.voiceCode.includes('SN') || res.voiceCode.startsWith('complain')){
        let param = getSnInfo(res.voiceCode)

        if(!sessionStorage.getItem(param.cacheId) || res.voiceCode.startsWith('zgm') || res.voiceCode.startsWith('jdh')){
          $("#snExampleText").html(param.pageText)
          $("#snExampleImg").attr('src', param.imgUrl)

          $('#snExampleAlert').show()
        }
      }

      if(res.voiceCode.includes('SN') && res.tryNum>=1){
        $("#inputSnTs").css('display', 'flex')
      }else{
        $("#inputSnTs").css('display', 'none')
      }
  
      if(res.tipCode == 'tip2'){
        $('.timeTs').show()
      }else{
        $('.timeTs').hide()
      }
      
      $("#contextDiv").html(res.context)
      if(!ifListener){
        $("#mp3Source")[0].addEventListener('play', function() {
          util.httpRequest({
            url: '/startOrEnd',
            data: {
              callId: callId,
              voiceStartType: 1,
              applyId: applyId,
              voiceCode: stepId
            }
          })

          audioSet(false)
        });
    
        $("#mp3Source")[0].addEventListener('ended', function() {
          util.httpRequest({
            url: '/startOrEnd',
            data: {
              callId: callId,
              voiceStartType: 2,
              applyId: applyId,
              voiceCode: stepId
            }
          })
          audioSet(true)

          if(stepId.includes('end')){
            free()
      
            window.location.replace('result.html?time='+ new Date().getTime())
          }
        });
      }

      $("#mp3Source")[0].muted = res.voiceUrlMp3?false:true
      $("#mp3Source").attr('src', res.voiceUrlMp3)
      $("#mp3Source")[0].autoplay = true
      $("#mp3Source")[0].play()

      audioSet(false)
      if(countDownStr){
        clearTimeout(countDownStr)
      }
      $("#mp3Source").on('loadedmetadata', function() {
        let duration = this.duration
        countDownStr = setTimeout(() => {
          audioSet(false)
        }, duration)
      })
  
      ifListener = true
      tryNum = res.tryNum
      stepId = res.voiceCode

      if(stepId.startsWith('end')){
        $("#contextDiv").css('font-size','.28rem')
      }
  
      setStepButt()
    }
  })
}

function audioSet(flag){
  if(isHuaweiPhone() == '1'){
    if(flag){
      setEnabled("audio", true)
    }else{
      if (localTrackState.audioTrackEnabled) {
        setEnabled("audio", false)
      }
    }
  }
}

function getSnInfo(code){
  let key = code || stepId
  let pageText = ''
  let id = ''

  if(key.startsWith('gm')){
    pageText = '请拍摄光猫铭牌,将镜头对准要识别的号码,如图所示:'
    id = 'gm'
  }else if(key.startsWith('zgm')){
    pageText = '请拍摄FTTR主光猫铭牌,将镜头对准要识别的号码,如图所示:'
    id = 'zgm'
  }else if(key.startsWith('cgm')){
    pageText = '请拍摄FTTR从光猫铭牌,将镜头对准要识别的号码,如图所示:'
    id = 'cgm'
  }else if(key.startsWith('jdh')){
    pageText = '请将机顶盒翻转至背面,将镜头对准要识别的号码,如图所示:'
    id = 'jdh'
  }else if(key.startsWith('lyq')){
    pageText = '请将路由器翻转至背面,将镜头对准要识别的号码,如图所示:'
    id = 'lyq'
  }else if(key.startsWith('iptv')){
    pageText = '将摄像头对准电视软终端要识别的号码,如图所示:'
    id = 'iptv'
  }else if(key.startsWith('cloudPc')){
    pageText = '请将终端盒翻转至背面,将镜头对准要识别的号码,如图所示:'
    id = 'cloudPc'
  }else if(key.startsWith('insf')){
    pageText = '请查看摄像头底座的铭牌,将镜头对准要识别的号码,如图所示:'
    id = 'insf'
  }else if(key.startsWith('complainG')){
    pageText = '请拍摄光猫的指示灯，将镜头对准指示灯的亮灯情况,如图所示:'
    id = 'complainG'
  }else if(key.startsWith('complainZ')){
    pageText = '请拍摄主光猫的指示灯，将镜头对准指示灯的亮灯情况,如图所示:'
    id = 'complainZ'
  }

  return {
    pageText,
    imgUrl: ('https://xpo.oss-cn-beijing.aliyuncs.com/huaian/'+id+'Example.png'),
    cacheId: id+'SnExampleAlert'
  }
}

function free(){
  leave()

  if(intervalStr){
    clearInterval(intervalStr)
  }
  
  release()
}

function release(){
  if(!callId && !sessionStorage.getItem('haCallId')){
    return
  }

  util.httpRequest({
    url: '/releaseConn',
    data: {
      callId: callId||sessionStorage.getItem('haCallId')||'',
      applyId: applyId
    }
  })
}

function detailTime(num) {
  if (!num) {
    return '';
  } else {
    num = isNaN(Number(num))?num:Number(num);
    let d = new Date(num);
    let year = d.getFullYear();
    let month = d.getMonth() + 1;
    let date = d.getDate();
    let hour = d.getHours();
    let minute = d.getMinutes();
    let second = d.getSeconds();
    month < 10 ? month = '0' + month : month;
    date < 10 ? date = '0' + date : date;
    hour < 10 ? hour = '0' + hour : hour;
    minute < 10 ? minute = '0' + minute : minute;
    second < 10 ? second = '0' + second : second;

    return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
  }
}

$("#videoSwitch").click(async function(e){
  if(cams.length<=1){
    toast('暂不支持')
  }else{
    if(!camsId){
      if(cams.length == 2){
        camsId = cams[1].deviceId
      }else{
        let arr = cams
        
        if(isHuaweiPhone() != 1){
          arr = cams.filter(item=>{
            return item.label.includes('back') || item.label.includes('后置')
          })
        }

        if(isIos() == 1){
          arr = arr.slice(0,-1)
        }

        camsId = arr[arr.length-1].deviceId
      }

      await localTracks.videoTrack.setDevice(camsId);
    }else{
      await localTracks.videoTrack.setDevice(cams[0].deviceId);
      camsId = ''
    }
  }
})

function setStepButt(){
  $('.none').hide()
  if(stepId.startsWith("start_")){
    $("#readButt").show()
  }

  if(stepId.startsWith("account_") || stepId.includes("SN") || stepId.startsWith("complain")){
    if(stepId.startsWith("account_")){
      $("#exampleTsText").html('请正面拍摄书写规范的账号')
    }else if(stepId.startsWith("complain")){
      $("#exampleTsText").html('请将摄像头对焦到设备指示灯上')
    }else{
      $("#exampleTsText").html('请将摄像头对焦到设备铭牌信息上')
    }
    
    $("#exampleTsDiv").css('display','flex')
  }else{
    $("#exampleTsDiv").hide()
  }

  let fn = function(str,farr){
    for(let i=0,j=farr.length;i<j;i++){
      if(str.includes(farr[i])){
        return true
      }
    }

    return false
  }

  let nArr = ["Ojdh","Olyq","Oinsf","Owsf"]
  if(fn(stepId,nArr)){
    $("#shootButt2").css('display','flex')
  }
  let sArr = ["gongFu_","gongPai_","account_","env_","Ogm_","Ozgm_","Ocgm","Otv","lineSta_",,"cloudPcTer","cloudPcScreen"]
  if(fn(stepId,sArr)){
    $("#shootButt").css('display','flex')
  }
  if(stepId.includes('SN') || stepId.startsWith('complain')){
    $("#snButton").show()
  }

  if(stepId.startsWith("jdhAccType_")){
    $("#qiaoOrZhi").css('display','flex')
  }
  if(stepId.startsWith("accEvn_")){
    $("#wangXian").css('display','flex')
  }
  if(stepId.startsWith("lineType_")){
    $("#guangLan").css('display','flex')
  }
  if(stepId.startsWith("lyqModel_") || stepId.startsWith("lyqbz_")){
    $("#shiFou").css('display','flex')
  }
  if(stepId.startsWith("hjq_") || stepId.startsWith("zt_")){
    $("#donwLOad").css('display','flex')
  }
  if(stepId.startsWith("visit_")){
    $("#joinFlag").css('display','flex')
  }
}

$('#snAgain').click(()=>{
  util.httpRequest({
    url: '/retakeForButton',
    data: {
      applyId: applyId,
      callId: callId,
      voiceCode: stepId
    }
  }).then(res=>{})

  $('#snAlertDiv2').hide()
  $('#snErrorTs2').html('')
  snConfirmFlag = false

  ifClickHide = true
  setTimeout(()=>{
    ifClickHide = false
  },2000)
})
$('.quit').click(()=>{
  window.location.replace('index.html?time='+new Date().getTime())
})

let clickButtFlag =  false
$('.clickButt').click((e)=>{
  if(clickButtFlag){
    return
  }
  clickButtFlag = true
  setTimeout(()=>{
    clickButtFlag = false
  },1000)

  $('#errorAlert').hide()

  let key = $(e.target).attr('key')

  util.httpRequest({
    url: '/button',
    data: {
      applyId: applyId,
      callId: callId,
      voiceCode: stepId,
      button_name: key
    }
  }).then(res=>{})
})

//账号和设备串号的弹窗逻辑
$("#accountAlertShow").click(()=>{
  $("#accountValue").val('')
  $("#accountAlertDiv").show()
})
$("#snAlertShow").click(()=>{
  $("#snValue").val('')

  $("#snAlertDiv").show()
  addSnInputEvent()
})
$('#snValue2').focus(function() {
  $("#snErrorTs2").html('')
});
$('#snValue').focus(function() {
  $("#snErrorTs").html('')
});
function inputCancel(type){
  if(type == 'account'){
    $("#accountValue").val('')
    $("#accountAlertDiv").hide()
  }else{
    $("#snValue").val('')
    $("#snAlertDiv").hide()
  }
}
function accountInputSubmit(){
  if(!$("#accountValue").val()){
    toast('请输入账号') 
    return
  }

  util.httpRequest({
    url: '/button',
    data: {
      applyId: applyId,
      callId: callId,
      voiceCode: stepId,
      button_name: 'accounttijiao',
      account: $("#accountValue").val()
    }
  }).then(res=>{})

  $("#accountValue").val('')
  $("#accountAlertDiv").hide()
}
function snInputSubmit(str){
  if(!$("#snValue"+str).val()){
    toast('请输入设备串号') 
    return
  }

  util.httpRequest({
    url: '/snConfirmButton',
    data: {
      applyId: applyId,
      callId: callId,
      voiceCode: stepId,
      textSN: $("#snValue"+str).val()
    }
  }).then(res=>{
    if(res.code == 200){
      $("#snValue"+str).val('')
      $("#snErrorTs"+str).html('')
      $("#snAlertDiv"+str).hide()

      if(str){
        $("#snTs").show()
        snConfirmFlag = false
      }
    }else if(res.code == 5001){
      if(str){
        $("#snTs").hide()
      }
      $("#snErrorTs"+str).html(res.msg)
    }else {
      toast('网络异常，请重新提交')
    }
  })
}

function addSnInputEvent(){
  document.querySelectorAll('.snInput').forEach(textarea => {
    function adjustHeight() {
      textarea.style.height = 'auto';
      textarea.style.height = textarea.scrollHeight + 'px';
    }
    
    textarea.addEventListener('input', adjustHeight);
    adjustHeight(); // 初始化调整
  });
}

var blackId = ''
function toast(str){
  if (document.getElementById("blackDiv")) {
    document.getElementById("blackSpan").innerHTML = str;
  } else {
    var blackDiv = document.createElement("div");

    blackDiv.id = "blackDiv";
    blackDiv.className = "blackts";
    blackDiv.style.position = "fixed";
    blackDiv.style.left = "0";
    blackDiv.style.bottom = "20%";
    blackDiv.style.width = "100%";
    blackDiv.style.textAlign = "center";
    blackDiv.style.zIndex = "999999";

    var html = '<span id="blackSpan" style="background: rgba(42,45,50,.94);color: white;';
    html += 'border-radius: .1rem;font-size: 0.32rem;padding: .2rem .6rem;">';
    html += str + '</span>';
    blackDiv.innerHTML = html;

    document.getElementsByTagName("body")[0].appendChild(blackDiv);
  }

  if (blackId && blackId != "") {
    clearTimeout(blackId);
  }
  blackId = setTimeout(function () {
    if (document.getElementById("blackDiv")) {
      document.getElementsByTagName("body")[0].removeChild(document.getElementById("blackDiv"));
    }
  }, 2000);
}

var localTrackState = {
  audioTrackEnabled: true,
};
$("#audioClose").click(function (e) {
  if(isHuaweiPhone() == '1'){
    toast('暂不支持')
    return
  }

  setEnabled("audio", true);
  $("#audioClose").hide();
  $("#audioOpen").show();
});


$("#audioOpen").click(function (e) {
  if (localTrackState.audioTrackEnabled) {
    setEnabled("audio", false);
  }
  $("#audioClose").show();
  $("#audioOpen").hide();
});

async function setEnabled(type, state) {
  try {
    if (type == "audio") {
      await localTracks.audioTrack.setEnabled(state);
      localTrackState.audioTrackEnabled = state;
    } else if (type == "video") {
      await localTracks.videoTrack.setEnabled(state);
      localTrackState.videoTrackEnabled = state;
    }
  } catch (err) {
    console.error(err);
    message.error(err.message);
  }
}

async function init(){
  $("#mp3Source").attr('src', 'https://lgyztest.obs.cidc-rp-12.joint.cmecloud.cn/file/temp/2025-01-08/hhT2XXAj.mp3')
  $("#mp3Source")[0].autoplay = true
  $("#mp3Source")[0].play()

  createClient()
  
  let data = await util.httpRequest({
    url: '/createRoom',
    data: {
      applyId: applyId
    }
  })

  if(data.code != '200'){
    toast(data.msg)
    return
  }

  options.channel = data.data.data.channel
  options.uid = data.data.data.uid
  options.token = data.data.data.token
  let flag = await join()

  if(!flag){
    toast('加入频道失败')
    return
  }

  callId = data.data.data.callId
  sessionStorage.setItem('haCallId',callId)

  await createTrackAndPublish()

  $("#videoSwitch").css('display', 'flex')
  intervalStr = setInterval(() => {
    getProcess()
  }, 1000);
}

function isHuaweiPhone() {
  let userAgent = navigator.userAgent.toLowerCase()

  return userAgent.includes('huawei')?'1':'0'
}

function isIos() {
  let userAgent = navigator.userAgent.toLowerCase()

  return userAgent.includes('iphone')?'1':'0'
}

$('#pageClose').click(()=>{
  window.history.go(-1)
})
$('#continueTest').click(()=>{
  window.location.reload()
})

release()
$('#videoBegin').click(()=>{

  if(!AgoraRTC.checkSystemRequirements()){
    toast('暂不支持')
    return
  }

  $('#beginAlert').hide()

  init()
})

$("#hideGongpaiAlert").click(()=>{
  sessionStorage.setItem('gongpaiExampleAlert','true')
  $("#gongpaiExampleAlert").hide()
})
$("#hideGongfuAlert").click(()=>{
  sessionStorage.setItem('gongfuExampleAlert','true')
  $("#gongfuExampleAlert").hide()
})
$("#hidesnExampleAlert").click(()=>{
  sessionStorage.setItem(getSnInfo().cacheId,'true')
  $("#snExampleAlert").hide()
})

$("#lookExample").click(()=>{
  if(stepId.includes('SN') || stepId.startsWith('complain')){
    let param = getSnInfo()

    $("#snExampleText").html(param.pageText)
    $("#snExampleImg").attr('src', param.imgUrl)
    $('#snExampleAlert').show()
  }else{
    $("#accountExampleAlert").show()
  }
})
$("#hideAccountExample").click(()=>{
  $("#accountExampleAlert").hide()
})

$("#cameraDiv").click(()=>{
  let camArr = []

  cams.forEach((item,index)=>{
    camArr[camArr.length] = '镜头'+(index+1)
  })

  vm.reasonPickData.arr = camArr

  vm.reasonPickData.isShow = true
})


var vm = new Vue({
  el: '#pageDiv',
  data: {
    reasonPickData: {
      isShow: false,

      title: '摄像头选择',
      arr:[],
      index: 0
    }, 
  },
  methods: {
    reasonCancel(){
      this.reasonPickData.isShow = false
    },
    reasonConfirm(value, index){
      this.reasonPickData.reason = value
      this.reasonPickData.index = index

      camsId = cams[index].deviceId
      localTracks.videoTrack.setDevice(camsId);

      this.reasonCancel()
    },
  }
})

window.addEventListener('popstate', () => {
  if(intervalStr){
    clearInterval(intervalStr)
  }
});
window.addEventListener('beforeunload', () => {
  if(intervalStr){
    clearInterval(intervalStr)
  }
});

window.stopMedia = function(){
  const audio = document.querySelector('audio');
  const video = document.querySelector('video');
  if (audio) {
      audio.pause();
      audio.srcObject = null;
  }
  if (video) {
      video.pause();
      video.srcObject = null;
  }
}

$(window).on('load', function() {
  $('#loading').hide()
  $('#beginAlert').css('display','block')
});