|
|
@@ -1,549 +0,0 @@
|
|
|
-<!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;
|
|
|
- }
|
|
|
- #myCanvas{
|
|
|
- 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>
|
|
|
- <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">
|
|
|
- </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://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'
|
|
|
-
|
|
|
- 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]
|
|
|
- var accessToken = arr[1].slice(12)
|
|
|
- var videoType = arr[2]?.split('=')[1]
|
|
|
- var token = accessToken
|
|
|
-
|
|
|
- window._configCamera = configCamera;
|
|
|
- window._stopConfigCamera = stopConfigCamera;
|
|
|
- window._postPic = postPic;
|
|
|
- if (videoType == 'dgp') {
|
|
|
- $('.imgBtnDgp').show()
|
|
|
- } else {
|
|
|
- $('.imgBtnDgp').hide()
|
|
|
- }
|
|
|
- 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');
|
|
|
- }
|
|
|
- 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()
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function destroyPlayer() {
|
|
|
- if (player) {
|
|
|
- const container = document.getElementById('huifangPlayer')
|
|
|
- player.pause()
|
|
|
- player.unload()
|
|
|
- player.detachMediaElement()
|
|
|
- player.destroy()
|
|
|
- player = null
|
|
|
- player = ''
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function configCamera(ctrl, movenum) {
|
|
|
- if (ctrl == "takephoto") {
|
|
|
- if (player) {
|
|
|
- // 云联的拍照特殊处理
|
|
|
- // 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"
|
|
|
- if (videoType == 'dgp') {
|
|
|
- url = domin+"/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.message == '') {
|
|
|
- $('#dialog').html('拍照成功').stop().show(500).delay(1000).hide(500)
|
|
|
- } else {
|
|
|
- $('#dialog').html(res.message).stop().show(500).delay(1000).hide(500)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
- 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"
|
|
|
- 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 (player) {
|
|
|
- // 云联不需要停止
|
|
|
- return
|
|
|
- }
|
|
|
- if (videoType == 'dgp') {
|
|
|
- if (stopTimer) clearTimeout(stopTimer)
|
|
|
- stopTimer = setTimeout(() => {
|
|
|
- $.ajax({
|
|
|
- type: "POST",
|
|
|
- url: domin+"/api/api_gateway?method=camera.camera_manage.mulit_stop_move",
|
|
|
- data: {
|
|
|
- device_id: device_id,
|
|
|
- token
|
|
|
- },
|
|
|
- });
|
|
|
- }, 3000)
|
|
|
-
|
|
|
- } else {
|
|
|
- $.ajax({
|
|
|
- type: "POST",
|
|
|
- url: domin+"/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: domin+"/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.message).stop().show(500).delay(1500).hide(500)
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- $('.videoBtnPlay').click(function() {
|
|
|
- $('.videoBtnPlay').hide()
|
|
|
- if (videoType == 'dgp') {
|
|
|
- $.ajax({
|
|
|
- type: "POST",
|
|
|
- url: domin+"/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: 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) => {
|
|
|
- if (res.message == '') {
|
|
|
- var data = null
|
|
|
- if (typeof res.data == 'string') {
|
|
|
- data = eval('(' + res.data + ')');
|
|
|
- } else {
|
|
|
- data = res.data;
|
|
|
- }
|
|
|
- var hlsHdSrc = ""
|
|
|
- if (data.type_id == 2) {
|
|
|
- // 大华云联
|
|
|
- // initFlvPlayer(data.rtsp)
|
|
|
-
|
|
|
- player = 1
|
|
|
- hlsHdSrc = data.rtsp;
|
|
|
- } else {
|
|
|
- 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>
|
