Skip to content

李宁 / Activity

Go to a project
Commit 9a637732 by 李宁
Options

1Merge branch 'takePicture'

2 parents a0658e1f 94f30c22
Inline Side-by-side
Showing 6 changed files with 110 additions and 1445 deletions
huaian/css/demo.css
......@@ -329,10 +329,13 @@ html,body{
outline: none
}
.alertDiv .inner .errorTs{
color: #F00;
color: #666;
font-size: .26rem;
margin-top: .16rem;
}
.alertDiv .inner .tsRed{
color: #F00;
}
.alertDiv .inner .bot{
display: flex;
justify-content: space-between;
......@@ -744,8 +747,9 @@ html,body{
margin-bottom: .2rem;
}
.paiZhaoCon img{
width: 3.76rem;
height: 6.68rem;
/* width: 3.76rem;
height: 6.68rem; */
width: 100%;
display: block;
margin: auto;
}
......
huaian/demo.html
......@@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>江苏移动</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/demo.css?22223000333">
<link rel="stylesheet" href="css/demo.css?3333">
</head>
<body>
......@@ -313,10 +313,10 @@
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/AgoraRTC_N.js"></script>
<script src="js/util.js?12312313"></script>
<script src="js/util.js?999999"></script>
<script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/demo.js?3333"></script>
<script src="js/demo.js?126466499"></script>
</script>
</body>
......
huaian/demo2.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>江苏移动</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/demo.css?22223333">
</head>
<body>
<div class="container">
<div class="cameraDiv" id="local-player"></div>
<canvas id="canvas" style="display: none;"></canvas>
<div class="conDiv">
<div class="tsDiv" id="exampleTsDiv">
<div class="tsleft">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/tanhao2.png" alt="">
<div id="exampleTsText">请正面拍摄书写规范的账号</div>
</div>
<div class="tsright" id="lookExample">
<div>查看示例</div>
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/rArrow.png" alt="">
</div>
</div>
<div class="swUp">
<div class="til">
<div class="left">
<img class="tx" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/tx.png">
<div>江苏移动</div>
</div>
<div class="right" id="cameraDiv">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/camera.png">
<div>镜头包</div>
</div>
</div>
<div class="detail" id="contextDiv"></div>
</div>
<div class="mpTs" id="menPaiDiv">
<div class="mpL">工单门牌号: <span id="menPaiShow"></span></div>
<div class="mpR modifyMp">门牌号有误? <span>点击修改</span></div>
</div>
<div class="swMiddle">
<div class="cts timeTs">将检测内容置于画面中央 <span>2s</span></div>
<div class="switchDiv" id="videoSwitch">
<img class="reverse" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/reverse.png">
<div>切换</div>
</div>
<div class="border"></div>
<div class="center" id="cameraArea"></div>
<div class="border"></div>
<div class="butt" id="inputAccountTs">
<div class="text">账号识别困难?点这里</div>
<div class="bclick" id="accountAlertShow">手动输入</div>
</div>
</div>
<div class="swDown" id="tipDiv">
<div class="buttDiv">
<div class="one none clickButt" id="readButt" key="ok">准备好了</div>
<div class="one none clickButt" id="nextQuestion" key="nextStep">下一个问题</div>
<div class="two none" id="qiaoOrZhi">
<div class="clickButt" key="zhilian">直连</div>
<div class="clickButt" key="qiaolian">桥连</div>
</div>
<div class="three none" id="wangXian">
<div class="clickButt" key="mingxian">光纤明线</div>
<div class="clickButt" key="anxian">光纤暗线</div>
<div class="clickButt" key="wangxian">网线</div>
</div>
<div class="two none" id="guangLan">
<div class="clickButt" key="yinxing">隐形光缆</div>
<div class="clickButt" key="baise">白色皮缆</div>
</div>
<div class="two none" id="shiFou">
<div class="clickButt" key="yes">是</div>
<div class="clickButt" key="no">否</div>
</div>
<div class="two none" id="joinFlag">
<div class="clickButt" key="canjia">参加</div>
<div class="clickButt" key="bucanjia">不参加</div>
</div>
<div class="three none" id="donwLOad">
<div class="clickButt" key="yixiazai">是</div>
<div class="clickButt" key="weixiazai">否</div>
<div class="clickButt" key="buqingchu">不清楚</div>
</div>
<div class="two none" id="shootButt2">
<div class="clickButt blue" key="uninstall">用户未安装</div>
<div class="clickButt blue" key="yiwancheng">已完成</div>
</div>
<div class="one none clickButt" id="shootButt" key="yiwancheng">已完成</div>
</div>
</div>
</div>
<audio id="mp3Source" muted playsinline src=""></audio>
<div class="alertDiv" id="accountAlertDiv">
<div class="inner">
<div class="til">输入用户账号</div>
<input id="accountValue" class="input" type="text" placeholder="请输入用户账号">
<div class="bot">
<button class="cancel" onclick="inputCancel()">取消</button>
<button class="submit" onclick="accountInputSubmit()">提交</button>
</div>
</div>
</div>
<div class="alertDiv" id="snAlertDiv">
<div class="inner">
<div class="til" id="snAlertTile">请确认设备串号</div>
<textarea id="snValue" class="input snInput" rows="1" type="text" placeholder="请输入设备串号"></textarea>
<div class="errorTs" id="snErrorTs">如识别错误你可重新进行拍摄或直接修改</div>
<div class="bot">
<button class="cancel snAgain">重新拍摄</button>
<button class="submit" onclick="snInputSubmit()">确认</button>
</div>
</div>
</div>
<div class="waittingDiv" id="waitting">
<div class="inner">
<div class="imgDiv">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/back.png" alt="" style="display: block;">
<img class="loadImg" id="loadImg1" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/1.png" alt="">
</div>
<div style="line-height: 1;" id="waitText">记录中，请稍后...</div>
</div>
</div>
</div>
<div class="outAlert" id="accountExampleAlert">
<div class="exampleCon">
<div class="up">
<div class="til">示例</div>
<div class="text">1、手写账号数字请规整，避免识别出错！</div>
<div class="text">2、拍摄时请保持垂直拍摄，避免出现反光、画面不清晰、画面抖动的情况</div>
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/example.png" alt="">
</div>
<div class="butt" id="hideAccountExample">确认</div>
</div>
</div>
<div class="outAlert" id="confirmFlag">
<div class="alertCon">
<div class="info">因长时间未收到有效视频信息，质检流程暂时关闭。</div>
<div class="butt">
<div class="left" id="pageClose">关闭</div>
<div class="right" id="continueTest">继续质检</div>
</div>
</div>
</div>
<div class="outAlert" id="beginAlert">
<div class="beginCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">拍摄时注意以下事项</div>
</div>
<div class="ts">您好，师傅，我是你的智能质检助手</div>
<!-- <div class="one">1.语音回复时，请保持周围环境安静，如果周围环境较为喧嚣，进入质检后，你可<span>点击页面右上方的麦克风图标关闭麦克风</span>，选择页面按钮与我交互。</div>
<img class="oneImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bU.png" alt=""> -->
<div class="two" id="beginTs">为了保证检测的正确率和效率，拍摄设备时，请<span>从设备的正面角度进行拍摄</span>。</div>
<img class="twoImg" id="beginImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bD.png" alt="">
<div class="bts">祝您工作顺利，快开启质检之旅吧2!</div>
<div class="butt" id="videoBegin">立即开始</div>
</div>
</div>
<div class="outAlert" id="gongfuExampleAlert">
<div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts">拍摄时请手持工牌，并将工服上的logo置于屏幕中央，如图所示:</div>
<img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png" alt="">
<div class="butt" id="hideGongfuAlert">我知道了</div>
</div>
</div>
<div class="outAlert" id="gongpaiExampleAlert">
<div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts">如果您的工牌已经有了“岁月”的痕迹（磨损严重），拍摄时请将摄像头聚焦到工牌，如下图所示</div>
<img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongpai.png" alt="">
<div class="butt" id="hideGongpaiAlert">我知道了</div>
</div>
</div>
<div class="outAlert" id="snExampleAlert">
<div class="mpCon snCon">
<div class="stil">查看示例</div>
<div class="bts" id="snExampleText"></div>
<img class="twoImg" id="snExampleImg" alt="">
<div class="butt" id="hidesnExampleAlert">我知道了</div>
</div>
</div>
<div class="waittingDiv" id="loading" style="display: block;">
<div class="inner">
<div class="imgDiv">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/back.png" alt="" style="display: block;">
<img class="loadImg" id="loadImg1" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/1.png" alt="">
</div>
<div style="line-height: 1;">加载中，请稍候...</div>
</div>
</div>
<div id="pageDiv">
<div class="outAlert pickAlert" v-if="reasonPickData.isShow" style="display: flex-end;">
<van-picker
show-toolbar
:title="reasonPickData.title"
:columns="reasonPickData.arr"
:default-index="reasonPickData.index"
@cancel="reasonCancel"
@confirm="reasonConfirm"
/>
</div>
</div>
<div class="outAlert" id="jdhSnSbErrorAlert">
<div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">串号无法识别? 请进行以下尝试</div>
</div>
<div class="bts small">1、请将摄像头近距离正面聚焦在 STBID/SN 码上，确保整串字符完整清晰。</div>
<img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/jdhSnSbError.png" alt="">
<div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div>
<img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png" alt="">
<div class="butt" id="hideJdhSnSbErrorAlert">我知道了</div>
</div>
</div>
<div class="outAlert" id="cgmSnSbErrorAlert">
<div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts small">1、请将摄像头近距离正面聚焦在 CMEI码上，确保整串字符完整清晰。</div>
<img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cgmSnSbError.png" alt="">
<div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div>
<img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png" alt="">
<div class="butt" id="hideCgmSnSbErrorAlert">我知道了</div>
</div>
</div>
<div class="outAlert" id="noShootShowAlert">
<div class="noShootCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">设备无法识别? 请进行以下尝试</div>
</div>
<div class="dtil" id="noShootTextShow">方法1:近距离聚焦拍摄光猫正面,露出移动的标识。</div>
<img class="dimg" id="noShootImgShow" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/noShoot/Ogm.png">
<div class="dtil">方法2:使用页面右上方镜头包功能尝试切换摄像头进行识别。</div>
<img class="dimg" src="http://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png">
<div class="dtil">方法3:点击【无法拍摄】跳过此环节。</div>
<div class="botBut">
<div class="clickButt left" key="bunengpai">无法拍摄</div>
<div class="right" id="hideNoShootAlert">我知道了</div>
</div>
</div>
</div>
<div class="outAlert" id="pictureShowAlert">
<div class="paiZhaoCon">
<div class="til">温馨提示</div>
<div class="ts">为确保准确识别串号，请拍清照片并确认串号清晰可见后，再提交。</div>
<img id="photoImg" src="http://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png">
<div class="botBut">
<div class="left snAgain" key="photo">重新拍摄</div>
<div class="right" id="submitPicture">提交</div>
</div>
</div>
</div>
<!-- <script type="text/javascript" charset="utf-8" src="js/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
console.log('vConsole 初始化')
</script> -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/AgoraRTC_N.js"></script>
<script src="js/util.js?12312313"></script>
<script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/demo2.js?99988999"></script>
</script>
</body>
</html>
\ No newline at end of file
huaian/js/demo.js
......@@ -135,8 +135,8 @@ var noShootClick = false
var jdhEaxmpleShow = false
var cgmExampleShow = false
var zgmExampleShow = false
var snInputNum = window.snInputNum||5
var noShootNum = window.noShootNum||5
var snInputNum
var noShootNum
function getProcess(){
if(!window.location.href.includes('demo.html')){
......@@ -162,6 +162,10 @@ function getProcess(){
$('#waitting').show()
$("#mp3Source")[0].pause()
//处理下图片提交的等待框
submitPictureSucc()
$('#pictureShowAlert').hide()
return
}else{
$('#waitting').hide()
......@@ -174,6 +178,7 @@ function getProcess(){
$('#snAlertTile').text('请确认设备串号')
$('#snErrorTs').text('如识别错误你可重新进行拍摄'+(res.tryNum>=snInputNum?'或直接修改':''))
$('#snErrorTs').removeClass('tsRed')
$('#snErrorTs').css('opacity','1')
if(res.tryNum < snInputNum){
$('#snValue').prop('readonly', true);
......@@ -243,6 +248,7 @@ function getProcess(){
if(!snConfirmFlag && !ifClickHide){
$('#snAlertTile').text('请输入设备串号')
$('#snErrorTs').text('串号多次未通过,你可手动输入设备串号')
$('#snErrorTs').addClass('tsRed')
$('#snErrorTs').css('opacity','1')
$("#snValue").val('')
$("#snValue").removeClass('red')
......@@ -655,6 +661,7 @@ $('#submitPicture').click(()=>{
util.httpRequest({
url: '/takePhoto ',
time: 5000,
data: {
applyId: applyId,
callId: callId,
......@@ -663,22 +670,29 @@ $('#submitPicture').click(()=>{
picData: picCode
}
}).then(res=>{
$('#loading').hide()
ifSnSubmitPicture = true
setTimeout(() => {
jdhAndCgmClickHide = false
zgmExampleShow = false
}, 1000);
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('')
......@@ -732,6 +746,7 @@ function snInputSubmit(){
}else if(res.code == 5001){
$('#snErrorTs').css('opacity','1')
$("#snErrorTs").text(res.msg)
$('#snErrorTs').addClass('tsRed')
$("#snValue").addClass('red')
}else {
toast('网络异常，请重新提交')
......@@ -824,6 +839,9 @@ async function setEnabled(type, state) {
}
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()
......@@ -1018,26 +1036,89 @@ $(window).on('load', function() {
$('#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);
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photoImg');
// 将照片转换为数据URL并显示
const data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
picCode = data
var picCode = ''
function paiZhao(){
$('#phone').css('height','100%')
$('#phone').css('top','0')
}
function paiZhao2(){
let videoTest = $('#local-player video')[0]
// 设置canvas尺寸与视频相同
canvas.width = videoTest.videoWidth;
canvas.height = videoTest.videoHeight;
// 设置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, 0, 0, canvas.width, canvas.height);
// 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);
......@@ -1053,8 +1134,6 @@ function paiZhao(){
$('#phone').css('height','100%')
$('#phone').css('top','0')
}
window.paiZhao = paiZhao
const script = document.createElement('script');
script.src = 'js/lang.js?' + Date.now();
......
huaian/js/demo2.js deleted 100644 → 0
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
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()
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>=window.snInputNum?'或直接修改':'')
if(res.tryNum < window.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>=window.snInputNum && ifSnSubmitPicture){
//sn多次未识别到的弹窗
if(!snConfirmFlag && !ifClickHide){
$('#snAlertTile').text('请输入设备串号')
$('#snErrorTs').text('串号多次未通过,你可手动输入设备串号')
$("#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<window.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>=window.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').html('')
}
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(()=>{
util.httpRequest({
url: '/takePhoto ',
data: {
applyId: applyId,
callId: callId,
voiceCode: stepId,
button_name: 'yiwancheng',
picData: picCode
}
}).then(res=>{
ifSnSubmitPicture = true
setTimeout(() => {
jdhAndCgmClickHide = false
zgmExampleShow = false
}, 1000);
if(res.code == 200){
$('#pictureShowAlert').hide()
}else{
toast(res.msg)
}
})
})
//账号和设备串号的弹窗逻辑
$("#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").html(res.msg)
$("#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(){
$("#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 = 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 // 目标canvas参数
);
//context.drawImage(videoTest, 0, 200, 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')
}
window.paiZhao = paiZhao
const script = document.createElement('script');
script.src = 'js/lang.js?' + Date.now();
document.head.appendChild(script);
\ No newline at end of file
huaian/js/util.js
......@@ -78,7 +78,7 @@
axios ({
method: 'post',
url:origin + middle + param.url,
timeout:15000,
timeout: param.time||15000,
data:param.data,
headers: {
'Content-Type': 'application/json'
......@@ -86,7 +86,7 @@
}).then((res) => {
resolve(res.data)
}).catch(res => {
reject(res.data)
reject(res)
})
})
},
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!