Skip to content

李宁 / Activity

Go to a project
Commit 49713984 by 李宁
Options

1

1 parent 5984aafb
Inline Side-by-side
Showing 4 changed files with 449 additions and 168 deletions
huaian/css/demo.css
...@@ -227,10 +227,6 @@ html,body{ ...@@ -227,10 +227,6 @@ html,body{
font-size: .36rem; font-size: .36rem;
font-weight: 500; font-weight: 500;
} }
.conDiv .swDown .tip{
display: none;
font-size: .28rem;
}
.conDiv .swDown .buttDiv .one{ .conDiv .swDown .buttDiv .one{
border-radius: 4px; border-radius: 4px;
background: #568FFF; background: #568FFF;
...@@ -275,24 +271,6 @@ html,body{ ...@@ -275,24 +271,6 @@ html,body{
.conDiv .swDown .buttDiv .none{ .conDiv .swDown .buttDiv .none{
display: none; display: none;
} }
.conDiv .swDown .buttDiv .twoNew .left{
width: 1.68rem;
background: #2D2D2D;
color: #B2B2B2;
border: none;
}
.conDiv .swDown .buttDiv .twoNew .blue{
width: 5.18rem;
}
.conDiv .swDown .buttDiv .threeNew .left{
width: 1.68rem;
background: #2D2D2D;
color: #B2B2B2;
border: none;
}
.conDiv .swDown .buttDiv .threeNew .blue{
width: 2.5rem;
}
.alertDiv{ .alertDiv{
position: fixed; position: fixed;
...@@ -618,18 +596,17 @@ html,body{ ...@@ -618,18 +596,17 @@ html,body{
.mpCon .til{ .mpCon .til{
border-radius: .2rem .4rem .4rem 0; border-radius: .2rem .4rem .4rem 0;
background: #568FFE; background: #568FFE;
width: 1.56rem;
text-align: center; text-align: center;
font-size: .28rem; font-size: .28rem;
color: #fff; color: #fff;
margin-top: .56rem; margin-top: .56rem;
padding: .12rem 0; padding: .12rem .2rem;
} }
.mpCon .bts{ .mpCon .bts{
color: #333; color: #333;
font-size: .32rem; font-size: .32rem;
margin-top: .2rem; margin-top: .2rem;
line-height: .52rem; line-height: .4rem;
} }
.mpCon .small{ .mpCon .small{
font-size: .28rem; font-size: .28rem;
...@@ -675,4 +652,116 @@ html,body{ ...@@ -675,4 +652,116 @@ html,body{
} }
.pickAlert .van-picker__title{ .pickAlert .van-picker__title{
line-height: 44px; line-height: 44px;
}
.noShootCon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
border-radius: .2rem;
width: 6rem;
font-size: .3rem;
padding: 0 .4rem;
box-sizing: border-box;
}
.noShootCon .topBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.noShootCon .til{
border-radius: .2rem .4rem .4rem 0;
background: #568FFE;
text-align: center;
font-size: .28rem;
color: #fff;
margin-top: .56rem;
padding: .12rem .2rem;
}
.noShootCon .dtil{
color: #333;
font-size: .28rem;
font-weight: 500;
margin-top: .24rem;
line-height: .4rem;;
}
.noShootCon .dimg{
width: 100%;
margin-top: .16rem;
}
.noShootCon .botBut{
display: flex;
justify-content: space-between;
margin-top: .32rem;
margin-bottom: .48rem;
}
.noShootCon .botBut div{
font-size: .32rem;
font-weight: 500;
border-radius: .08rem;
background: #F6F6F6;
color: #666;
height: .88rem;
line-height: .88rem;
text-align: center;
width: 2.52rem;
}
.noShootCon .botBut .right{
color: #fff;
background: #568FFE;
}
.paiZhaoCon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
border-radius: .2rem;
width: 6.4rem;
padding: .48rem;
box-sizing: border-box;
}
.paiZhaoCon .til{
color: #333;
text-align: center;
font-size: .36rem;
font-weight: bold;
margin-bottom: .2rem;
}
.paiZhaoCon .ts{
color: #333;
font-size: .32rem;
line-height: .52rem;
margin-bottom: .2rem;
}
.paiZhaoCon img{
width: 3.76rem;
height: 6.68rem;
display: block;
margin: auto;
}
.paiZhaoCon .botBut{
display: flex;
justify-content: space-between;
margin-top: .32rem;
}
.paiZhaoCon .botBut div{
font-size: .32rem;
font-weight: 500;
border-radius: .08rem;
background: #F6F6F6;
color: #666;
height: .88rem;
line-height: .88rem;
text-align: center;
width: 2.64rem;
}
.paiZhaoCon .botBut .right{
color: #fff;
background: #568FFE;
} }
\ No newline at end of file \ No newline at end of file
huaian/demo.html
...@@ -6,15 +6,14 @@ ...@@ -6,15 +6,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>江苏移动</title> <title>江苏移动</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/> <link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/demo.css?8989898989">
<link rel="stylesheet" href="css/demo.css?1289381230">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="cameraDiv" id="local-player"></div> <div class="cameraDiv" id="local-player"></div>
<canvas id="canvas" style="display: none;"></canvas>
<div class="conDiv"> <div class="conDiv">
<div class="tsDiv" id="exampleTsDiv"> <div class="tsDiv" id="exampleTsDiv">
...@@ -52,16 +51,16 @@ ...@@ -52,16 +51,16 @@
<div>切换</div> <div>切换</div>
</div> </div>
<div class="border"></div> <div class="border"></div>
<div class="center"></div> <div class="center" id="cameraArea"></div>
<div class="border"></div> <div class="border"></div>
<div class="butt" id="inputAccountTs"> <div class="butt" id="inputAccountTs">
<div class="text">账号识别困难?点这里</div> <div class="text">账号识别困难?点这里</div>
<div class="bclick" id="accountAlertShow">手动输入</div> <div class="bclick" id="accountAlertShow">手动输入</div>
</div> </div>
<div class="butt" id="inputSnTs"> <!-- <div class="butt" id="inputSnTs">
<div class="text">串号识别困难?点这里</div> <div class="text">串号识别困难?点这里</div>
<div class="bclick" id="snAlertShow">手动输入</div> <div class="bclick" id="snAlertShow">手动输入</div>
</div> </div> -->
</div> </div>
<div class="swDown" id="tipDiv"> <div class="swDown" id="tipDiv">
...@@ -70,11 +69,6 @@ ...@@ -70,11 +69,6 @@
<div class="one none clickButt" id="nextQuestion" key="nextStep">下一个问题</div> <div class="one none clickButt" id="nextQuestion" key="nextStep">下一个问题</div>
<div class="two none twoNew" id="shootButt">
<div class="clickButt left" key="bunengpai">无法拍摄</div>
<div class="blue clickButt" key="yiwancheng">已完成</div>
</div>
<div class="two none" id="qiaoOrZhi"> <div class="two none" id="qiaoOrZhi">
<div class="clickButt" key="zhilian">直连</div> <div class="clickButt" key="zhilian">直连</div>
<div class="clickButt" key="qiaolian">桥连</div> <div class="clickButt" key="qiaolian">桥连</div>
...@@ -102,18 +96,13 @@ ...@@ -102,18 +96,13 @@
<div class="clickButt" key="buqingchu">不清楚</div> <div class="clickButt" key="buqingchu">不清楚</div>
</div> </div>
<div class="three none threeNew" id="shootButt2"> <div class="two none" id="shootButt2">
<div class="clickButt left" key="bunengpai">无法拍摄</div>
<div class="clickButt blue" key="uninstall">用户未安装</div> <div class="clickButt blue" key="uninstall">用户未安装</div>
<div class="clickButt blue" key="yiwancheng">已完成</div> <div class="clickButt blue" key="yiwancheng">已完成</div>
</div> </div>
<div class="one none clickButt" id="snButton" key="yiwancheng">已完成</div> <div class="one none clickButt" id="shootButt" key="yiwancheng">已完成</div>
</div> </div>
<!-- <div class="tip1 tip">你可直接语音回复“准备好了”</div>
<div class="tip2 tip">你可语音回复“已完成”或“不能拍”</div>
<div class="tip3 tip">你可直接语音回复当前的状态</div> -->
</div> </div>
</div> </div>
...@@ -144,12 +133,12 @@ ...@@ -144,12 +133,12 @@
<div class="alertDiv" id="snAlertDiv2"> <div class="alertDiv" id="snAlertDiv2">
<div class="inner"> <div class="inner">
<div class="til">请确认设备串号</div> <div class="til" id="snAlertTile">请确认设备串号</div>
<textarea id="snValue2" class="input snInput" rows="1" type="text" placeholder="请输入设备串号"></textarea> <textarea id="snValue2" class="input snInput" rows="1" type="text" placeholder="请输入设备串号"></textarea>
<div class="ts" id="snTs">如识别错误你可重新进行拍摄或直接修改</div> <div class="ts" id="snTs">如识别错误你可重新进行拍摄或直接修改</div>
<div class="errorTs" id="snErrorTs2"></div> <div class="errorTs" id="snErrorTs2"></div>
<div class="bot"> <div class="bot">
<button class="cancel" id="snAgain">重新拍摄</button> <button class="cancel snAgain">重新拍摄</button>
<button class="submit" onclick="snInputSubmit('2')">确认</button> <button class="submit" onclick="snInputSubmit('2')">确认</button>
</div> </div>
</div> </div>
...@@ -212,7 +201,9 @@ ...@@ -212,7 +201,9 @@
<div class="outAlert" id="gongfuExampleAlert"> <div class="outAlert" id="gongfuExampleAlert">
<div class="mpCon"> <div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt=""> <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div class="til">温馨提示</div> <div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts">拍摄时请手持工牌，并将工服上的logo置于屏幕中央，如图所示:</div> <div class="bts">拍摄时请手持工牌，并将工服上的logo置于屏幕中央，如图所示:</div>
<img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png" alt=""> <img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png" alt="">
...@@ -223,7 +214,9 @@ ...@@ -223,7 +214,9 @@
<div class="outAlert" id="gongpaiExampleAlert"> <div class="outAlert" id="gongpaiExampleAlert">
<div class="mpCon"> <div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt=""> <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div class="til">温馨提示</div> <div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts">如果您的工牌已经有了“岁月”的痕迹（磨损严重），拍摄时请将摄像头聚焦到工牌，如下图所示</div> <div class="bts">如果您的工牌已经有了“岁月”的痕迹（磨损严重），拍摄时请将摄像头聚焦到工牌，如下图所示</div>
<img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongpai.png" alt=""> <img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongpai.png" alt="">
...@@ -267,7 +260,9 @@ ...@@ -267,7 +260,9 @@
<div class="outAlert" id="jdhSnSbErrorAlert"> <div class="outAlert" id="jdhSnSbErrorAlert">
<div class="mpCon"> <div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt=""> <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div class="til">温馨提示</div> <div style="display: flex;">
<div class="til">串号无法识别? 请进行以下尝试</div>
</div>
<div class="bts small">1、请将摄像头近距离正面聚焦在 STBID/SN 码上，确保整串字符完整清晰。</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=""> <img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/jdhSnSbError.png" alt="">
<div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div> <div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div>
...@@ -280,7 +275,9 @@ ...@@ -280,7 +275,9 @@
<div class="outAlert" id="cgmSnSbErrorAlert"> <div class="outAlert" id="cgmSnSbErrorAlert">
<div class="mpCon"> <div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt=""> <img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div class="til">温馨提示</div> <div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts small">1、请将摄像头近距离正面聚焦在 CMEI码上，确保整串字符完整清晰。</div> <div class="bts small">1、请将摄像头近距离正面聚焦在 CMEI码上，确保整串字符完整清晰。</div>
<img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cgmSnSbError.png" alt=""> <img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cgmSnSbError.png" alt="">
<div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div> <div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div>
...@@ -290,6 +287,40 @@ ...@@ -290,6 +287,40 @@
</div> </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 type="text/javascript" charset="utf-8" src="js/vconsole.min.js"></script>
<script> <script>
var vConsole = new VConsole(); var vConsole = new VConsole();
...@@ -300,11 +331,9 @@ ...@@ -300,11 +331,9 @@
<script src="js/axios.min.js"></script> <script src="js/axios.min.js"></script>
<script src="js/AgoraRTC_N.js"></script> <script src="js/AgoraRTC_N.js"></script>
<script src="js/util.js?12312313"></script> <script src="js/util.js?12312313"></script>
<script src="js/vue.min.js"></script> <script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script> <script src="js/vant.min.js"></script>
<script src="js/demo.js?99"></script>
<script src="js/demo.js?12121212"></script>
</script> </script>
</body> </body>
......
huaian/js/demo.js
...@@ -11,10 +11,10 @@ var mics = [] ...@@ -11,10 +11,10 @@ var mics = []
var cams = [] var cams = []
var camsId = '' var camsId = ''
var remoteUsers = {}; var remoteUsers = {};
var options = { var options = {
appid: 'bb627d3728164785b13e182757b15f0b', appid: 'bb627d3728164785b13e182757b15f0b',
} }
if(window.location.origin.includes('hazj.lgyzpt.com')){ if(window.location.origin.includes('hazj.lgyzpt.com')){
options.appid = '4f143573c56744c698820b1ef45ec064' options.appid = '4f143573c56744c698820b1ef45ec064'
} }
...@@ -26,44 +26,33 @@ if(param.processType == 'complaint'){ ...@@ -26,44 +26,33 @@ if(param.processType == 'complaint'){
$("#beginImg").attr('src', 'https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png') $("#beginImg").attr('src', 'https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png')
$("#beginImg").css('width','70%') $("#beginImg").css('width','70%')
} }
var curVideoProfile;
AgoraRTC.onAutoplayFailed = () => { AgoraRTC.onAutoplayFailed = () => {
toast("click to start autoplay!"); console.log("click to start autoplay!")
}; }
AgoraRTC.onMicrophoneChanged = async changedDevice => { AgoraRTC.onMicrophoneChanged = async changedDevice => {
// When plugging in a device, switch to a device that is newly plugged in.
if (changedDevice.state === "ACTIVE") { if (changedDevice.state === "ACTIVE") {
localTracks.audioTrack.setDevice(changedDevice.device.deviceId); 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()) { } else if (changedDevice.device.label === localTracks.audioTrack.getTrackLabel()) {
const oldMicrophones = await AgoraRTC.getMicrophones(); const oldMicrophones = await AgoraRTC.getMicrophones();
oldMicrophones[0] && localTracks.audioTrack.setDevice(oldMicrophones[0].deviceId); oldMicrophones[0] && localTracks.audioTrack.setDevice(oldMicrophones[0].deviceId);
} }
}; }
AgoraRTC.onCameraChanged = async changedDevice => { AgoraRTC.onCameraChanged = async changedDevice => {
// When plugging in a device, switch to a device that is newly plugged in.
if (changedDevice.state === "ACTIVE") { if (changedDevice.state === "ACTIVE") {
localTracks.videoTrack.setDevice(changedDevice.device.deviceId); 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()) { } else if (changedDevice.device.label === localTracks.videoTrack.getTrackLabel()) {
const oldCameras = await AgoraRTC.getCameras(); const oldCameras = await AgoraRTC.getCameras();
oldCameras[0] && localTracks.videoTrack.setDevice(oldCameras[0].deviceId); oldCameras[0] && localTracks.videoTrack.setDevice(oldCameras[0].deviceId);
} }
}; }
function createClient() { function createClient() {
// create Agora client
client = AgoraRTC.createClient({ client = AgoraRTC.createClient({
mode: "rtc", mode: "rtc",
codec: "vp8" codec: "vp8"
}); })
} }
async function createTrackAndPublish() { async function createTrackAndPublish() {
// create local audio and video tracks
const tracks = await Promise.all([ const tracks = await Promise.all([
AgoraRTC.createMicrophoneAudioTrack({ AgoraRTC.createMicrophoneAudioTrack({
encoderConfig: "music_standard" encoderConfig: "music_standard"
...@@ -80,26 +69,16 @@ async function createTrackAndPublish() { ...@@ -80,26 +69,16 @@ async function createTrackAndPublish() {
localTracks.audioTrack = tracks[0] localTracks.audioTrack = tracks[0]
localTracks.videoTrack = tracks[1] localTracks.videoTrack = tracks[1]
// play local video track
localTracks.videoTrack.play("local-player", { localTracks.videoTrack.play("local-player", {
mirror: $("#mirror-check").prop("checked") mirror: $("#mirror-check").prop("checked")
}); });
// localTracks.audioTrack.play("local-player", {
// mirror: $("#mirror-check").prop("checked")
// });
// publish local tracks to channel
cams = await AgoraRTC.getCameras(); cams = await AgoraRTC.getCameras();
mics = await AgoraRTC.getMicrophones(); mics = await AgoraRTC.getMicrophones();
await client.publish(Object.values(localTracks)); 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() { async function join() {
client.on("user-published", handleUserPublished); client.on("user-published", handleUserPublished);
client.on("user-unpublished", handleUserUnpublished); client.on("user-unpublished", handleUserUnpublished);
// start Proxy if needed
const mode = Number(options.proxyMode) const mode = Number(options.proxyMode)
if (mode != 0 && !isNaN(mode)) { if (mode != 0 && !isNaN(mode)) {
client.startProxyServer(mode); client.startProxyServer(mode);
...@@ -114,10 +93,6 @@ async function join() { ...@@ -114,10 +93,6 @@ async function join() {
return flag return flag
} }
/*
* Stop all local and remote tracks then leave the channel.
*/
async function leave() { async function leave() {
for (trackName in localTracks) { for (trackName in localTracks) {
var track = localTracks[trackName]; var track = localTracks[trackName];
...@@ -127,32 +102,17 @@ async function leave() { ...@@ -127,32 +102,17 @@ async function leave() {
localTracks[trackName] = undefined; localTracks[trackName] = undefined;
} }
} }
// Remove remote users and player views.
remoteUsers = {}; remoteUsers = {};
// leave the channel
if(!client){ if(!client){
return return
} }
await client.leave(); 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) { function handleUserPublished(user, mediaType) {
const id = user.uid; const id = user.uid;
remoteUsers[id] = user; remoteUsers[id] = user;
$("#remote-uid").val(id) $("#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) { function handleUserUnpublished(user, mediaType) {
if (mediaType === "video") { if (mediaType === "video") {
const id = user.uid; const id = user.uid;
...@@ -161,23 +121,23 @@ function handleUserUnpublished(user, mediaType) { ...@@ -161,23 +121,23 @@ function handleUserUnpublished(user, mediaType) {
} }
} }
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- //-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
const util = new window.publicMethod() ; const util = new window.publicMethod() ;
var intervalStr = '' var intervalStr = ''
var callId = '' var callId = ''
var stepId = '' var stepId = ''
var tryNum = '' var tryNum = ''
var ifListener = false var ifListener = false
var ifClickHide = false var ifClickHide = false
var countDownStr = '' //var countDownStr = ''
var snConfirmFlag = false var snConfirmFlag = false
var jdhAndCgmClickHide = false var jdhAndCgmClickHide = false
function getProcess(){ var noShootClick = false
var jdhEaxmpleShow = false
var cgmExampleShow = false
var zgmExampleShow = false
function getProcess(){
if(!window.location.href.includes('demo.html')){ if(!window.location.href.includes('demo.html')){
return return
} }
...@@ -197,27 +157,76 @@ function getProcess(){ ...@@ -197,27 +157,76 @@ function getProcess(){
$("#confirmFlag").show() $("#confirmFlag").show()
return return
} }
if(res.checkStatus && res.checkStatus==1){ if(res.checkStatus && res.checkStatus==1){
$('#waitting').show() $('#waitting').show()
$("#mp3Source")[0].pause() $("#mp3Source")[0].pause()
return
}else{ }else{
$('#waitting').hide() $('#waitting').hide()
} }
if(res.voiceCode && res.voiceCode.includes('SN')){ if(res.voiceCode && res.voiceCode.includes('SN') && !res.contentSN && res.c){
if(res.voiceCode.startsWith('jdh') && res.tryNum>=1 && !jdhAndCgmClickHide && !res.contentSN){
$("#jdhSnSbErrorAlert").show() if(res.tryNum>=window.snInputNum && ifSnSubmitPicture){
//sn多次未识别到的弹窗
if(!snConfirmFlag && !ifClickHide){
$('#snAlertTile').text('请输入设备串号')
$('#snTs').text('串号多次未通过,你可手动输入设备串号')
$("#snValue2").val('')
$("#snAlertDiv2").show()
$('#snValue').prop('readonly', false);
addSnInputEvent()
snConfirmFlag = true
return
}
}else{
//机顶盒和从光猫sn识别错误提示弹窗
if(res.voiceCode.startsWith('jdh') && res.tryNum>=1 && !jdhAndCgmClickHide){
$("#jdhSnSbErrorAlert").show()
}
if(res.voiceCode.startsWith('cgm') && res.tryNum>=1 && !jdhAndCgmClickHide){
$("#cgmSnSbErrorAlert").show()
}
}
}
//示例弹窗
if(res.voiceCode && res.voiceCode.includes('SN') || res.voiceCode.startsWith('complain')){
let param = getSnInfo(res.voiceCode)
let lsFlag = false
if((res.voiceCode.startsWith('jdh')&&!jdhEaxmpleShow) || (res.voiceCode.startsWith('cgm')&&!cgmExampleShow)){
lsFlag = res.tryNum<1?true:false
}else if(!sessionStorage.getItem(param.cacheId) || (res.voiceCode.startsWith('zgm')&&res.tryNum<window.snInputNum&&!zgmExampleShow)){
lsFlag = true
} }
if(res.voiceCode.startsWith('cgm') && res.tryNum>=1 && !jdhAndCgmClickHide && !res.contentSN){
$("#cgmSnSbErrorAlert").show() if(lsFlag){
$("#snExampleText").html(param.pageText)
$("#snExampleImg").attr('src', param.imgUrl)
$('#snExampleAlert').show()
} }
} }
//无法拍摄弹窗
let pa = getNoShootInfo(res.voiceCode)
if(pa.pageText && res.tryNum>=window.noShootNum && !noShootClick && res.checkStatus!=1){
$('#noShootTextShow').text(pa.pageText)
$('#noShootImgShow').attr('src', pa.imgUrl)
$('#noShootShowAlert').show()
}
//确认sn串号弹窗
if(!res.voiceCode || ((res.voiceCode+''+res.tryNum)==(stepId+''+tryNum))){ if(!res.voiceCode || ((res.voiceCode+''+res.tryNum)==(stepId+''+tryNum))){
if(res.contentSN && !snConfirmFlag && !ifClickHide){ if(res.contentSN && !snConfirmFlag && !ifClickHide){
$('#snAlertTile').text('请确认设备串号')
$('#snTs').text('如识别错误你可重新进行拍摄或直接修改')
$("#snValue2").val(res.contentSN) $("#snValue2").val(res.contentSN)
$("#snAlertDiv2").show() $("#snAlertDiv2").show()
$('#snValue').prop('readonly', res.tryNum>=window.snInputNum?false:true)
addSnInputEvent() addSnInputEvent()
snConfirmFlag = true snConfirmFlag = true
} }
...@@ -225,53 +234,37 @@ function getProcess(){ ...@@ -225,53 +234,37 @@ function getProcess(){
return return
} }
if(res.voiceCode.includes('gongFu_') && !sessionStorage.getItem('gongfuExampleAlert')){ //工服工牌示例弹窗
if(res.voiceCode && res.voiceCode.includes('gongFu_') && !sessionStorage.getItem('gongfuExampleAlert')){
$("#gongfuExampleAlert").show() $("#gongfuExampleAlert").show()
}else{ }else{
$("#gongfuExampleAlert").hide() $("#gongfuExampleAlert").hide()
} }
if(res.voiceCode && res.voiceCode.includes('gongPai_') && !sessionStorage.getItem('gongpaiExampleAlert')){
if(res.voiceCode.includes('gongPai_') && !sessionStorage.getItem('gongpaiExampleAlert')){
$("#gongpaiExampleAlert").show() $("#gongpaiExampleAlert").show()
}else{ }else{
$("#gongpaiExampleAlert").hide() $("#gongpaiExampleAlert").hide()
} }
//用户回访（已无）
if(res.voiceCode.startsWith('us') && res.voiceCode.includes('_4')){ if(res.voiceCode.startsWith('us') && res.voiceCode.includes('_4')){
$('#nextQuestion').show() $('#nextQuestion').show()
}else{ }else{
$('#nextQuestion').hide() $('#nextQuestion').hide()
} }
//账号识别困难提示
if(res.voiceCode.startsWith('account_') && res.tryNum>=2){ if(res.voiceCode.startsWith('account_') && res.tryNum>=2){
$("#inputAccountTs").css('display', 'flex') $("#inputAccountTs").css('display', 'flex')
}else{ }else{
$("#inputAccountTs").css('display', 'none') $("#inputAccountTs").css('display', 'none')
} }
if(res.voiceCode.includes('SN') || res.voiceCode.startsWith('complain')){ // if(res.voiceCode.includes('SN') && res.tryNum>=1){
let param = getSnInfo(res.voiceCode) // $("#inputSnTs").css('display', 'flex')
// }else{
let lsFlag = false // $("#inputSnTs").css('display', 'none')
if(res.voiceCode.startsWith('jdh') || res.voiceCode.startsWith('cgm')){ // }
lsFlag = res.tryNum<1?true:false
}else if(!sessionStorage.getItem(param.cacheId) || res.voiceCode.startsWith('zgm')){
lsFlag = true
}
if(lsFlag){
$("#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'){ if(res.tipCode == 'tip2'){
$('.timeTs').show() $('.timeTs').show()
...@@ -292,7 +285,7 @@ function getProcess(){ ...@@ -292,7 +285,7 @@ function getProcess(){
} }
}) })
audioSet(false) //audioSet(false)
}); });
$("#mp3Source")[0].addEventListener('ended', function() { $("#mp3Source")[0].addEventListener('ended', function() {
...@@ -305,7 +298,7 @@ function getProcess(){ ...@@ -305,7 +298,7 @@ function getProcess(){
voiceCode: stepId voiceCode: stepId
} }
}) })
audioSet(true) //audioSet(true)
if(stepId.includes('end')){ if(stepId.includes('end')){
free() free()
...@@ -321,15 +314,15 @@ function getProcess(){ ...@@ -321,15 +314,15 @@ function getProcess(){
$("#mp3Source")[0].play() $("#mp3Source")[0].play()
audioSet(false) audioSet(false)
if(countDownStr){ // if(countDownStr){
clearTimeout(countDownStr) // clearTimeout(countDownStr)
} // }
$("#mp3Source").on('loadedmetadata', function() { // $("#mp3Source").on('loadedmetadata', function() {
let duration = this.duration // let duration = this.duration
countDownStr = setTimeout(() => { // countDownStr = setTimeout(() => {
audioSet(false) // audioSet(false)
}, duration) // }, duration)
}) // })
ifListener = true ifListener = true
tryNum = res.tryNum tryNum = res.tryNum
...@@ -399,6 +392,57 @@ function getSnInfo(code){ ...@@ -399,6 +392,57 @@ function getSnInfo(code){
cacheId: id+'SnExampleAlert' 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 = 'Oinfs'
}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(){ function free(){
leave() leave()
...@@ -513,10 +557,10 @@ function setStepButt(){ ...@@ -513,10 +557,10 @@ function setStepButt(){
} }
let sArr = ["gongFu_","gongPai_","account_","env_","Ogm_","Ozgm_","Ocgm","Otv","lineSta_",,"cloudPcTer","cloudPcScreen"] let sArr = ["gongFu_","gongPai_","account_","env_","Ogm_","Ozgm_","Ocgm","Otv","lineSta_",,"cloudPcTer","cloudPcScreen"]
if(fn(stepId,sArr)){ if(fn(stepId,sArr)){
$("#shootButt").css('display','flex') $("#shootButt").show()
} }
if(stepId.includes('SN') || stepId.startsWith('complain')){ if(stepId.includes('SN') || stepId.startsWith('complain')){
$("#snButton").show() $("#shootButt").show()
} }
if(stepId.startsWith("jdhAccType_")){ if(stepId.startsWith("jdhAccType_")){
...@@ -539,20 +583,28 @@ function setStepButt(){ ...@@ -539,20 +583,28 @@ function setStepButt(){
} }
} }
$('#snAgain').click(()=>{ $('.snAgain').click((e)=>{
util.httpRequest({ let key = $(e.target).attr('key')
url: '/retakeForButton',
data: { if(key == 'photo'){
applyId: applyId, $('#pictureShowAlert').hide()
callId: callId, }else{
voiceCode: stepId util.httpRequest({
} url: '/retakeForButton',
}).then(res=>{}) data: {
applyId: applyId,
callId: callId,
voiceCode: stepId
}
}).then(res=>{})
$('#snAlertDiv2').hide()
$('#snErrorTs2').html('')
}
$('#snAlertDiv2').hide()
$('#snErrorTs2').html('')
snConfirmFlag = false snConfirmFlag = false
jdhAndCgmClickHide = true jdhAndCgmClickHide = true
ifSnSubmitPicture = false
ifClickHide = true ifClickHide = true
setTimeout(()=>{ setTimeout(()=>{
...@@ -574,9 +626,20 @@ $('.clickButt').click((e)=>{ ...@@ -574,9 +626,20 @@ $('.clickButt').click((e)=>{
},1000) },1000)
$('#errorAlert').hide() $('#errorAlert').hide()
$('#noShootShowAlert').hide()
noShootClick = true
$('#pictureShowAlert').hide()
$('#noShootShowAlert').hide()
let key = $(e.target).attr('key') let key = $(e.target).attr('key')
if(key=='yiwancheng' && stepId.includes('SN')){
paiZhao()
$('#pictureShowAlert').show()
return
}
util.httpRequest({ util.httpRequest({
url: '/button', url: '/button',
data: { data: {
...@@ -586,7 +649,30 @@ $('.clickButt').click((e)=>{ ...@@ -586,7 +649,30 @@ $('.clickButt').click((e)=>{
button_name: key button_name: key
} }
}).then(res=>{ }).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
jdhAndCgmClickHide = false jdhAndCgmClickHide = false
zgmExampleShow = false
if(res.code == 200){
$('#pictureShowAlert').hide()
}else{
toast(res.msg)
}
}) })
}) })
...@@ -595,12 +681,12 @@ $("#accountAlertShow").click(()=>{ ...@@ -595,12 +681,12 @@ $("#accountAlertShow").click(()=>{
$("#accountValue").val('') $("#accountValue").val('')
$("#accountAlertDiv").show() $("#accountAlertDiv").show()
}) })
$("#snAlertShow").click(()=>{ // $("#snAlertShow").click(()=>{
$("#snValue").val('') // $("#snValue").val('')
$("#snAlertDiv").show() // $("#snAlertDiv").show()
addSnInputEvent() // addSnInputEvent()
}) // })
$('#snValue2').focus(function() { $('#snValue2').focus(function() {
$("#snErrorTs2").html('') $("#snErrorTs2").html('')
}); });
...@@ -837,6 +923,15 @@ $("#hideGongfuAlert").click(()=>{ ...@@ -837,6 +923,15 @@ $("#hideGongfuAlert").click(()=>{
}) })
$("#hidesnExampleAlert").click(()=>{ $("#hidesnExampleAlert").click(()=>{
sessionStorage.setItem(getSnInfo().cacheId,'true') 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() $("#snExampleAlert").hide()
}) })
$("#hideJdhSnSbErrorAlert").click(()=>{ $("#hideJdhSnSbErrorAlert").click(()=>{
...@@ -847,6 +942,15 @@ $("#hideCgmSnSbErrorAlert").click(()=>{ ...@@ -847,6 +942,15 @@ $("#hideCgmSnSbErrorAlert").click(()=>{
$("#cgmSnSbErrorAlert").hide() $("#cgmSnSbErrorAlert").hide()
jdhAndCgmClickHide = true jdhAndCgmClickHide = true
}) })
$("#hideNoShootAlert").click(()=>{
$("#noShootShowAlert").hide()
noShootClick = true
})
$("#takePhotoAgain").click(()=>{
$("#pictureShowAlert").hide()
})
$("#lookExample").click(()=>{ $("#lookExample").click(()=>{
if(stepId.includes('SN') || stepId.startsWith('complain')){ if(stepId.includes('SN') || stepId.startsWith('complain')){
...@@ -930,4 +1034,61 @@ window.stopMedia = function(){ ...@@ -930,4 +1034,61 @@ window.stopMedia = function(){
$(window).on('load', function() { $(window).on('load', function() {
$('#loading').hide() $('#loading').hide()
$('#beginAlert').css('display','block') $('#beginAlert').css('display','block')
});
\ No newline at end of file \ No newline at end of file
});
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photoImg');
var picCode = ''
function paiZhao(){
let videoTest = $('#local-player video')[0]
// 设置canvas尺寸与视频相同
canvas.width = videoTest.videoWidth;
canvas.height = videoTest.videoHeight;
// 在canvas上绘制视频帧
const context = canvas.getContext('2d');
context.drawImage(videoTest, 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')
}
window.paiZhao = paiZhao
const script = document.createElement('script');
script.src = 'js/lang.js?' + Date.now();
document.head.appendChild(script);
window.notShoot = function(){
util.httpRequest({
url: '/button',
data: {
applyId: applyId,
callId: callId,
voiceCode: stepId,
button_name: 'bunengpai'
}
}).then(res=>{})
}
\ No newline at end of file \ No newline at end of file
huaian/js/lang.js 0 → 100644
window.noShootNum = 3
window.snInputNum = 3
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!