|
|
@@ -6,6 +6,7 @@
|
|
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
<title>监控详情页</title>
|
|
|
<link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />
|
|
|
+ <link rel="stylesheet" href="./font/iconfont.css" />
|
|
|
<style type="text/css">
|
|
|
body {
|
|
|
margin: 0;
|
|
|
@@ -151,11 +152,16 @@
|
|
|
.imgBtnDgp {
|
|
|
display: none;
|
|
|
}
|
|
|
+ #myCanvas{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="btn-container">
|
|
|
- <div id="box"> </div>
|
|
|
+ <div id="box">
|
|
|
+
|
|
|
+ </div>
|
|
|
<div class="videoBtnPlay">
|
|
|
<img src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/wxplayer.png" />
|
|
|
</div>
|
|
|
@@ -163,6 +169,7 @@
|
|
|
<div id="dialog">
|
|
|
|
|
|
</div>
|
|
|
+ <canvas id="myCanvas" width="400" height="300"></canvas>
|
|
|
<div class="btn-box">
|
|
|
<div class="more" ontouchstart="_configCamera('move', 8)" ontouchend="_stopConfigCamera()">
|
|
|
<image src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/monitor/3.png" mode="widthFix">
|
|
|
@@ -191,200 +198,130 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="imgBtn">
|
|
|
- <div class="imgBtnCamrea"> <img src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/img_icon.png" />查看图片</div>
|
|
|
- <div class="imgBtnDgp"><img src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/img_icon.png" />查看光谱图片</div>
|
|
|
+ <div class="imgBtnCamrea"> <img
|
|
|
+ src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/img_icon.png" />查看图片</div>
|
|
|
+ <div class="imgBtnDgp"><img
|
|
|
+ src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/img_icon.png" />查看光谱图片</div>
|
|
|
|
|
|
</div>
|
|
|
</body>
|
|
|
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
|
+ <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
|
|
|
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
|
|
|
<!-- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
|
|
|
<!-- uni 的 SDK -->
|
|
|
- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
|
|
|
+ <!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
|
|
|
|
|
|
- <script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
|
|
|
- <script type="module">
|
|
|
- import Player from 'https://wx.hnyfwlw.com/wexin/videoPlayer/videoPlay-js.js'
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
|
+ <!-- <script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script> -->
|
|
|
+<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
|
|
|
+ <!-- uni 的 SDK -->
|
|
|
+ <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
|
|
|
+<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
|
|
|
+ <!-- <script src="./js/flv.min.js"></script> -->
|
|
|
+ <script >
|
|
|
+ // import Player from './videoPlayer/videoPlay-js.js'
|
|
|
// const domin = 'https://wx.hnyfwlw.com'
|
|
|
- const domin = 'http://218.28.198.186:10508'
|
|
|
- // 检测HLS支持
|
|
|
- function checkHLSSupport() {
|
|
|
- const video = document.createElement('video');
|
|
|
- return video.canPlayType('application/vnd.apple.mpegurl') !== '' ||
|
|
|
- video.canPlayType('application/x-mpegURL') !== '';
|
|
|
- }
|
|
|
-
|
|
|
- // 加载HLS.js库（如果需要）
|
|
|
- function loadHLSJS() {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- if (window.Hls) {
|
|
|
- resolve();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const script = document.createElement('script');
|
|
|
- script.src = 'https://cdn.jsdelivr.net/npm/hls.js@latest';
|
|
|
- script.onload = () => {
|
|
|
- console.log('HLS.js加载完成');
|
|
|
- resolve();
|
|
|
- };
|
|
|
- script.onerror = reject;
|
|
|
- document.head.appendChild(script);
|
|
|
- });
|
|
|
- }
|
|
|
+ const domin = 'http://218.28.198.186:10508'
|
|
|
|
|
|
let player = null
|
|
|
let stopTimer = 0
|
|
|
-
|
|
|
- // 更安全的URL参数解析
|
|
|
- function getUrlParam(name) {
|
|
|
- const urlParams = new URLSearchParams(window.location.search)
|
|
|
- return urlParams.get(name) || ''
|
|
|
- }
|
|
|
-
|
|
|
- var device_id = getUrlParam('device_id')
|
|
|
- var accessToken = getUrlParam('accessToken')
|
|
|
- var videoType = getUrlParam('videoType')
|
|
|
+ //上下左右和拍照
|
|
|
+ var str = window.location.search.substr(1)
|
|
|
+ var arr = str.split('&')
|
|
|
+ console.log(str, arr, '参数');
|
|
|
+ var device_id = arr[0].split('=')[1]
|
|
|
+ var accessToken = arr[1].slice(12)
|
|
|
+ var videoType = arr[2]?.split('=')[1]
|
|
|
var token = accessToken
|
|
|
-
|
|
|
- console.log('解析结果:', { device_id, accessToken, videoType })
|
|
|
- console.log('视频类型检查:', videoType, videoType === 'dgp')
|
|
|
- // 通用错误处理函数
|
|
|
- function showError(message, duration = 3000) {
|
|
|
- $('#dialog').html(message).stop().show(500).delay(duration).hide(500);
|
|
|
- $('.videoBtnPlay').show();
|
|
|
+
|
|
|
+ window._configCamera = configCamera;
|
|
|
+ window._stopConfigCamera = stopConfigCamera;
|
|
|
+ window._postPic = postPic;
|
|
|
+ if (videoType == 'dgp') {
|
|
|
+ $('.imgBtnDgp').show()
|
|
|
+ } else {
|
|
|
+ $('.imgBtnDgp').hide()
|
|
|
}
|
|
|
-
|
|
|
- // 安全的JSON解析
|
|
|
- function safeParseJSON(str) {
|
|
|
- try {
|
|
|
- return JSON.parse(str);
|
|
|
- } catch(e) {
|
|
|
- console.warn('JSON解析失败，尝试eval:', e);
|
|
|
- try {
|
|
|
- return eval('(' + str + ')');
|
|
|
- } catch(e2) {
|
|
|
- console.error('数据解析完全失败:', e2);
|
|
|
- return null;
|
|
|
- }
|
|
|
- }
|
|
|
+ function captureFrame() {
|
|
|
+ const video = document.getElementById('myPlayer_html5_api');
|
|
|
+ const canvas = document.getElementById('myCanvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 设置 canvas 尺寸与视频一致
|
|
|
+ canvas.width = video.videoWidth;
|
|
|
+ canvas.height = video.videoHeight;
|
|
|
+ console.log(ctx,'---')
|
|
|
+ // 绘制当前帧到 canvas
|
|
|
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
+
|
|
|
+ // 获取图片数据
|
|
|
+ const imageData = canvas.toDataURL('image/jpg');
|
|
|
+ canvas.toBlob((blob)=>{
|
|
|
+
|
|
|
+ postPic(blob)
|
|
|
+ }, 'image/jpg', 0.92);
|
|
|
+ // postPic(imageData)
|
|
|
+ // // 可以创建图片显示或下载
|
|
|
+ // const img = new Image();
|
|
|
+ // img.src = imageData;
|
|
|
+ // document.body.appendChild(img);
|
|
|
+
|
|
|
+ // // 或者下载图片
|
|
|
+ // downloadImage(imageData, 'captured-frame.png');
|
|
|
}
|
|
|
-
|
|
|
- // 验证API响应
|
|
|
- function validateAPIResponse(res, apiName = 'API') {
|
|
|
- console.log(`${apiName}响应:`, res);
|
|
|
-
|
|
|
- if (!res) {
|
|
|
- console.error(`${apiName}响应为空`);
|
|
|
- return { valid: false, error: '服务器无响应' };
|
|
|
- }
|
|
|
-
|
|
|
- if (res.message && res.message !== '') {
|
|
|
- console.error(`${apiName}返回错误:`, res.message);
|
|
|
- return { valid: false, error: res.message };
|
|
|
- }
|
|
|
-
|
|
|
- if (!res.data) {
|
|
|
- console.error(`${apiName}返回数据为空`);
|
|
|
- return { valid: false, error: '返回数据为空' };
|
|
|
+ function initFlvPlayer(hlsHdSrc) {
|
|
|
+ var playHtml =
|
|
|
+ `<video width="100%" height="300px" id="huifangPlayer" controls autoplay muted></video>`;
|
|
|
+ $("#box").html(playHtml)
|
|
|
+ const container = document.getElementById('huifangPlayer')
|
|
|
+
|
|
|
+ if (flvjs.isSupported()) {
|
|
|
+ // console.log(videoElement);
|
|
|
+ // let hlsHdSrc =
|
|
|
+ // 'https://cmgw-vpc.lechange.com:8890/flv/LCO/BE049D6PAJ704F1/0/1/20251126103056/openhze749205130814fecba32ac68f5d30fe0.flv?proto=https&source=open';
|
|
|
+ // 创建 FLV 播放器实例
|
|
|
+ player = flvjs.createPlayer({
|
|
|
+ type: 'flv', // 设置视频类型为 FLV
|
|
|
+ isLive: true, // 指定这是点播
|
|
|
+ hasAudio: false, // 指定视频流中没有音频
|
|
|
+ url: hlsHdSrc
|
|
|
+ })
|
|
|
+
|
|
|
+ // 将播放器绑定到 HTML 视频元素
|
|
|
+ player.attachMediaElement(container)
|
|
|
+ // 加载视频流
|
|
|
+ player.load()
|
|
|
+ // 播放视频
|
|
|
+ player.play()
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- return { valid: true, data: res.data };
|
|
|
}
|
|
|
-
|
|
|
- // 获取可用的视频源
|
|
|
- function getAvailableVideoSource(data, preferredType = 'hls') {
|
|
|
- const sources = {
|
|
|
- hls: data.hls,
|
|
|
- hlsHd: data.hlsHd,
|
|
|
- rtmp: data.rtmp,
|
|
|
- rtsp: data.rtsp
|
|
|
- };
|
|
|
-
|
|
|
- console.log('可用视频源:', sources);
|
|
|
-
|
|
|
- // 优先使用指定类型
|
|
|
- if (sources[preferredType] && sources[preferredType] !== 'undefined' && sources[preferredType] !== '') {
|
|
|
- return { source: sources[preferredType], type: preferredType };
|
|
|
- }
|
|
|
-
|
|
|
- // 按优先级查找可用源
|
|
|
- const priority = ['hls', 'hlsHd', 'rtmp', 'rtsp'];
|
|
|
- for (const type of priority) {
|
|
|
- if (sources[type] && sources[type] !== 'undefined' && sources[type] !== '') {
|
|
|
- return { source: sources[type], type: type };
|
|
|
- }
|
|
|
+
|
|
|
+ function destroyPlayer() {
|
|
|
+ if (player) {
|
|
|
+ const container = document.getElementById('huifangPlayer')
|
|
|
+ player.pause()
|
|
|
+ player.unload()
|
|
|
+ player.detachMediaElement()
|
|
|
+ player.destroy()
|
|
|
+ player = null
|
|
|
+ player = ''
|
|
|
}
|
|
|
-
|
|
|
- return { source: null, type: null };
|
|
|
- }
|
|
|
-
|
|
|
- // 检查设备状态
|
|
|
- function checkDeviceStatus() {
|
|
|
- console.log('检查设备状态...');
|
|
|
- $('#dialog').html('检查设备状态...').stop().show();
|
|
|
-
|
|
|
- return $.ajax({
|
|
|
- type: "POST",
|
|
|
- url: `${domin}/api/api_gateway?method=device.device_manage.get_device_info`,
|
|
|
- data: {
|
|
|
- device_id: device_id,
|
|
|
- token: token
|
|
|
- },
|
|
|
- timeout: 5000
|
|
|
- }).then((res) => {
|
|
|
- console.log('设备状态响应:', res);
|
|
|
- if (res && res.message === '' && res.data) {
|
|
|
- const deviceInfo = typeof res.data === 'string' ? safeParseJSON(res.data) : res.data;
|
|
|
- console.log('设备信息:', deviceInfo);
|
|
|
- return deviceInfo;
|
|
|
- } else {
|
|
|
- throw new Error(res.message || '获取设备信息失败');
|
|
|
- }
|
|
|
- }).catch((error) => {
|
|
|
- console.error('设备状态检查失败:', error);
|
|
|
- showError('设备状态检查失败: ' + (error.message || '网络错误'));
|
|
|
- throw error;
|
|
|
- });
|
|
|
}
|
|
|
-
|
|
|
- window._configCamera = configCamera;
|
|
|
- window._stopConfigCamera = stopConfigCamera;
|
|
|
- window._postPic = postPic;
|
|
|
-
|
|
|
- // 确保DOM加载完成后再执行jQuery操作
|
|
|
- $(document).ready(function() {
|
|
|
- // 初始化HLS支持
|
|
|
- if (!checkHLSSupport()) {
|
|
|
- console.log('浏览器不支持原生HLS，加载HLS.js');
|
|
|
- loadHLSJS().catch(e => {
|
|
|
- console.error('HLS.js加载失败:', e);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- if (videoType == 'dgp') {
|
|
|
- $('.imgBtnDgp').show()
|
|
|
- } else {
|
|
|
- $('.imgBtnDgp').hide()
|
|
|
- }
|
|
|
-
|
|
|
- $('.photo').click(() => {
|
|
|
- // 拍照功能
|
|
|
- })
|
|
|
- })
|
|
|
|
|
|
function configCamera(ctrl, movenum) {
|
|
|
if (ctrl == "takephoto") {
|
|
|
-
|
|
|
if (player) {
|
|
|
// 云联的拍照特殊处理
|
|
|
- player.screenshot('yunlianPlayer')
|
|
|
+ // player.screenshot('yunlianPlayer')
|
|
|
+ $('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
|
|
|
+ captureFrame()
|
|
|
} else {
|
|
|
|
|
|
$('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
|
|
|
- let url = `${domin}/api/api_gateway?method=camera.camera_manage.camera_takephoto`
|
|
|
+ let url = domin+"/api/api_gateway?method=camera.camera_manage.camera_takephoto"
|
|
|
if (videoType == 'dgp') {
|
|
|
- url = `${domin}/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto`
|
|
|
+ url = domin+"/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto"
|
|
|
}
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
@@ -395,7 +332,7 @@
|
|
|
}
|
|
|
}).then((res) => {
|
|
|
|
|
|
- if (res.data == true) {
|
|
|
+ if (res.message == '') {
|
|
|
$('#dialog').html('拍照成功').stop().show(500).delay(1000).hide(500)
|
|
|
} else {
|
|
|
$('#dialog').html(res.message).stop().show(500).delay(1000).hide(500)
|
|
|
@@ -404,13 +341,13 @@
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
- let url = `${domin}/api/api_gateway?method=camera.camera_manage.ctrl_camera`
|
|
|
+ let url = domin+"/api/api_gateway?method=camera.camera_manage.ctrl_camera"
|
|
|
let postData = {
|
|
|
device_id: device_id,
|
|
|
token
|
|
|
}
|
|
|
if (videoType == 'dgp') {
|
|
|
- url = `${domin}/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera`
|
|
|
+ url = domin+"/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera"
|
|
|
postData.ctrl = movenum
|
|
|
} else {
|
|
|
postData.ctrl = ctrl
|
|
|
@@ -428,24 +365,27 @@
|
|
|
}
|
|
|
|
|
|
function stopConfigCamera() {
|
|
|
-
|
|
|
+ if (player) {
|
|
|
+ // 云联不需要停止
|
|
|
+ return
|
|
|
+ }
|
|
|
if (videoType == 'dgp') {
|
|
|
- if(stopTimer) clearTimeout(stopTimer)
|
|
|
- stopTimer = setTimeout(()=>{
|
|
|
+ if (stopTimer) clearTimeout(stopTimer)
|
|
|
+ stopTimer = setTimeout(() => {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.mulit_stop_move",
|
|
|
+ url: domin+"/api/api_gateway?method=camera.camera_manage.mulit_stop_move",
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
token
|
|
|
},
|
|
|
});
|
|
|
- },3000)
|
|
|
-
|
|
|
+ }, 3000)
|
|
|
+
|
|
|
} else {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.ctrl_camera",
|
|
|
+ url: domin+"/api/api_gateway?method=camera.camera_manage.ctrl_camera",
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
ctrl: "stop",
|
|
|
@@ -462,7 +402,7 @@
|
|
|
form.append('token', token)
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.save_camera_photo",
|
|
|
+ url: domin+"/api/api_gateway?method=camera.camera_manage.save_camera_photo",
|
|
|
contentType: false,
|
|
|
processData: false,
|
|
|
data: form
|
|
|
@@ -471,318 +411,108 @@
|
|
|
if (res.message == '') {
|
|
|
$('#dialog').html('拍照成功').stop().show(500).delay(1500).hide(500)
|
|
|
} else {
|
|
|
- $('#dialog').html(res.data.message).stop().show(500).delay(1500).hide(500)
|
|
|
+ $('#dialog').html(res.message).stop().show(500).delay(1500).hide(500)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
- async function initYunlianPlayer(videoURL) {
|
|
|
- var playHtml =
|
|
|
- `<div id="yunlianPlayer" style="width: 100%;height: 300px;overflow: hidden;"></div>`;
|
|
|
- $("#box").html(playHtml)
|
|
|
- player = new Player(['yunlianPlayer'], {
|
|
|
- playFileOver: () => {
|
|
|
- console.log('播放结束')
|
|
|
- },
|
|
|
- playError: (id, e) => {
|
|
|
- console.log('播放错误', id, e)
|
|
|
- },
|
|
|
- talkStart: () => {
|
|
|
- console.log('对讲开始')
|
|
|
- },
|
|
|
- runtimeInitializedCallBack: () => {
|
|
|
- console.log('播放器初始化完成')
|
|
|
- },
|
|
|
- captureCallback: (id, data) => {
|
|
|
- // console.log('截图返回的数据', data.buffer)
|
|
|
- const blob = new Blob([data], {
|
|
|
- type: 'image/jpeg'
|
|
|
- })
|
|
|
- _postPic(blob)
|
|
|
- }
|
|
|
- })
|
|
|
- await player.init()
|
|
|
- setTimeout(() => {
|
|
|
- player.play('yunlianPlayer', {
|
|
|
- streamURL: videoURL,
|
|
|
-
|
|
|
- channelId: '0',
|
|
|
-
|
|
|
- bitStream: '0',
|
|
|
-
|
|
|
- isLive: true
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
-
|
|
|
|
|
|
$('.videoBtnPlay').click(function() {
|
|
|
$('.videoBtnPlay').hide()
|
|
|
- console.log(videoType,'videoTypevideoType')
|
|
|
-
|
|
|
- // 显示加载提示
|
|
|
- $('#dialog').html('正在获取视频流...').stop().show();
|
|
|
-
|
|
|
- // 先检查设备状态（可选，如果API支持的话）
|
|
|
- // checkDeviceStatus().then(() => {
|
|
|
- if (videoType == 'dgp') {
|
|
|
- $.ajax({
|
|
|
- type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
- data: {
|
|
|
- device_id: device_id,
|
|
|
- token
|
|
|
- },
|
|
|
- timeout: 15000 // 15秒超时
|
|
|
- }).then((res) => {
|
|
|
- $('#dialog').hide(); // 隐藏加载提示
|
|
|
-
|
|
|
- const validation = validateAPIResponse(res, 'DGP视频流API');
|
|
|
- if (!validation.valid) {
|
|
|
- showError(validation.error);
|
|
|
- return;
|
|
|
+ if (videoType == 'dgp') {
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: domin+"/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
+ data: {
|
|
|
+ device_id: device_id,
|
|
|
+ token
|
|
|
}
|
|
|
-
|
|
|
- let data = validation.data;
|
|
|
- if (typeof data == 'string') {
|
|
|
- data = safeParseJSON(data);
|
|
|
- if (!data) {
|
|
|
- showError('DGP数据解析失败');
|
|
|
- return;
|
|
|
+ }).then((res) => {
|
|
|
+ // console.log(JSON.stringify(res))
|
|
|
+ if (res.message == '') {
|
|
|
+ var data = null
|
|
|
+ if (typeof res.data == 'string') {
|
|
|
+ data = eval('(' + res.data + ')');
|
|
|
+ } else {
|
|
|
+ data = res.data;
|
|
|
}
|
|
|
+ console.log(data, 'data');
|
|
|
+
|
|
|
+ let hlsHdSrc = data.rtmp;
|
|
|
+ var playHtml =
|
|
|
+ `<video id="myPlayer" poster='' controls playsInline webkit-playsinline src=${hlsHdSrc} style="width:100%; height:100%;"></video>`;
|
|
|
+ $("#box").html(playHtml)
|
|
|
+ var myVideo = videojs(`myPlayer`, {
|
|
|
+ controls: true,
|
|
|
+ autoplay: 'play',
|
|
|
+ url: hlsHdSrc,
|
|
|
+ sources: [{
|
|
|
+ type: 'application/x-mpegURL',
|
|
|
+ src: hlsHdSrc,
|
|
|
+ }],
|
|
|
+ }, function onPlayerReady() {
|
|
|
+ myVideo.play()
|
|
|
+ console.log('准备好了')
|
|
|
+ });
|
|
|
+ myVideo.on('play', function() {
|
|
|
+ console.log('开始播放')
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ alert(res.message)
|
|
|
}
|
|
|
-
|
|
|
- console.log('DGP解析后的数据:', data);
|
|
|
-
|
|
|
- // 获取可用的视频源（DGP优先使用rtmp）
|
|
|
- const videoSource = getAvailableVideoSource(data, 'rtmp');
|
|
|
-
|
|
|
- if (!videoSource.source) {
|
|
|
- console.error('DGP没有找到可用的视频源');
|
|
|
- showError('设备可能离线或未配置视频流，请检查设备状态');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- console.log(`使用${videoSource.type}视频源:`, videoSource.source);
|
|
|
-
|
|
|
- console.log(`使用${videoSource.type}视频源:`, videoSource.source);
|
|
|
-
|
|
|
- const hlsHdSrc = videoSource.source;
|
|
|
-
|
|
|
- var playHtml =
|
|
|
- `<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
|
|
|
- $("#box").html(playHtml)
|
|
|
-
|
|
|
- var myVideo = videojs(`myPlayer`, {
|
|
|
- controls: true,
|
|
|
- autoplay: false,
|
|
|
- preload: 'metadata',
|
|
|
- sources: [{
|
|
|
- type: videoSource.type === 'rtmp' ? 'rtmp/flv' : 'application/x-mpegURL',
|
|
|
- src: hlsHdSrc,
|
|
|
- }],
|
|
|
- html5: {
|
|
|
- hls: {
|
|
|
- enableLowInitialPlaylist: true,
|
|
|
- smoothQualityChange: true,
|
|
|
- overrideNative: true
|
|
|
- }
|
|
|
- }
|
|
|
- }, function onPlayerReady() {
|
|
|
- console.log('DGP播放器准备完成');
|
|
|
- // 延迟播放，确保源加载完成
|
|
|
- setTimeout(() => {
|
|
|
- myVideo.play().catch(e => {
|
|
|
- console.error('DGP播放失败:', e);
|
|
|
- showError('DGP视频播放失败: ' + e.message);
|
|
|
- });
|
|
|
- }, 500);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加错误处理
|
|
|
- myVideo.on('error', function(e) {
|
|
|
- console.error('DGP Video.js错误:', e, myVideo.error());
|
|
|
- const error = myVideo.error();
|
|
|
- let errorMsg = 'DGP视频播放出错';
|
|
|
-
|
|
|
- if (error) {
|
|
|
- switch(error.code) {
|
|
|
- case 1:
|
|
|
- errorMsg = 'DGP视频加载被中止';
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- errorMsg = 'DGP网络错误导致视频下载失败';
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- errorMsg = 'DGP视频解码失败';
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- errorMsg = 'DGP视频格式不支持或视频源无效';
|
|
|
- break;
|
|
|
- default:
|
|
|
- errorMsg = 'DGP未知播放错误';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- showError(errorMsg);
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('play', function() {
|
|
|
- console.log('DGP开始播放')
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('loadstart', function() {
|
|
|
- console.log('DGP开始加载视频');
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('canplay', function() {
|
|
|
- console.log('DGP视频可以播放');
|
|
|
- });
|
|
|
+
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- // url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
- url: "http://192.168.1.107:8000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
+ url: domin+"/api/api_gateway?method=camera.camera_manage.addr_camera",
|
|
|
+ // url: "http://192.168.0.117:8003/api/api_gateway?method=camera.camera_manage.addr_camera",
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
+ is_dahua_app:'1',
|
|
|
token
|
|
|
// device_id: 'FA8690323-1',
|
|
|
// token: localStorage.getItem('session_key')
|
|
|
}
|
|
|
}).then((res) => {
|
|
|
- console.log('API响应:', res);
|
|
|
- if (res && res.message == '') {
|
|
|
+ if (res.message == '') {
|
|
|
var data = null
|
|
|
if (typeof res.data == 'string') {
|
|
|
- data = safeParseJSON(res.data);
|
|
|
+ data = eval('(' + res.data + ')');
|
|
|
} else {
|
|
|
data = res.data;
|
|
|
}
|
|
|
-
|
|
|
- if (!data) {
|
|
|
- showError('数据解析失败');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- console.log('解析后的数据:', data);
|
|
|
- console.log('数据字段检查:', {
|
|
|
- type_id: data.type_id,
|
|
|
- hls: data.hls,
|
|
|
- hlsHd: data.hlsHd,
|
|
|
- rtsp: data.rtsp,
|
|
|
- rtmp: data.rtmp
|
|
|
- });
|
|
|
-
|
|
|
+ var hlsHdSrc = ""
|
|
|
if (data.type_id == 2) {
|
|
|
// 大华云联
|
|
|
- if (!data.rtsp || data.rtsp === 'undefined' || data.rtsp === '') {
|
|
|
- console.error('RTSP视频源无效:', data.rtsp);
|
|
|
- showError('RTSP视频源获取失败，请检查设备配置');
|
|
|
- return;
|
|
|
- }
|
|
|
- initYunlianPlayer(data.rtsp)
|
|
|
-
|
|
|
+ // initFlvPlayer(data.rtsp)
|
|
|
+
|
|
|
+ player = 1
|
|
|
+ hlsHdSrc = data.rtsp;
|
|
|
} else {
|
|
|
- let hlsHdSrc = data.type_id == 0 ? data.hls : data.hlsHd;
|
|
|
-
|
|
|
- console.log('选择的视频源字段:', data.type_id == 0 ? 'hls' : 'hlsHd');
|
|
|
- console.log('视频源值:', hlsHdSrc);
|
|
|
-
|
|
|
- // 如果主要源无效，尝试备用源
|
|
|
- if (!hlsHdSrc || hlsHdSrc === 'undefined' || hlsHdSrc === '') {
|
|
|
- console.warn('主要视频源无效，尝试备用源');
|
|
|
- hlsHdSrc = data.hls || data.hlsHd || data.rtmp || data.rtsp;
|
|
|
- console.log('备用视频源:', hlsHdSrc);
|
|
|
- }
|
|
|
-
|
|
|
- // 验证视频源
|
|
|
- if (!hlsHdSrc || hlsHdSrc === 'undefined' || hlsHdSrc === '') {
|
|
|
- console.error('所有视频源都无效:', {
|
|
|
- hls: data.hls,
|
|
|
- hlsHd: data.hlsHd,
|
|
|
- rtmp: data.rtmp,
|
|
|
- rtsp: data.rtsp
|
|
|
- });
|
|
|
- showError('视频源获取失败，请检查设备是否在线或联系管理员');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- console.log('视频源:', hlsHdSrc);
|
|
|
-
|
|
|
- var playHtml =
|
|
|
- `<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
|
|
|
- $("#box").html(playHtml)
|
|
|
-
|
|
|
- var myVideo = videojs(`myPlayer`, {
|
|
|
- controls: true,
|
|
|
- autoplay: false,
|
|
|
- preload: 'metadata',
|
|
|
- sources: [{
|
|
|
- type: 'application/x-mpegURL',
|
|
|
- src: hlsHdSrc,
|
|
|
- }],
|
|
|
- html5: {
|
|
|
- hls: {
|
|
|
- enableLowInitialPlaylist: true,
|
|
|
- smoothQualityChange: true,
|
|
|
- overrideNative: true
|
|
|
- }
|
|
|
- }
|
|
|
- }, function onPlayerReady() {
|
|
|
- console.log('播放器准备完成');
|
|
|
- setTimeout(() => {
|
|
|
- myVideo.play().catch(e => {
|
|
|
- console.error('播放失败:', e);
|
|
|
- $('#dialog').html('视频播放失败: ' + e.message).stop().show(500).delay(3000).hide(500);
|
|
|
- $('.videoBtnPlay').show();
|
|
|
- });
|
|
|
- }, 500);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加错误处理
|
|
|
- myVideo.on('error', function(e) {
|
|
|
- console.error('Video.js错误:', e, myVideo.error());
|
|
|
- const error = myVideo.error();
|
|
|
- let errorMsg = '视频播放出错';
|
|
|
-
|
|
|
- if (error) {
|
|
|
- switch(error.code) {
|
|
|
- case 1:
|
|
|
- errorMsg = '视频加载被中止';
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- errorMsg = '网络错误导致视频下载失败';
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- errorMsg = '视频解码失败';
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- errorMsg = '视频格式不支持或视频源无效';
|
|
|
- break;
|
|
|
- default:
|
|
|
- errorMsg = '未知播放错误';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- $('#dialog').html(errorMsg).stop().show(500).delay(3000).hide(500);
|
|
|
- $('.videoBtnPlay').show();
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('play', function() {
|
|
|
- console.log('开始播放')
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('loadstart', function() {
|
|
|
- console.log('开始加载视频');
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('canplay', function() {
|
|
|
- console.log('视频可以播放');
|
|
|
- });
|
|
|
+ hlsHdSrc = data.type_id == 0 ? data.hls : data.hlsHd;
|
|
|
}
|
|
|
-
|
|
|
+ var playHtml =
|
|
|
+ `<video id="myPlayer" poster='' controls playsInline webkit-playsinline src=${hlsHdSrc} style="width:100%; height:100%;"></video>`;
|
|
|
+ $("#box").html(playHtml)
|
|
|
+ var myVideo = videojs(`myPlayer`, {
|
|
|
+ controls: true,
|
|
|
+ autoplay: 'play',
|
|
|
+ url: hlsHdSrc,
|
|
|
+ sources: [{
|
|
|
+ type: 'application/x-mpegURL',
|
|
|
+ src: hlsHdSrc,
|
|
|
+ }],
|
|
|
+ }, function onPlayerReady() {
|
|
|
+ myVideo.play()
|
|
|
+ console.log('准备好了')
|
|
|
+ });
|
|
|
+ myVideo.on('play', function() {
|
|
|
+ console.log('开始播放')
|
|
|
+ })
|
|
|
} else {
|
|
|
alert(res.message)
|
|
|
}
|
|
|
@@ -799,6 +529,7 @@
|
|
|
// player.close('yunlianPlayer')
|
|
|
// player = null
|
|
|
// }
|
|
|
+
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/monitor/imagelist?id=' + device_id
|
|
|
})
|
