本地视频

dongguan-华为云
parent c82f6dc40e
commit f3b77612c3

Binary file not shown.

215
package-lock.json generated

@ -27,11 +27,11 @@
} }
}, },
"@ant-design/colors": { "@ant-design/colors": {
"version": "3.2.2", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-3.2.2.tgz", "resolved": "https://r2.cnpmjs.org/@ant-design/colors/-/colors-6.0.0.tgz",
"integrity": "sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==", "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
"requires": { "requires": {
"tinycolor2": "^1.4.1" "@ctrl/tinycolor": "^3.4.0"
} }
}, },
"@ant-design/icons": { "@ant-design/icons": {
@ -39,13 +39,18 @@
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-2.1.1.tgz", "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-2.1.1.tgz",
"integrity": "sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w==" "integrity": "sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w=="
}, },
"@ant-design/icons-svg": {
"version": "4.4.2",
"resolved": "https://r.cnpmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
"integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
},
"@ant-design/icons-vue": { "@ant-design/icons-vue": {
"version": "2.0.0", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-2.0.0.tgz", "resolved": "https://r.cnpmjs.org/@ant-design/icons-vue/-/icons-vue-7.0.1.tgz",
"integrity": "sha512-2c0QQE5hL4N48k5NkPG5sdpMl9YnvyNhf0U7YkdZYDlLnspoRU7vIA0UK9eHBs6OpFLcJB6o8eJrIl2ajBskPg==", "integrity": "sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==",
"requires": { "requires": {
"@ant-design/colors": "^3.1.0", "@ant-design/colors": "^6.0.0",
"babel-runtime": "^6.26.0" "@ant-design/icons-svg": "^4.2.1"
} }
}, },
"@babel/code-frame": { "@babel/code-frame": {
@ -1140,6 +1145,11 @@
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"@ctrl/tinycolor": {
"version": "3.6.1",
"resolved": "https://r.cnpmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
},
"@hapi/address": { "@hapi/address": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -1859,16 +1869,6 @@
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
"dev": true "dev": true
}, },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": { "cacache": {
"version": "13.0.1", "version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@ -1895,34 +1895,6 @@
"unique-filename": "^1.1.1" "unique-filename": "^1.1.1"
} }
}, },
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"debug": { "debug": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@ -1953,25 +1925,6 @@
"path-exists": "^4.0.0" "path-exists": "^4.0.0"
} }
}, },
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": { "locate-path": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@ -2042,16 +1995,6 @@
"minipass": "^3.1.1" "minipass": "^3.1.1"
} }
}, },
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": { "terser-webpack-plugin": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -2068,18 +2011,6 @@
"terser": "^4.6.12", "terser": "^4.6.12",
"webpack-sources": "^1.4.3" "webpack-sources": "^1.4.3"
} }
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
} }
} }
}, },
@ -2550,6 +2481,25 @@
"shallowequal": "^1.0.2", "shallowequal": "^1.0.2",
"vue-ref": "^2.0.0", "vue-ref": "^2.0.0",
"warning": "^4.0.0" "warning": "^4.0.0"
},
"dependencies": {
"@ant-design/colors": {
"version": "3.2.2",
"resolved": "https://r2.cnpmjs.org/@ant-design/colors/-/colors-3.2.2.tgz",
"integrity": "sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==",
"requires": {
"tinycolor2": "^1.4.1"
}
},
"@ant-design/icons-vue": {
"version": "2.0.0",
"resolved": "https://r2.cnpmjs.org/@ant-design/icons-vue/-/icons-vue-2.0.0.tgz",
"integrity": "sha512-2c0QQE5hL4N48k5NkPG5sdpMl9YnvyNhf0U7YkdZYDlLnspoRU7vIA0UK9eHBs6OpFLcJB6o8eJrIl2ajBskPg==",
"requires": {
"@ant-design/colors": "^3.1.0",
"babel-runtime": "^6.26.0"
}
}
} }
}, },
"antd-theme-generator": { "antd-theme-generator": {
@ -3436,7 +3386,7 @@
}, },
"axios": { "axios": {
"version": "0.19.2", "version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", "resolved": "https://r2.cnpmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": { "requires": {
"follow-redirects": "1.5.10" "follow-redirects": "1.5.10"
@ -13053,9 +13003,9 @@
"dev": true "dev": true
}, },
"tinycolor2": { "tinycolor2": {
"version": "1.4.1", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", "resolved": "https://r.cnpmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=" "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
}, },
"tmp": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
@ -13867,6 +13817,87 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://r.cnpmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://r2.cnpmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://r2.cnpmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://r2.cnpmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://r2.cnpmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://r2.cnpmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://r.cnpmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://r2.cnpmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-ref": { "vue-ref": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/vue-ref/-/vue-ref-2.0.0.tgz", "resolved": "https://registry.npmjs.org/vue-ref/-/vue-ref-2.0.0.tgz",

3514
public/adapter.min.js vendored

File diff suppressed because it is too large Load Diff

@ -0,0 +1,28 @@
{
"urls":{
"1号堆垛机第1个摄像头" : "rtsp://176.65.94.105/axis-media/media.amp",
"1号堆垛机第2个摄像头" : "rtsp://132.239.12.145/axis-media/media.amp",
"2号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.40:554/Streaming/tracks/",
"2号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.40:555/Streaming/tracks/",
"3号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.41:554/Streaming/tracks/",
"3号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.41:555/Streaming/tracks/",
"4号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.42:554/Streaming/tracks/",
"4号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.42:555/Streaming/tracks/",
"5号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.43:554/Streaming/tracks/",
"5号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.43:555/Streaming/tracks/",
"6号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.44:554/Streaming/tracks/",
"6号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.44:555/Streaming/tracks/",
"7号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.45:554/Streaming/tracks/",
"7号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.45:555/Streaming/tracks/",
"8号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.46:554/Streaming/tracks/",
"8号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.46:555/Streaming/tracks/",
"9号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.47:554/Streaming/tracks/",
"9号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.47:555/Streaming/tracks/",
"10号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.48:554/Streaming/tracks/",
"10号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.48:555/Streaming/tracks/",
"11号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.49:554/Streaming/tracks/",
"11号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.49:555/Streaming/tracks/",
"12号堆垛机第1个摄像头" : "rtsp://admin:a1234567@7.171.215.50:554/Streaming/tracks/",
"12号堆垛机第2个摄像头" : "rtsp://admin:a1234567@7.171.215.50:555/Streaming/tracks/"
}
}

@ -6,6 +6,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 引入webrtcstreamer插件-->
<script src="/webrtcstreamer.js"></script>
<script src="./adapter.min.js"></script>
<!-- 加快视频的响应速度--> <!-- 加快视频的响应速度-->
<!-- <script src="/video_play_plugins/video.js"></script> --> <!-- <script src="/video_play_plugins/video.js"></script> -->

@ -0,0 +1,313 @@
var WebRtcStreamer = (function() {
/**
* Interface with WebRTC-streamer API
* @constructor
* @param {string} videoElement - id of the video element tag
* @param {string} srvurl - url of webrtc-streamer (default is current location)
*/
var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {
if (typeof videoElement === "string") {
this.videoElement = document.getElementById(videoElement);
} else {
this.videoElement = videoElement;
}
this.srvurl = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;
this.pc = null;
this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };
this.iceServers = null;
this.earlyCandidates = [];
}
WebRtcStreamer.prototype._handleHttpErrors = function (response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
/**
* Connect a WebRTC Stream to videoElement
* @param {string} videourl - id of WebRTC video stream
* @param {string} audiourl - id of WebRTC audio stream
* @param {string} options - options of WebRTC call
* @param {string} stream - local stream to send
* @param {string} prefmime - prefered mime
*/
WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream, prefmime) {
this.disconnect();
// getIceServers is not already received
if (!this.iceServers) {
console.log("Get IceServers");
fetch(this.srvurl + "/api/getIceServers")
.then(this._handleHttpErrors)
.then( (response) => (response.json()) )
.then( (response) => this.onReceiveGetIceServers(response, videourl, audiourl, options, localstream, prefmime))
.catch( (error) => this.onError("getIceServers " + error ))
} else {
this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream, prefmime);
}
}
/**
* Disconnect a WebRTC Stream and clear videoElement source
*/
WebRtcStreamer.prototype.disconnect = function() {
if (this.videoElement?.srcObject) {
this.videoElement.srcObject.getTracks().forEach(track => {
track.stop()
this.videoElement.srcObject.removeTrack(track);
});
}
if (this.pc) {
fetch(this.srvurl + "/api/hangup?peerid=" + this.pc.peerid)
.then(this._handleHttpErrors)
.catch( (error) => this.onError("hangup " + error ))
try {
this.pc.close();
}
catch (e) {
console.log ("Failure close peer connection:" + e);
}
this.pc = null;
}
}
/*
* GetIceServers callback
*/
WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream, prefmime) {
this.iceServers = iceServers;
this.pcConfig = iceServers || {"iceServers": [] };
try {
this.createPeerConnection();
var callurl = this.srvurl + "/api/call?peerid=" + this.pc.peerid + "&url=" + encodeURIComponent(videourl);
if (audiourl) {
callurl += "&audiourl="+encodeURIComponent(audiourl);
}
if (options) {
callurl += "&options="+encodeURIComponent(options);
}
if (stream) {
this.pc.addStream(stream);
}
// clear early candidates
this.earlyCandidates.length = 0;
// create Offer
this.pc.createOffer(this.mediaConstraints).then((sessionDescription) => {
console.log("Create offer:" + JSON.stringify(sessionDescription));
console.log(`video codecs:${Array.from(new Set(RTCRtpReceiver.getCapabilities("video")?.codecs?.map(codec => codec.mimeType)))}`)
console.log(`audio codecs:${Array.from(new Set(RTCRtpReceiver.getCapabilities("audio")?.codecs?.map(codec => codec.mimeType)))}`)
if (prefmime != undefined) {
//set prefered codec
const [prefkind] = prefmime.split('/');
const codecs = RTCRtpReceiver.getCapabilities(prefkind).codecs;
const preferedCodecs = codecs.filter(codec => codec.mimeType === prefmime);
console.log(`preferedCodecs:${JSON.stringify(preferedCodecs)}`);
this.pc.getTransceivers().filter(transceiver => transceiver.receiver.track.kind === prefkind).forEach(tcvr => {
if(tcvr.setCodecPreferences != undefined) {
tcvr.setCodecPreferences(preferedCodecs);
}
});
}
this.pc.setLocalDescription(sessionDescription)
.then(() => {
fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) })
.then(this._handleHttpErrors)
.then( (response) => (response.json()) )
.catch( (error) => this.onError("call " + error ))
.then( (response) => this.onReceiveCall(response) )
.catch( (error) => this.onError("call " + error ))
}, (error) => {
console.log ("setLocalDescription error:" + JSON.stringify(error));
});
}, (error) => {
alert("Create offer error:" + JSON.stringify(error));
});
} catch (e) {
this.disconnect();
alert("connect error: " + e);
}
}
WebRtcStreamer.prototype.getIceCandidate = function() {
fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
.then(this._handleHttpErrors)
.then( (response) => (response.json()) )
.then( (response) => this.onReceiveCandidate(response))
.catch( (error) => this.onError("getIceCandidate " + error ))
}
/*
* create RTCPeerConnection
*/
WebRtcStreamer.prototype.createPeerConnection = function() {
console.log("createPeerConnection config: " + JSON.stringify(this.pcConfig));
this.pc = new RTCPeerConnection(this.pcConfig);
var pc = this.pc;
pc.peerid = Math.random();
pc.onicecandidate = (evt) => this.onIceCandidate(evt);
pc.onaddstream = (evt) => this.onAddStream(evt);
pc.oniceconnectionstatechange = (evt) => {
console.log("oniceconnectionstatechange state: " + pc.iceConnectionState);
if (this.videoElement) {
if (pc.iceConnectionState === "connected") {
this.videoElement.style.opacity = "1.0";
}
else if (pc.iceConnectionState === "disconnected") {
this.videoElement.style.opacity = "0.25";
}
else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") ) {
this.videoElement.style.opacity = "0.5";
} else if (pc.iceConnectionState === "new") {
this.getIceCandidate();
}
}
}
pc.ondatachannel = function(evt) {
console.log("remote datachannel created:"+JSON.stringify(evt));
evt.channel.onopen = function () {
console.log("remote datachannel open");
this.send("remote channel openned");
}
evt.channel.onmessage = function (event) {
console.log("remote datachannel recv:"+JSON.stringify(event.data));
}
}
try {
var dataChannel = pc.createDataChannel("ClientDataChannel");
dataChannel.onopen = function() {
console.log("local datachannel open");
this.send("local channel openned");
}
dataChannel.onmessage = function(evt) {
console.log("local datachannel recv:"+JSON.stringify(evt.data));
}
} catch (e) {
console.log("Cannor create datachannel error: " + e);
}
console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) );
return pc;
}
/*
* RTCPeerConnection IceCandidate callback
*/
WebRtcStreamer.prototype.onIceCandidate = function (event) {
if (event.candidate) {
if (this.pc.currentRemoteDescription) {
this.addIceCandidate(this.pc.peerid, event.candidate);
} else {
this.earlyCandidates.push(event.candidate);
}
}
else {
console.log("End of candidates.");
}
}
WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {
fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) })
.then(this._handleHttpErrors)
.then( (response) => (response.json()) )
.then( (response) => {console.log("addIceCandidate ok:" + response)})
.catch( (error) => this.onError("addIceCandidate " + error ))
}
/*
* RTCPeerConnection AddTrack callback
*/
WebRtcStreamer.prototype.onAddStream = function(event) {
console.log("Remote track added:" + JSON.stringify(event));
this.videoElement.srcObject = event.stream;
var promise = this.videoElement.play();
if (promise !== undefined) {
promise.catch((error) => {
console.warn("error:"+error);
this.videoElement.setAttribute("controls", true);
});
}
}
/*
* AJAX /call callback
*/
WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {
console.log("offer: " + JSON.stringify(dataJson));
var descr = new RTCSessionDescription(dataJson);
this.pc.setRemoteDescription(descr).then(() => {
console.log ("setRemoteDescription ok");
while (this.earlyCandidates.length) {
var candidate = this.earlyCandidates.shift();
this.addIceCandidate(this.pc.peerid, candidate);
}
this.getIceCandidate()
}
, (error) => {
console.log ("setRemoteDescription error:" + JSON.stringify(error));
});
}
/*
* AJAX /getIceCandidate callback
*/
WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {
console.log("candidate: " + JSON.stringify(dataJson));
if (dataJson) {
for (var i=0; i<dataJson.length; i++) {
var candidate = new RTCIceCandidate(dataJson[i]);
console.log("Adding ICE candidate :" + JSON.stringify(candidate) );
this.pc.addIceCandidate(candidate).then( () => { console.log ("addIceCandidate OK"); }
, (error) => { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );
}
this.pc.addIceCandidate();
}
}
/*
* AJAX callback for Error
*/
WebRtcStreamer.prototype.onError = function(status) {
console.log("onError:" + status);
}
return WebRtcStreamer;
})();
if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
window.WebRtcStreamer = WebRtcStreamer;
}
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
module.exports = WebRtcStreamer;
}

