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%')
}

AgoraRTC.onAutoplayFailed = () => {
  console.log("click to start autoplay!")
}
AgoraRTC.onMicrophoneChanged = async changedDevice => {
  if (changedDevice.state === "ACTIVE") {
    localTracks.audioTrack.setDevice(changedDevice.device.deviceId);
  } 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 => {
  if (changedDevice.state === "ACTIVE") {
    localTracks.videoTrack.setDevice(changedDevice.device.deviceId);
  } else if (changedDevice.device.label === localTracks.videoTrack.getTrackLabel()) {
    const oldCameras = await AgoraRTC.getCameras();
    oldCameras[0] && localTracks.videoTrack.setDevice(oldCameras[0].deviceId);
  }
}
function createClient() {
  client = AgoraRTC.createClient({
    mode: "rtc",
    codec: "vp8"
  })
}
async function createTrackAndPublish() {
  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]
  localTracks.videoTrack.play("local-player", {
    mirror: $("#mirror-check").prop("checked")
  });
  cams = await AgoraRTC.getCameras();
  mics = await AgoraRTC.getMicrophones();
  await client.publish(Object.values(localTracks));
}
async function join() {
  client.on("user-published", handleUserPublished);
  client.on("user-unpublished", handleUserUnpublished);
  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
}
async function leave() {
  for (trackName in localTracks) {
    var track = localTracks[trackName];
    if (track) {
      track.stop();
      track.close();
      localTracks[trackName] = undefined;
    }
  }
  remoteUsers = {};
  if(!client){
    return
  }
  await client.leave();
}
function handleUserPublished(user, mediaType) {
  const id = user.uid;
  remoteUsers[id] = user;
  $("#remote-uid").val(id)
}
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 snConfirmFlag = false
var jdhAndCgmClickHide = false
var noShootClick = false
var jdhEaxmpleShow = false
var cgmExampleShow = false
var zgmExampleShow = false
var snInputNum
var noShootNum

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

        //处理下图片提交的等待框
        submitPictureSucc()
        $('#pictureShowAlert').hide()

        return
      }else{
        $('#waitting').hide()
      }
      
      if(!res.voiceCode || ((res.voiceCode+''+res.tryNum)==(stepId+''+tryNum))){

        //确认sn串号弹窗
        if(res.contentSN && !snConfirmFlag && !ifClickHide){
          $('#snAlertTile').text('请确认设备串号')

          $('#snErrorTs').text('如识别错误你可重新进行拍摄'+(res.tryNum>=snInputNum?'或直接修改':''))
          $('#snErrorTs').removeClass('tsRed')
          $('#snErrorTs').css('opacity','1')
          if(res.tryNum < snInputNum){
            $('#snValue').prop('readonly', true);
            $('#snValue').addClass('disabled')
          }else{
            $('#snValue').prop('readonly', false);
            $('#snValue').removeClass('disabled')
          }

          $("#snValue").val(res.contentSN)
          $("#snValue").removeClass('red')
          $("#snAlertDiv").show()
          addSnInputEvent()
          snConfirmFlag = true
        }

        return
      }

      tryNum = res.tryNum
      stepId = res.voiceCode

      $("#contextDiv").html(res.context)
      if(!ifListener){
        $("#mp3Source")[0].addEventListener('play', function() {
          util.httpRequest({
            url: '/startOrEnd',
            data: {
              callId: callId,
              voiceStartType: 1,
              applyId: applyId,
              voiceCode: stepId
            }
          })
        });
    
        $("#mp3Source")[0].addEventListener('ended', function() {
          util.httpRequest({
            url: '/startOrEnd',
            data: {
              callId: callId,
              voiceStartType: 2,
              applyId: applyId,
              voiceCode: stepId
            }
          })

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

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

      if(stepId.includes('SN') && !res.contentSN){

        if(tryNum>=snInputNum && ifSnSubmitPicture){
          //sn多次未识别到的弹窗
          if(!snConfirmFlag && !ifClickHide){
            $('#snAlertTile').text('请输入设备串号')
            $('#snErrorTs').text('串号多次未通过,你可手动输入设备串号')
            $('#snErrorTs').addClass('tsRed')
            $('#snErrorTs').css('opacity','1')
            $("#snValue").val('')
            $("#snValue").removeClass('red')
            $('#snValue').prop('readonly', false);
            $('#snValue').removeClass('disabled')
            $("#snAlertDiv").show()
            addSnInputEvent()
            snConfirmFlag = true

            return
          }
        }else{
          //机顶盒和从光猫sn识别错误提示弹窗
          if(stepId.startsWith('jdh') && tryNum>=1 && !jdhAndCgmClickHide){
            $("#jdhSnSbErrorAlert").show()
          }
          if(stepId.startsWith('cgm') && tryNum>=1 && !jdhAndCgmClickHide){
            $("#cgmSnSbErrorAlert").show()
          }
        }
      }

      //示例弹窗
      if(stepId.includes('SN') || stepId.startsWith('complain')){
        let param = getSnInfo(stepId)

        let lsFlag = false
        if((stepId.startsWith('jdh')&&!jdhEaxmpleShow) || (stepId.startsWith('cgm')&&!cgmExampleShow)){
          lsFlag = res.tryNum<1?true:false
        }else if(!sessionStorage.getItem(param.cacheId) || (stepId.startsWith('zgm')&&tryNum<snInputNum&&!zgmExampleShow)){
          lsFlag = true
        }

        if(lsFlag){
          $("#snExampleText").html(param.pageText)
          $("#snExampleImg").attr('src', param.imgUrl)

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

      //无法拍摄弹窗
      let pa = getNoShootInfo(stepId)
      if(pa.pageText && tryNum>=noShootNum && !noShootClick && res.checkStatus!=1){
        $('#noShootTextShow').text(pa.pageText)
        $('#noShootImgShow').attr('src', pa.imgUrl)
        $('#noShootShowAlert').show()
      }

      //工服工牌示例弹窗
      if(stepId.includes('gongFu_') && !sessionStorage.getItem('gongfuExampleAlert')){
        $("#gongfuExampleAlert").show()
      }else{
        $("#gongfuExampleAlert").hide()
      }
      if(stepId.includes('gongPai_') && !sessionStorage.getItem('gongpaiExampleAlert')){
        $("#gongpaiExampleAlert").show()
      }else{
        $("#gongpaiExampleAlert").hide()
      }

      //用户回访（已无）
      if(stepId.startsWith('us') && stepId.includes('_4')){
        $('#nextQuestion').show()
      }else{
        $('#nextQuestion').hide()
      }
      
      //账号识别困难提示
      if(stepId.startsWith('account_') && tryNum>=2){
        $("#inputAccountTs").css('display', 'flex') 
      }else{
        $("#inputAccountTs").css('display', 'none')
      }
  
      if(res.tipCode == 'tip2'){
        $('.timeTs').show()
      }else{
        $('.timeTs').hide()
      }

      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 getNoShootInfo(code){
  let key = code || stepId
  let pageText = ''
  let id = ''

  if(key.startsWith('Ogm')){
    pageText = '方法1:近距离聚焦拍摄光猫正面,露出移动的标识。'
    id = 'Ogm'
  }else if(key.startsWith('Ozgm')){
    pageText = '方法1:近距离聚焦拍摄FTTR主光猫的正面,露出移动的标识。'
    id = 'Ozgm'
  }else if(key.startsWith('Ocgm')){
    pageText = '方法1:近距离聚焦拍摄FTTR子光猫的正面,露出移动的标识。'
    id = 'Ocgm'
  }else if(key.startsWith('Ojdh')){
    pageText = '方法1:近距离聚焦拍摄机顶盒的正面,露出移动的标识。'
    id = 'Ojdh'
  }else if(key.startsWith('Olyq')){
    pageText = '方法1:近距离聚焦拍摄路由器的正面,露出移动的标识。'
    id = 'Olyq'
  }else if(key.startsWith('Oinsf')){
    pageText = '方法1:近距离聚焦拍摄室内摄像头的正面,露出移动的标识。'
    id = 'Oinsf'
  }else if(key.startsWith('cloudPcScreen')){
    pageText = '方法1:近距离聚焦拍摄云电脑显示器的正面,露出移动的标识。'
    id = 'cloudPcScreen'
  }else if(key.startsWith('cloudPcTer')){
    pageText = '方法1:近距离聚焦拍摄云电脑终端的正面,露出移动的标识。'
    id = 'cloudPcTer'
  }else if(key.startsWith('Owsf')){
    pageText = '方法1:近距离聚焦拍摄室外安防的正面,露出移动的标识。'
    id = 'Owsf'
  }else if(key.startsWith('gongFu')){
    pageText = '方法1:拍摄时请手持工牌,并将工服上的logo置于屏幕中央。'
    id = 'gongfu'
  }else if(key.startsWith('gongPai')){
    pageText = '方法1:拍摄时请手持工牌,将摄像头聚焦到工牌上。'
    id = 'gongpai'
  }else if(key.startsWith('account')){
    pageText = '方法1:拍摄时请保持垂直拍摄，避免出现反光、画面不清晰、画面抖动的情况。'
    id = 'account'
  }else if(key.startsWith('Otv')){
    pageText = '方法1:拍摄时请将正常播放画面的电视机置于屏幕中央。'
    id = 'Otv'
  }

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

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").show()
  }
  if(stepId.includes('SN') || stepId.startsWith('complain')){
    $("#shootButt").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((e)=>{
  let key = $(e.target).attr('key')

  if(key == 'photo'){
    $('#pictureShowAlert').hide()
  }else{
    util.httpRequest({
      url: '/retakeForButton',
      data: {
        applyId: applyId,
        callId: callId,
        voiceCode: stepId
      }
    }).then(res=>{})

    $('#snAlertDiv').hide()
    $('#snErrorTs').text('')
  }

  snConfirmFlag = false
  jdhAndCgmClickHide = true
  ifSnSubmitPicture = 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()
  $('#noShootShowAlert').hide()
  noShootClick = true
  $('#pictureShowAlert').hide()

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

  if(key=='yiwancheng' && stepId.includes('SN')){
    paiZhao()
    $('#pictureShowAlert').show()

    return
  }

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

var ifSnSubmitPicture = false
$('#submitPicture').click(()=>{
  $('#loadingText').text('上传中，请稍候...')
  $('#loading').show()

  util.httpRequest({
    url: '/takePhoto ',
    time: 20000,
    data: {
      applyId: applyId,
      callId: callId,
      voiceCode: stepId,
      button_name: 'yiwancheng',
      picData: picCode
    }
  }).then(res=>{
    submitPictureSucc()

    if(res.code == 200){
      $('#pictureShowAlert').hide()
    }else{
      toast(res.msg)
    }
  }).catch(e=>{
    $('#loading').hide()
    toast('网络拥堵，请切换网络重新提交')
  })
})

function submitPictureSucc(){
  $('#loading').hide()
  ifSnSubmitPicture = true
  
  setTimeout(() => {
    jdhAndCgmClickHide = false
    zgmExampleShow = false
  }, 1000);
}

//账号和设备串号的弹窗逻辑
$("#accountAlertShow").click(()=>{
  $("#accountValue").val('')
  $("#accountAlertDiv").show()
})
function inputCancel(){
  $("#accountValue").val('')
  $("#accountAlertDiv").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(){
  if(!$("#snValue").val()){
    toast('请输入设备串号') 
    return
  }

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

      snConfirmFlag = false
    }else if(res.code == 5001){
      $('#snErrorTs').css('opacity','1')
      $("#snErrorTs").text(res.msg)
      $('#snErrorTs').addClass('tsRed')
      $("#snValue").addClass('red')
    }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(){
  snInputNum = window.snInputNum||5
  noShootNum = window.noShootNum||5

  $("#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')
  if(stepId.startsWith('jdh')){
    jdhEaxmpleShow = true
  }
  if(stepId.startsWith('cgm')){
    cgmExampleShow = true
  }
  if(stepId.startsWith('zgm')){
    zgmExampleShow = true
  }
  $("#snExampleAlert").hide()
})
$("#hideJdhSnSbErrorAlert").click(()=>{
  $("#jdhSnSbErrorAlert").hide()
  jdhAndCgmClickHide = true
})
$("#hideCgmSnSbErrorAlert").click(()=>{
  $("#cgmSnSbErrorAlert").hide()
  jdhAndCgmClickHide = true
})
$("#hideNoShootAlert").click(()=>{
  $("#noShootShowAlert").hide()
  noShootClick = true
})
$("#takePhotoAgain").click(()=>{
  $("#pictureShowAlert").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')
});

const canvas = document.getElementById('canvas');
const photo = document.getElementById('photoImg');
const viewfinder = document.getElementById('cameraArea');
var picCode = ''

function paiZhao(){
  let videoTest = $('#local-player video')[0]

  // 设置canvas尺寸与视频相同
  canvas.width = videoTest.videoWidth;
  canvas.height = (videoTest.videoHeight*1.2)/3;
  
  // 在canvas上绘制视频帧
  const context = canvas.getContext('2d');
  context.drawImage(videoTest, 0, videoTest.getBoundingClientRect().height*2.2/3, canvas.width, canvas.height,0,0,canvas.width,canvas.height);

  // canvas.toBlob((blob) => {
  //   let sizeKB = (blob.size / 1024).toFixed(2);
    
  //   console.log(sizeKB)
  // }, 'image/png', 0.92); 
  
  // 将照片转换为数据URL并显示
  const data = canvas.toDataURL('image/png');
  photo.setAttribute('src', data);
  picCode = data

  $('#phone').css('height','100%')
  $('#phone').css('top','0')
}
function paiZhao2(){
  let videoTest = $('#local-player video')[0]

  // 设置canvas尺寸为取景框大小
  canvas.width = viewfinder.offsetWidth
  canvas.height = viewfinder.offsetHeight
  
  // 计算取景框在视频中的位置
  const videoWidth = videoTest.videoWidth;
  const videoHeight = videoTest.videoHeight;
  const videoAspectRatio = videoWidth / videoHeight;
  
  const containerWidth = videoTest.offsetWidth;
  const containerHeight = videoTest.offsetHeight;
  
  // 计算视频在容器中的实际显示尺寸
  let drawWidth, drawHeight, offsetX, offsetY;
  
  if (containerWidth / containerHeight > videoAspectRatio) {
      // 视频高度占满容器
      drawHeight = containerHeight;
      drawWidth = drawHeight * videoAspectRatio;
      offsetX = (containerWidth - drawWidth) / 2;
      offsetY = 0;
  } else {
      // 视频宽度占满容器
      drawWidth = containerWidth;
      drawHeight = drawWidth / videoAspectRatio;
      offsetX = 0;
      offsetY = (containerHeight - drawHeight) / 2;
  }
  
  // 计算取景框在视频中的位置和尺寸（以视频实际像素为单位）
  const viewfinderRect = viewfinder.getBoundingClientRect();
  const videoRect = videoTest.getBoundingClientRect();
  
  const scaleX = videoWidth / drawWidth;
  const scaleY = videoHeight / drawHeight;
  
  const captureX = (viewfinderRect.left - videoRect.left - offsetX) * scaleX;
  const captureY = (viewfinderRect.top - videoRect.top - offsetY) * scaleY;
  const captureWidth = viewfinderRect.width * scaleX;
  const captureHeight = viewfinderRect.height * scaleY;
  
  // 在canvas上绘制视频帧
  const context = canvas.getContext('2d');
  // context.drawImage(
  //   videoTest,
  //   captureX, captureY, captureWidth, captureHeight,0, 0, canvas.width, canvas.height);
    context.drawImage(
      videoTest,
      0, captureY, videoWidth, captureHeight,0, 0, canvas.width, canvas.height);


  canvas.toBlob((blob) => {
    let sizeKB = (blob.size / 1024).toFixed(2);
    
    alert(sizeKB)
  }, 'image/png', 0.92); 
  
  // 将照片转换为数据URL并显示
  const data = canvas.toDataURL('image/png');
  photo.setAttribute('src', data);
  picCode = data

  $('#phone').css('height','100%')
  $('#phone').css('top','0')
}

const script = document.createElement('script');
script.src = 'js/lang.js?' + Date.now();
document.head.appendChild(script);