|
|
@@ -5,32 +5,43 @@
|
|
|
|
|
|
<!-- 三menu键 -->
|
|
|
<div id="foot-menu-wrap" :style="`height: ${footMenuWrapHeight}px`">
|
|
|
- <div @click.stop="()=>{sendKey(187); noOperationSetTimeout}"><van-icon name="wap-nav" size="24px"/></div>
|
|
|
- <div @click.stop="()=>{sendKey(3); noOperationSetTimeout}"><van-icon name="wap-home-o" size="24px"/></div>
|
|
|
- <div @click.stop="()=>{sendKey(4); noOperationSetTimeout}"><van-icon name="arrow-left" size="24px"/></div>
|
|
|
+ <div @click.stop="sendKey(187)"><van-icon name="wap-nav" size="24px"/></div>
|
|
|
+ <div @click.stop="sendKey(3)"><van-icon name="wap-home-o" size="24px"/></div>
|
|
|
+ <div @click.stop="sendKey(4)"><van-icon name="arrow-left" size="24px"/></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 悬浮按钮 -->
|
|
|
<FloatBtn :width="pageData.width" :height="pageData.height" @onClick="levitatedSphereVisible = true"/>
|
|
|
|
|
|
<!-- 右侧popup -->
|
|
|
- <RightPopup :engine="engine" :userCardId="this.parametersData.userCardId" :levitatedSphereVisible.sync="levitatedSphereVisible" @shearplate="shearplate" @exit="exit"/>
|
|
|
+ <RightPopup ref="rightPopupRef" :engine="engine" :userCardId="this.parametersData.userCardId" :levitatedSphereVisible.sync="levitatedSphereVisible" @shearplate="shearplate" @exit="exit"/>
|
|
|
|
|
|
<!-- 输入并复制到粘贴板 -->
|
|
|
<InputCopy ref="inputCopyRef" @openPasteboard="openPasteboard"/>
|
|
|
|
|
|
<!-- 云机内部的粘贴板内容 -->
|
|
|
<CloudPhoneClipboard ref="cloudPhoneClipboardRef" :doConnectDirectivesWs="doConnectDirectivesWs"/>
|
|
|
+
|
|
|
+ <!-- 超时无操作 -->
|
|
|
+ <TimeoutNoOps ref="timeoutNoOpsRef" />
|
|
|
+
|
|
|
+ <!-- 计时卡计时 | 计费规则 | 应用推荐 -->
|
|
|
+ <TimeBalance ref="timeBalanceRef" :parametersData="parametersData" @downline="$refs.rightPopupRef.downline()"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import meta from './config/meta.js';
|
|
|
import request from './config/request.js';
|
|
|
+import logReport from './config/logReport.js';
|
|
|
+import * as uni from '../../static/static/js/uni.webview.1.5.2.js';
|
|
|
+
|
|
|
import FloatBtn from './components/FloatBtn.vue';
|
|
|
import RightPopup from './components/RightPopup.vue';
|
|
|
import InputCopy from './components/InputCopy.vue';
|
|
|
import CloudPhoneClipboard from './components/CloudPhoneClipboard.vue';
|
|
|
+import TimeoutNoOps from './components/TimeoutNoOps.vue';
|
|
|
+import TimeBalance from './components/TimeBalance.vue';
|
|
|
|
|
|
/**
|
|
|
* @description: 判断当前页面运行环境
|
|
|
@@ -70,6 +81,8 @@ export default {
|
|
|
RightPopup,
|
|
|
InputCopy,
|
|
|
CloudPhoneClipboard,
|
|
|
+ TimeoutNoOps,
|
|
|
+ TimeBalance,
|
|
|
},
|
|
|
head() {
|
|
|
return {
|
|
|
@@ -85,18 +98,21 @@ export default {
|
|
|
onload: '$_script_loadHandler()', // 加载成功回调created生命周期中定义的方法
|
|
|
onerror: '$_script_errHandler()', // 加载失败回调created生命周期中定义的方法
|
|
|
},
|
|
|
- {
|
|
|
- // ./ 路径指向nuxt.config.js同级目录的static文件夹
|
|
|
- src: './static/js/uni.webview.1.5.2.js', // uniapp webview 1.5.2文件
|
|
|
- type: 'text/javascript',
|
|
|
- async: true,
|
|
|
- defer: false,
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // // ./ 路径指向nuxt.config.js同级目录的static文件夹
|
|
|
+ // src: './static/js/uni.webview.1.5.2.js', // uniapp webview 1.5.2文件
|
|
|
+ // type: 'text/javascript',
|
|
|
+ // async: true,
|
|
|
+ // defer: false,
|
|
|
+ // onload: '$_script_uni_loadHandler()', // 加载成功回调created生命周期中定义的方法
|
|
|
+ // }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 日志上报实例
|
|
|
+ logReportObj: null,
|
|
|
// SDK加载状态
|
|
|
sdkLoadStatus: 'loading', // sdk 加载状态 [loading|success|error]
|
|
|
// 页面数据
|
|
|
@@ -162,6 +178,9 @@ export default {
|
|
|
console.log('$_script_loadHandler: SDK加载成功');
|
|
|
this.sdkLoadStatus = 'success';
|
|
|
|
|
|
+ // 初始化日志上报 TODO 添加日志系统
|
|
|
+ this.initLogReport();
|
|
|
+
|
|
|
// 调用接口获取卡连接数据
|
|
|
const cardData = await this.getConnectData(this.parametersData);
|
|
|
|
|
|
@@ -194,9 +213,6 @@ export default {
|
|
|
this.destroyListener();
|
|
|
},
|
|
|
methods: {
|
|
|
- inii(){
|
|
|
- console.log('initi')
|
|
|
- },
|
|
|
// 初始化页面监听事件
|
|
|
initListener() {
|
|
|
// 禁止双击缩放
|
|
|
@@ -274,14 +290,37 @@ export default {
|
|
|
},
|
|
|
// 获取卡的信息
|
|
|
async getConnectData(params) {
|
|
|
+ let userCardId = params.userCardId;
|
|
|
try {
|
|
|
- const res = await this.$axios.$post('/resources/user/cloud/connect', { userCardId: params.userCardId}, {
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({userCardId});
|
|
|
+
|
|
|
+ let isWx = this.$userAgent.isWx;
|
|
|
+ let { isWeixin } = params;
|
|
|
+ let clientType = (+isWeixin || isWx) ? 'wx' : undefined;
|
|
|
+
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({userCardId});
|
|
|
+ clientType && this.logReportObj.setParams({clientType});
|
|
|
+
|
|
|
+ const res = await this.$axios.$post('/resources/user/cloud/connect', { userCardId }, {
|
|
|
headers: {
|
|
|
merchantSign: params.merchantSign,
|
|
|
},
|
|
|
});
|
|
|
if (!res.success) {
|
|
|
- // TODO 提示错误信息 和 日志参数及上报
|
|
|
+ // 设置日志 推流状态为失败,和链接状态
|
|
|
+ this.logReportObj.setParams({plugFowStatus: 2, linkWay: this.logReportObj.RESPONSE_CODE[res.status] || 0, linkEndTime: this.logReportObj.formatDate(new Date())});
|
|
|
+
|
|
|
+ // 日志上报
|
|
|
+ this.logReportObj.collectLog(
|
|
|
+ `接口获取数据失败:
|
|
|
+ url: /api/resources/user/cloud/connect
|
|
|
+ method: post
|
|
|
+ 参数: ${JSON.stringify({ userCardId })}
|
|
|
+ 响应: ${JSON.stringify(res)}`
|
|
|
+ );
|
|
|
+
|
|
|
// res.status状态码枚举值 0: 正常
|
|
|
const statusEnum = {
|
|
|
// 5200：RBD资源挂载中
|
|
|
@@ -293,13 +332,25 @@ export default {
|
|
|
5204: '云机异常，正在为你重新分配云机',
|
|
|
5228: '卡的网络状态为差',
|
|
|
5229: '接口返回链接信息缺失',
|
|
|
- }
|
|
|
+ };
|
|
|
+ // NOTE 这里可设置重连机制, 重连次数上限6次, 每次重连间隔3秒, 暂不做重连
|
|
|
+
|
|
|
// 提示错误信息
|
|
|
- this.$toast(statusEnum[res.status] || '网络异常，请稍后重试')
|
|
|
+ this.$toast(statusEnum[res.status] || '网络异常，请稍后重试');
|
|
|
return Promise.reject(new Error(statusEnum[res.status] || '网络异常，请稍后重试'));
|
|
|
}
|
|
|
return res.data;
|
|
|
}catch (error) {
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({linkWay: 4, plugFowStatus: 2, linkEndTime: this.logReportObj.formatDate(new Date())});
|
|
|
+ // 日志上报
|
|
|
+ this.logReportObj.collectLog(
|
|
|
+ `接口获取数据失败:
|
|
|
+ url: /api/resources/user/cloud/connect
|
|
|
+ method: post
|
|
|
+ 参数: ${JSON.stringify({ userCardId })}
|
|
|
+ 响应: ${JSON.stringify(error)}`
|
|
|
+ );
|
|
|
console.log('error connectAxios:', error);
|
|
|
return Promise.reject(error);
|
|
|
}
|
|
|
@@ -307,15 +358,26 @@ export default {
|
|
|
// 判断卡的连接方式
|
|
|
async judgeConnectType(cardData) {
|
|
|
try {
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({videoType: data.videoCode.toLowerCase(), resourceId: data.resourceId});
|
|
|
+
|
|
|
// 不支持webRTC跳转到指定的页面进行拉流
|
|
|
if (!cardData.isWebrtc) {
|
|
|
- // 跳转指定页面
|
|
|
- location.replace(`${location.origin}/h5/webRtcYJ/WXtrialInterface.html${location.search}`)
|
|
|
- return Promise.reject();
|
|
|
+ // 关闭日志上报 TODO 可能还需要关闭其他定时器等
|
|
|
+ this.logReportObj.destroy();
|
|
|
+
|
|
|
+ // 跳转指定页面
|
|
|
+ location.replace(`${location.origin}/h5/webRtcYJ/WXtrialInterface.html${location.search}`)
|
|
|
+ return Promise.reject();
|
|
|
}
|
|
|
|
|
|
// 是否支持webRTC
|
|
|
if (!this.isSupportRtc) {
|
|
|
+ // 设置日志 推流状态为失败
|
|
|
+ this.logReportObj.setParams({plugFowStatus: 2, linkEndTime: this.logReportObj.formatDate(new Date())});
|
|
|
+ // 日志上报
|
|
|
+ this.logReportObj.collectLog(`${+this.parametersData.isWeixin ? '微信小程序' : ''}当前版本暂不支持使用`);
|
|
|
+
|
|
|
// TODO 提示错误信息 和 日志参数及上报
|
|
|
this.$dialog.alert({
|
|
|
title: '提示',
|
|
|
@@ -338,13 +400,46 @@ export default {
|
|
|
if (webrtcNetworkAnalysisReq !== null && webrtcNetworkAnalysisReq.success && webrtcNetworkAnalysisReq.data) {
|
|
|
// 保存获取的连接地址到connect的请求的响应中, 方便后面使用
|
|
|
cardData.webrtcNetwork = webrtcNetworkAnalysisReq.data;
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({transferServerIp: webrtcNetworkAnalysisReq.data});
|
|
|
return cardData;
|
|
|
}else{
|
|
|
- // TODO 提示错误信息 和 日志参数及上报
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({linkWay: 4, plugFowStatus: 2, linkEndTime: this.logReportObj.formatDate(new Date())});
|
|
|
+ // 日志上报
|
|
|
+ this.logReportObj.collectLog(
|
|
|
+ `webRtc连接,获取中转地址失败:
|
|
|
+ url: ${cardData.webrtcNetworkAnalysis}
|
|
|
+ method: get
|
|
|
+ 参数: 无
|
|
|
+ 响应: ${JSON.stringify(webrtcNetworkAnalysisReq)}`
|
|
|
+ );
|
|
|
+
|
|
|
+ // 弹窗并退出
|
|
|
+ this.$dialog.alert({
|
|
|
+ title: '提示',
|
|
|
+ message: '访问失败,请稍后重试',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ confirmButtonColor: '#3cc51f',
|
|
|
+ beforeClose: (action, done) => {
|
|
|
+ done()
|
|
|
+ this.exit();
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
return Promise.reject(new Error('网络分析请求失败'));
|
|
|
}
|
|
|
}else{
|
|
|
- // TODO 提示错误信息 和 日志参数及上报
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({linkWay: 4, plugFowStatus: 2});
|
|
|
+ // 日志上报
|
|
|
+ this.logReportObj.collectLog(
|
|
|
+ `webRtc连接,获取请求中转地址为空:
|
|
|
+ url: /api/resources/user/cloud/connect
|
|
|
+ method: post
|
|
|
+ 参数: ${JSON.stringify({ userCardId: this.parametersData.userCardId })}
|
|
|
+ 响应: ${JSON.stringify(res)}`
|
|
|
+ );
|
|
|
return Promise.reject(new Error('网络分析请求地址不存在'));
|
|
|
}
|
|
|
} catch (error) {
|
|
|
@@ -402,6 +497,10 @@ export default {
|
|
|
callback: (event)=> {}
|
|
|
};
|
|
|
|
|
|
+ // 设置日志参数 推流质量
|
|
|
+ // TODO 明天继续,需要对现在的高清,标清,流畅重新做一个映射,日志枚举值也需要修改
|
|
|
+ this.logReportObj.setParams({imageQuality: 6000});
|
|
|
+
|
|
|
// 获取SDK类
|
|
|
const MediaSdk = window.rtc_sdk.MediaSdk;
|
|
|
// 初始化 SDK
|
|
|
@@ -425,10 +524,13 @@ export default {
|
|
|
console.log("webrtc连接成功====★★★★★", r);
|
|
|
if (r.code === 1005) { // 1005: 拉流鉴权成功
|
|
|
this.$toast.clear();
|
|
|
- // 播放视频
|
|
|
- setTimeout(() => {
|
|
|
- // engine.mediaElement.node.play();
|
|
|
- }, 50)
|
|
|
+ // 初始化业务指令通道
|
|
|
+ this.initControlChannel();
|
|
|
+
|
|
|
+ // 查询超过指定触碰时间是否提示关闭弹窗
|
|
|
+ this.$refs.timeoutNoOpsRef.pushflowPopup();
|
|
|
+ // 获取云机剩余时长
|
|
|
+ this.$refs.timeBalanceRef.getResidueTime();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -441,6 +543,12 @@ export default {
|
|
|
engine.on('CONNECT_ERROR', (r) => {
|
|
|
console.log("webrtc异常状态====★★★★★", r);
|
|
|
});
|
|
|
+
|
|
|
+ // 显示区域大小发生改变 响应
|
|
|
+ engine.on('RECEIVE_RESOLUTION', (r) => {
|
|
|
+ // 分辨率大小发生改变,响应
|
|
|
+ console.log("分辨率大小发生改变,响应 => RECEIVE_RESOLUTION", r);
|
|
|
+ });
|
|
|
},
|
|
|
// 业务指令通道初始化
|
|
|
initControlChannel() {
|
|
|
@@ -458,6 +566,7 @@ export default {
|
|
|
|
|
|
// 链接成功
|
|
|
this.doConnectDirectivesWs.onopen = (e) => {
|
|
|
+ // 设置定时器 每3秒发送一次心跳
|
|
|
this.doConnectDirectivesIntervalerPing = setInterval(() => {
|
|
|
if (this.doConnectDirectivesWs.readyState === 1) {
|
|
|
this.doConnectDirectivesWs.send(JSON.stringify({ type: 'ping' }));
|
|
|
@@ -465,13 +574,9 @@ export default {
|
|
|
clearInterval(this.doConnectDirectivesIntervalerPing);
|
|
|
}
|
|
|
}, 3000);
|
|
|
- this.doConnectDirectivesWs.send(JSON.stringify({ type: 'getVsStatus' }))
|
|
|
- this.doConnectDirectivesWs.send(JSON.stringify({ type: 'bitRate', data: { bitRate: 1243000 } }))
|
|
|
- // // 设置日志参数 推流质量
|
|
|
- // logReportObj.setParams({ imageQuality: 1243000 });
|
|
|
|
|
|
- this.doConnectDirectivesWs.send(JSON.stringify({ type: 'InputMethod', data: { type: 2 } }))
|
|
|
- this.doConnectDirectivesWs.send(JSON.stringify({ type: 'getPhoneSize' }))
|
|
|
+ // 输入法: 本地输入法 1 云机输入法 2
|
|
|
+ this.doConnectDirectivesWs.send(JSON.stringify({ type: 'InputMethod', data: { type: 2 } }));
|
|
|
}
|
|
|
|
|
|
// 接受到的消息
|
|
|
@@ -509,8 +614,9 @@ export default {
|
|
|
// 三键
|
|
|
sendKey (keyCode) {
|
|
|
try {
|
|
|
- console.log('sendKey', keyCode);
|
|
|
this.engine?.sendKey(keyCode);
|
|
|
+ // 重置超时无操作定时器
|
|
|
+ this.$refs.timeoutNoOpsRef?.noOperationSetTimeout();
|
|
|
} catch (error) {
|
|
|
console.log('sendKey error', error);
|
|
|
}
|
|
|
@@ -524,18 +630,6 @@ export default {
|
|
|
openPasteboard(text){
|
|
|
this.$refs.cloudPhoneClipboardRef.init(text);
|
|
|
},
|
|
|
- // 超过指定触碰时间是否提示关闭链接
|
|
|
- async pushflowPopup() {
|
|
|
- try {
|
|
|
- const res = await this.$axios.get('/public/v5/pushflow/popup');
|
|
|
- if (res.success) {
|
|
|
- this.isFiringNoOperationSetTimeout = res.data;
|
|
|
- this.noOperationSetTimeout();
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- },
|
|
|
// 退出功能
|
|
|
exit() {
|
|
|
// 关闭日志上报
|
|
|
@@ -557,6 +651,16 @@ export default {
|
|
|
}
|
|
|
uni && uni.reLaunch({ url: '/pages/index/index' });
|
|
|
},
|
|
|
+ // 初始化日志上报实例
|
|
|
+ initLogReport() {
|
|
|
+ // 初始化日志上报实例
|
|
|
+ this.logReportObj = new logReport({ request: this.$axios });
|
|
|
+
|
|
|
+ uni.getEnv((res) => {
|
|
|
+ // 设置上报参数
|
|
|
+ this.logReportObj.setParams({ clientType: Object.keys(res)[0] });
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
t_finder