@ -0,0 +1,63 @@
<template>
<a-row type="flex-container" :gutter="30">
<a-col >
时间:<a-date-picker
v-model="date"
format="YYYY-MM-DD"
placeholder="请选择时间"
@change="cameraRecord"
/>
</a-col>
<label for="name">摄像机:</label>
<select v-model="selectedCamera">
<option v-for="(url, camera) in cameras" :key="url.camera" >{{ camera }}</option>
<li v-for="item in cameras" :key="item.video">{{ camera.video }}</li>
</select>
<div id="hikvideo">
<video id='video' controls autoplay muted width="50%" height="50%" style="object-fit: fill"></video>
</div>
</a-row>
</template>
<script>
export default {
name: "hikvideo",
data() {
return {
webRtcServer: null,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
date: '',
cameras: null,
selectedCamera: null
};
},
mounted() {
this.loadCameras();
this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");
this.webRtcServer.connect(key);
},
//销毁视频流
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
loadCameras() {
fetch('./config.json')
.then(response => response.json())
.then(data => {
this.cameras = data.urls;
console.log('这是一条来自Vue组件的日志信息222222222222');
//console.log(this.cameras);
console.log(key);
})
.catch(error => {
console.error('Error fetching JSON file:', error);
});
}
},
};
</script>

