|
|
@@ -0,0 +1,504 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang=zh-CN>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta name="viewport"
|
|
|
+ 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;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ span.vjs-control-text {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* iframe {
|
|
|
+ width: 375px;
|
|
|
+ height: 667px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: content-box;
|
|
|
+ border: none;
|
|
|
+ } */
|
|
|
+ .btn-box {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-container {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .videoBtnPlay {
|
|
|
+ position: absolute;
|
|
|
+ height: 100px;
|
|
|
+ width: 100px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .more,
|
|
|
+ .less {
|
|
|
+ flex: 1
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .direc {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/monitor/1.png');
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .direc div {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #4ec467;
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ top: 0;
|
|
|
+ left: 50px
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ bottom: 0;
|
|
|
+ left: 50px
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ left: 0;
|
|
|
+ top: 50px
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ right: 0;
|
|
|
+ top: 50px
|
|
|
+ }
|
|
|
+
|
|
|
+ #box {
|
|
|
+ height: 300px;
|
|
|
+ width: 100%;
|
|
|
+ background: #000;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dialog {
|
|
|
+ display: none;
|
|
|
+ min-width: 200px;
|
|
|
+ line-height: 80px;
|
|
|
+ background: rgba(0, 0, 0, .8);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -100px;
|
|
|
+ border-radius: 4px;
|
|
|
+ z-index: 999;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBtn {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #338cd9;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBtn div {
|
|
|
+ /* padding: 0 16px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBtn img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 2px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBtnDgp {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="btn-container">
|
|
|
+ <div id="box"> </div>
|
|
|
+ <div class="videoBtnPlay">
|
|
|
+ <img src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/wxplayer.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="dialog">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <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">
|
|
|
+ </image>
|
|
|
+ </div>
|
|
|
+ <div class="direc">
|
|
|
+ <div class="top" ontouchstart="_configCamera('move', 0)" ontouchend="_stopConfigCamera()">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="bottom" ontouchstart="_configCamera('move', 1)" ontouchend="_stopConfigCamera()">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <p class="photo yficonfont icon-paizhao-xianxing" ontouchstart="_configCamera('takephoto', '')">
|
|
|
+
|
|
|
+ </p>
|
|
|
+ <div class="left" ontouchstart="_configCamera('move', 2)" ontouchend="_stopConfigCamera()">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right" ontouchstart="_configCamera('move', 3)" ontouchend="_stopConfigCamera()">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="less" ontouchstart="_configCamera('move', 9)" ontouchend="_stopConfigCamera()">
|
|
|
+ <image src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/monitor/2.png" mode="widthFix">
|
|
|
+ </image>
|
|
|
+ </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>
|
|
|
+ </body>
|
|
|
+ <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 src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
|
|
|
+ <script type="module">
|
|
|
+ import Player from './videoPlayer/videoPlay-js.js'
|
|
|
+ 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]
|
|
|
+ var token = accessToken
|
|
|
+ console.log(videoType, videoType == 'dgp')
|
|
|
+ window._configCamera = configCamera;
|
|
|
+ window._stopConfigCamera = stopConfigCamera;
|
|
|
+ window._postPic = postPic;
|
|
|
+ if (videoType == 'dgp') {
|
|
|
+ $('.imgBtnDgp').show()
|
|
|
+ } else {
|
|
|
+ $('.imgBtnDgp').hide()
|
|
|
+ }
|
|
|
+ $('.photo').click(() => {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ function configCamera(ctrl, movenum) {
|
|
|
+ if (ctrl == "takephoto") {
|
|
|
+
|
|
|
+ if (player) {
|
|
|
+ // 云联的拍照特殊处理
|
|
|
+ player.screenshot('yunlianPlayer')
|
|
|
+ } else {
|
|
|
+
|
|
|
+ $('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
|
|
|
+ let url = "http://47.110.79.22:9000/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"
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: url,
|
|
|
+ data: {
|
|
|
+ device_id: device_id,
|
|
|
+ token
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+
|
|
|
+ if (res.data == true) {
|
|
|
+ $('#dialog').html('拍照成功').stop().show(500).delay(1000).hide(500)
|
|
|
+ } else {
|
|
|
+ $('#dialog').html(res.message).stop().show(500).delay(1000).hide(500)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ let url = "http://47.110.79.22:9000/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"
|
|
|
+ postData.ctrl = movenum
|
|
|
+ } else {
|
|
|
+ postData.ctrl = ctrl
|
|
|
+ postData.movenum = movenum
|
|
|
+ }
|
|
|
+ //上下左右、放大、缩小
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: url,
|
|
|
+ data: postData
|
|
|
+ }).then((res) => {
|
|
|
+ $('#dialog').html('指令下发成功,请等待...').stop().show(500).delay(3000).hide(500)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function stopConfigCamera() {
|
|
|
+
|
|
|
+ if (videoType == 'dgp') {
|
|
|
+ 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",
|
|
|
+ data: {
|
|
|
+ device_id: device_id,
|
|
|
+ token
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },3000)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.ctrl_camera",
|
|
|
+ data: {
|
|
|
+ device_id: device_id,
|
|
|
+ ctrl: "stop",
|
|
|
+ token
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function postPic(file) {
|
|
|
+ let form = new FormData()
|
|
|
+ form.append('img_file', file)
|
|
|
+ form.append('device_id', device_id)
|
|
|
+ form.append('token', token)
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.save_camera_photo",
|
|
|
+ contentType: false,
|
|
|
+ processData: false,
|
|
|
+ data: form
|
|
|
+ }).then((res) => {
|
|
|
+
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ 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()
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }).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)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ } 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",
|
|
|
+ data: {
|
|
|
+ device_id: device_id,
|
|
|
+ token
|
|
|
+ // device_id: 'FA8690323-1',
|
|
|
+ // token: localStorage.getItem('session_key')
|
|
|
+ }
|
|
|
+ }).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');
|
|
|
+ if (data.type_id == 2) {
|
|
|
+ // 大华云联
|
|
|
+ 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('开始播放')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ alert(res.message)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ document.addEventListener('UniAppJSBridgeReady', function() {
|
|
|
+
|
|
|
+ $('.imgBtnCamrea').click(function() {
|
|
|
+ // if (player) {
|
|
|
+ // player.close('yunlianPlayer')
|
|
|
+ // player = null
|
|
|
+ // }
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/monitor/imagelist?id=' + device_id
|
|
|
+ })
|
|
|
+ })
|
|
|
+ $('.imgBtnDgp').click(function() {
|
|
|
+ // if (player) {
|
|
|
+ // player.close('yunlianPlayer')
|
|
|
+ // player = null
|
|
|
+ // }
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/monitor/dgpImagelist?id=' + device_id
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</html>
|
