|
|
@@ -148,10 +148,6 @@
|
|
|
margin-right: 2px;
|
|
|
margin-bottom: 3px;
|
|
|
}
|
|
|
-
|
|
|
- .imgBtnDgp {
|
|
|
- display: none;
|
|
|
- }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -206,28 +202,229 @@
|
|
|
<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
|
|
|
<script type="module">
|
|
|
import Player from './videoPlayer/videoPlay-js.js'
|
|
|
+ const domin = 'https://wx.hnyfwlw.com'
|
|
|
+ // 检测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加载完成，版本:', window.Hls.version);
|
|
|
+ resolve();
|
|
|
+ };
|
|
|
+ script.onerror = () => {
|
|
|
+ console.error('HLS.js加载失败');
|
|
|
+ reject(new Error('HLS.js加载失败'));
|
|
|
+ };
|
|
|
+ document.head.appendChild(script);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尝试使用HLS.js播放
|
|
|
+ function tryHLSJSPlayer(videoSrc) {
|
|
|
+ if (!window.Hls) {
|
|
|
+ console.error('HLS.js未加载');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!Hls.isSupported()) {
|
|
|
+ console.error('浏览器不支持HLS.js');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const video = document.getElementById('myPlayer');
|
|
|
+ if (!video) {
|
|
|
+ console.error('视频元素不存在');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const hls = new Hls({
|
|
|
+ debug: true,
|
|
|
+ enableWorker: true,
|
|
|
+ lowLatencyMode: true
|
|
|
+ });
|
|
|
+
|
|
|
+ hls.loadSource(videoSrc);
|
|
|
+ hls.attachMedia(video);
|
|
|
+
|
|
|
+ hls.on(Hls.Events.MANIFEST_PARSED, function() {
|
|
|
+ console.log('HLS.js: 清单解析完成');
|
|
|
+ video.play().catch(e => {
|
|
|
+ console.error('HLS.js播放失败:', e);
|
|
|
+ showError('HLS.js播放失败: ' + e.message);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ hls.on(Hls.Events.ERROR, function(event, data) {
|
|
|
+ console.error('HLS.js错误:', event, data);
|
|
|
+ if (data.fatal) {
|
|
|
+ switch(data.type) {
|
|
|
+ case Hls.ErrorTypes.NETWORK_ERROR:
|
|
|
+ showError('网络错误，无法加载视频流');
|
|
|
+ break;
|
|
|
+ case Hls.ErrorTypes.MEDIA_ERROR:
|
|
|
+ showError('媒体错误，视频格式可能不支持');
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ showError('HLS播放器致命错误');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
let player = null
|
|
|
let stopTimer = 0
|
|
|
- //上下左右和拍照
|
|
|
- var str = window.location.search.substr(1)
|
|
|
- var arr = str.split('&')
|
|
|
- console.log(str, arr);
|
|
|
- var device_id = arr[0].split('=')[1]
|
|
|
- // console.log(device_id);
|
|
|
- var accessToken = arr[1].slice(12)
|
|
|
- var videoType = arr[2]?.split('=')[1]
|
|
|
+
|
|
|
+ // 更安全的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 token = accessToken
|
|
|
- console.log(videoType, videoType == 'dgp')
|
|
|
+
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 安全的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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证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: '返回数据为空' };
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 };
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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;
|
|
|
- if (videoType == 'dgp') {
|
|
|
- $('.imgBtnDgp').show()
|
|
|
- } else {
|
|
|
- $('.imgBtnDgp').hide()
|
|
|
- }
|
|
|
- $('.photo').click(() => {
|
|
|
-
|
|
|
+
|
|
|
+ // 确保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) {
|
|
|
@@ -239,9 +436,9 @@
|
|
|
} else {
|
|
|
|
|
|
$('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
|
|
|
- let url = "http://47.110.79.22:9000/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 = "http://47.110.79.22:9000/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",
|
|
|
@@ -261,13 +458,13 @@
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
- let url = "http://47.110.79.22:9000/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 = "http://47.110.79.22:9000/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
|
|
|
@@ -291,7 +488,7 @@
|
|
|
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
|
|
|
@@ -302,7 +499,7 @@
|
|
|
} 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",
|
|
|
@@ -319,7 +516,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
|
|
|
@@ -375,57 +572,197 @@
|
|
|
|
|
|
$('.videoBtnPlay').click(function() {
|
|
|
$('.videoBtnPlay').hide()
|
|
|
- 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
|
|
|
+ console.log(videoType,'videoTypevideoType')
|
|
|
+
|
|
|
+ // 显示加载提示
|
|
|
+ $('#dialog').html('正在获取视频流...').stop().show();
|
|
|
+
|
|
|
+ // 先检查设备状态（可选，如果API支持的话）
|
|
|
+ // checkDeviceStatus().then(() => {
|
|
|
+ if (videoType == 'dgp') {
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: `${domin}/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;
|
|
|
}
|
|
|
- }).then((res) => {
|
|
|
- // console.log(JSON.stringify(res))
|
|
|
- if (res.message == '') {
|
|
|
- var data = null
|
|
|
- if (typeof res.data == 'string') {
|
|
|
- data = eval('(' + res.data + ')');
|
|
|
+
|
|
|
+ let data = validation.data;
|
|
|
+ if (typeof data == 'string') {
|
|
|
+ data = safeParseJSON(data);
|
|
|
+ if (!data) {
|
|
|
+ showError('DGP数据解析失败');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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;
|
|
|
+
|
|
|
+ // 根据视频源类型选择合适的播放器
|
|
|
+ if (videoSource.type === 'rtmp') {
|
|
|
+ // RTMP流使用Flash播放器或转换为HLS
|
|
|
+ console.log('检测到RTMP流，尝试使用备用播放方案');
|
|
|
+
|
|
|
+ // 尝试查找HLS备用源
|
|
|
+ const hlsBackup = getAvailableVideoSource(data, 'hls');
|
|
|
+ if (hlsBackup.source) {
|
|
|
+ console.log('使用HLS备用源:', hlsBackup.source);
|
|
|
+ createVideoJSPlayer(hlsBackup.source, 'application/x-mpegURL');
|
|
|
} else {
|
|
|
- data = res.data;
|
|
|
+ // 如果没有HLS源，显示RTMP不支持的提示
|
|
|
+ showError('当前设备使用RTMP流，浏览器不支持直接播放。请联系管理员配置HLS流。');
|
|
|
}
|
|
|
- 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)
|
|
|
+ // HLS/其他格式使用Video.js
|
|
|
+ const mimeType = videoSource.type === 'hls' || videoSource.type === 'hlsHd'
|
|
|
+ ? 'application/x-mpegURL'
|
|
|
+ : 'video/mp4';
|
|
|
+ createVideoJSPlayer(hlsHdSrc, mimeType);
|
|
|
}
|
|
|
-
|
|
|
- })
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error('DGP视频请求失败:', error);
|
|
|
+ showError('DGP网络请求失败: ' + (error.message || '请检查网络连接'));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建Video.js播放器的通用函数
|
|
|
+ function createVideoJSPlayer(videoSrc, mimeType) {
|
|
|
+ console.log('创建播放器，源:', videoSrc, '类型:', mimeType);
|
|
|
+
|
|
|
+ var playHtml =
|
|
|
+ `<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
|
|
|
+ $("#box").html(playHtml)
|
|
|
+
|
|
|
+ // 如果是HLS格式且HLS.js可用，优先使用HLS.js
|
|
|
+ if (mimeType === 'application/x-mpegURL' && window.Hls && Hls.isSupported()) {
|
|
|
+ console.log('使用HLS.js播放器');
|
|
|
+ if (tryHLSJSPlayer(videoSrc)) {
|
|
|
+ return; // HLS.js成功初始化
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用Video.js作为fallback
|
|
|
+ console.log('使用Video.js播放器');
|
|
|
+ var myVideo = videojs(`myPlayer`, {
|
|
|
+ controls: true,
|
|
|
+ autoplay: false,
|
|
|
+ preload: 'metadata',
|
|
|
+ sources: [{
|
|
|
+ type: mimeType,
|
|
|
+ src: videoSrc,
|
|
|
+ }],
|
|
|
+ html5: {
|
|
|
+ hls: {
|
|
|
+ enableLowInitialPlaylist: true,
|
|
|
+ smoothQualityChange: true,
|
|
|
+ overrideNative: false // 让HLS.js处理
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, function onPlayerReady() {
|
|
|
+ console.log('Video.js播放器准备完成');
|
|
|
+ // 延迟播放，确保源加载完成
|
|
|
+ setTimeout(() => {
|
|
|
+ myVideo.play().catch(e => {
|
|
|
+ console.error('Video.js播放失败:', e);
|
|
|
+ showError('视频播放失败: ' + e.message);
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加错误处理
|
|
|
+ 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 = '视频格式不支持。源: ' + videoSrc + ' 类型: ' + mimeType;
|
|
|
+ // 如果Video.js失败，尝试原生播放器
|
|
|
+ console.log('Video.js失败，尝试原生播放器');
|
|
|
+ tryNativePlayer(videoSrc);
|
|
|
+ return;
|
|
|
+ default:
|
|
|
+ errorMsg = '未知播放错误 (错误码: ' + error.code + ')';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ showError(errorMsg);
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('play', function() {
|
|
|
+ console.log('Video.js开始播放')
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('loadstart', function() {
|
|
|
+ console.log('Video.js开始加载视频');
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('canplay', function() {
|
|
|
+ console.log('Video.js视频可以播放');
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('loadedmetadata', function() {
|
|
|
+ console.log('Video.js视频元数据加载完成');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尝试原生播放器
|
|
|
+ function tryNativePlayer(videoSrc) {
|
|
|
+ console.log('尝试原生播放器');
|
|
|
+ var playHtml = `<video id="nativePlayer" controls playsInline webkit-playsinline style="width:100%; height:100%;" src="${videoSrc}"></video>`;
|
|
|
+ $("#box").html(playHtml);
|
|
|
+
|
|
|
+ const video = document.getElementById('nativePlayer');
|
|
|
+ video.addEventListener('error', function(e) {
|
|
|
+ console.error('原生播放器也失败了:', e);
|
|
|
+ showError('所有播放器都无法播放此视频源，请联系管理员检查视频流配置');
|
|
|
+ });
|
|
|
+
|
|
|
+ video.addEventListener('canplay', function() {
|
|
|
+ console.log('原生播放器可以播放');
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
} else {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/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",
|
|
|
+ // url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
+ url: `${domin}/api/api_gateway?method=camera.camera_manage.multi_addr_camera`,
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
token
|
|
|
@@ -433,39 +770,55 @@
|
|
|
// token: localStorage.getItem('session_key')
|
|
|
}
|
|
|
}).then((res) => {
|
|
|
- // console.log(JSON.stringify(res))
|
|
|
- if (res.message == '') {
|
|
|
+ console.log('API响应:', res);
|
|
|
+ if (res && res.message == '') {
|
|
|
var data = null
|
|
|
if (typeof res.data == 'string') {
|
|
|
- data = eval('(' + res.data + ')');
|
|
|
+ data = safeParseJSON(res.data);
|
|
|
} else {
|
|
|
data = res.data;
|
|
|
}
|
|
|
- console.log(data, '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
|
|
|
+ });
|
|
|
+
|
|
|
if (data.type_id == 2) {
|
|
|
// 大华云联
|
|
|
+ if (!data.rtsp || data.rtsp === 'undefined' || data.rtsp === '') {
|
|
|
+ console.error('RTSP视频源无效:', data.rtsp);
|
|
|
+ showError('RTSP视频源获取失败，请检查设备配置');
|
|
|
+ return;
|
|
|
+ }
|
|
|
initYunlianPlayer(data.rtsp)
|
|
|
|
|
|
} else {
|
|
|
- let 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('开始播放')
|
|
|
- })
|
|
|
+ // 获取可用的视频源
|
|
|
+ const videoSource = getAvailableVideoSource(data, data.type_id == 0 ? 'hls' : 'hlsHd');
|
|
|
+
|
|
|
+ if (!videoSource.source) {
|
|
|
+ console.error('没有找到可用的视频源');
|
|
|
+ showError('设备可能离线或未配置视频流，请检查设备状态');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(`使用${videoSource.type}视频源:`, videoSource.source);
|
|
|
+
|
|
|
+ // 使用通用播放器创建函数
|
|
|
+ const mimeType = videoSource.type === 'hls' || videoSource.type === 'hlsHd'
|
|
|
+ ? 'application/x-mpegURL'
|
|
|
+ : 'video/mp4';
|
|
|
+ createVideoJSPlayer(videoSource.source, mimeType);
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
@@ -494,7 +847,6 @@
|
|
|
// player.close('yunlianPlayer')
|
|
|
// player = null
|
|
|
// }
|
|
|
-
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/monitor/dgpImagelist?id=' + device_id
|
|
|
})
|