@ -0,0 +1,22 @@
{
"urls":{
"主控室球机1" : { "video": "rtsp://132.239.12.145/axis-media/media.amp"},
"主控室球机2" : { "video": "rtsp://86.44.41.160/axis-media/media.amp", "position":"52.258330,-7.111940"},
"主控室球机3" : { "video": "rtsp://193.142.128.20/axis-media/media.amp", "position":"43.483330,-1.483330"},
"主控室球机4" : { "video": "rtsp://211.132.61.124/axis-media/media.amp", "position":"35.717000,140.650000"},
"主控室球机5": {"video": "rtsp://stream.strba.sk:1935/strba/VYHLAD_JAZERO.stream"},
"主控室球机6": { "video": "rtsp://213.34.225.97/axis-media/media.amp", "position":"51.5,3.613890"},
"主控室球机7": { "video": "rtsp://174.6.126.86/axis-media/media.amp", "position":"49.249660,-123.119340"},
"主控室球机8": {"video": "rtsp://73.114.177.111/axis-media/media.amp"},
"主控室球机9": {"video": "rtsp://176.65.94.105/axis-media/media.amp"},
"主控室球10": {"video": "rtsp://37.157.51.30/axis-media/media.amp"},
"主控室球11": {"video": "rtsp://76.75.8.116/axis-media/media.amp", "position":"47.551039,-111.539400"},
"主控室球12": {"video":"rtsp://196.21.92.82/axis-media/media.amp", "position":"-33.925840,18.423220"},
"主控室球13": {"video":"rtsp://190.113.172.8/", "position":"-32.890840,-68.827170"},
"主控室球14": {"video":"rtsp://77.110.228.219/axis-media/media.amp", "position":"67.280000,14.405010" },
"主控室球15": {"video":"rtsp://71.83.5.156/axis-media/media.amp?videocodec=h265", "position":"42.972250,-85.953650" },
"主控室球16": {"video":"rtsp://176.139.87.16/axis-media/media.amp", "position":"44.238960,5.074610" },
"主控室球17": {"video":"rtsp://76.75.8.120/axis-media/media.amp", "position":"45.284650,-111.368290"},
"主控室球18": {"video":"rtsp://97.68.104.34/axis-media/media.amp", "position":"28.538340,-81.379240"}
}
}

@ -113,6 +113,15 @@ const routes = [
}, },
component: () => import('@/views/videoPlayback/index'), component: () => import('@/views/videoPlayback/index'),
}, },
{
path: 'hikvideo',
name: 'hikvideo',
meta: {
icon: 'tag',
name: '录像回放',
},
component: () => import('@/views/hikvideo/index'),
},
{ {
path: 'historyMonitoring', path: 'historyMonitoring',
name: 'historyMonitoring', name: 'historyMonitoring',

@ -0,0 +1,62 @@
<template>
<a-row type="flex-container" :gutter="30">
<a-col >
时间<a-date-picker
v-model="date"
format="YYYY-MM-DD"
placeholder="请选择时间"
@change="cameraRecord"
/>
</a-col>
<label for="name">摄像机:</label>
<select v-model="selectedCamera" >
<option v-for="(url, camera) in cameras" :key="url.camera" >{{ camera }}</option>
</select>
<div id="hikvideo">
<video id='video' controls autoplay muted width="50%" height="50%" style="object-fit: fill"></video>
</div>
</a-row>
</template>
<script>
export default {
name: "hikvideo",
data() {
return {
webRtcServer: null,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
date: '',
cameras: null,
selectedCamera: null
};
},
mounted() {
this.loadCameras();
this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");
//this.webRtcServer.connect("rtsp://132.239.12.145/axis-media/media.amp");
},
//
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
loadCameras() {
fetch('./config.json')
.then(response => response.json())
.then(data => {
this.cameras = data.urls;
this.camera = data.urls.video;
console.log("11111111111111111111111111111111111111111111");
console.log(this.cameras);
})
.catch(error => {
console.error('Error fetching JSON file:', error);
});
}
},
};
</script>
Loading…
Cancel
Save