|
|
@@ -85,36 +85,69 @@ const uploadLock = ref(true); // 上传锁
|
|
|
let backTimer = null; // 返回计时器
|
|
|
const canUpload = ref(true); // 是否可以上传
|
|
|
let tracker;
|
|
|
+
|
|
|
+// ------------------- NVR 相关配置 -------------------
|
|
|
+const NVRInit = () => {
|
|
|
+ let options = {
|
|
|
+ wsURL: "ws://" + "192.168.101.108" + ":" + "80" + "/rtspoverwebsocket",
|
|
|
+ rtspURL:
|
|
|
+ "rtsp://" +
|
|
|
+ "192.168.101.108"+":" +
|
|
|
+ "80" +
|
|
|
+ "/cam/realmonitor?channel=" +
|
|
|
+ 1 +
|
|
|
+ "&subtype=" +
|
|
|
+ 0 +
|
|
|
+ "&proto=Private3",
|
|
|
+ username: "admin",
|
|
|
+ password: "admin123",
|
|
|
+ };
|
|
|
+ let videoObj = document.getElementById("video");
|
|
|
+ let canvasObj = document.getElementById("canvas");
|
|
|
+ const player = new PlayerControl(options);
|
|
|
+ console.log(player, "player");
|
|
|
+ player.on("WorkerReady", function () {
|
|
|
+ //当文件准备完成后，开始拉流。
|
|
|
+ player.connect();
|
|
|
+ });
|
|
|
+ player.init(videoObj, canvasObj); // 初始化播放器
|
|
|
+ // RPC.login('admin', 'admin123', false).then((res)=>{
|
|
|
+ // console.log(res,'res');
|
|
|
+ // })
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+//-----------------------------------------------
|
|
|
// 检查摄像头并设置视频流
|
|
|
-async function checkCamera() {
|
|
|
- // 获取媒体设备信息
|
|
|
- const navigator = window.parent.navigator.mediaDevices;
|
|
|
- if (!navigator) {
|
|
|
- window.alert("该浏览器不支持开启摄像头，请更换最新版浏览器");
|
|
|
- }
|
|
|
- // console.log(navigator, "navigator");
|
|
|
- //判断用户是否拥有摄像头
|
|
|
- const devices = await navigator.enumerateDevices();
|
|
|
+// async function checkCamera() {
|
|
|
+// // 获取媒体设备信息
|
|
|
+// const navigator = window.parent.navigator.mediaDevices;
|
|
|
+// if (!navigator) {
|
|
|
+// window.alert("该浏览器不支持开启摄像头，请更换最新版浏览器");
|
|
|
+// }
|
|
|
+// // console.log(navigator, "navigator");
|
|
|
+// //判断用户是否拥有摄像头
|
|
|
+// const devices = await navigator.enumerateDevices();
|
|
|
|
|
|
- // 如果存在媒体设备，获取摄像头视频流
|
|
|
- if (devices) {
|
|
|
- // 请求用户媒体设备（摄像头）
|
|
|
- const stream = await navigator.getUserMedia({
|
|
|
- audio: false,
|
|
|
- video: {
|
|
|
- width: 280, // 设置视频宽度
|
|
|
- height: 280, // 设置视频高度
|
|
|
- facingMode: "user", // 使用前置摄像头
|
|
|
- },
|
|
|
- });
|
|
|
+// // 如果存在媒体设备，获取摄像头视频流
|
|
|
+// if (devices) {
|
|
|
+// // 请求用户媒体设备（摄像头）
|
|
|
+// const stream = await navigator.getUserMedia({
|
|
|
+// audio: false,
|
|
|
+// video: {
|
|
|
+// width: 280, // 设置视频宽度
|
|
|
+// height: 280, // 设置视频高度
|
|
|
+// facingMode: "user", // 使用前置摄像头
|
|
|
+// },
|
|
|
+// });
|
|
|
|
|
|
- // 如果视频元素存在，将视频流绑定到视频元素上并开始播放
|
|
|
- if (videoEl.value) {
|
|
|
- videoEl.value.srcObject = stream;
|
|
|
- videoEl.value.play();
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+// // 如果视频元素存在，将视频流绑定到视频元素上并开始播放
|
|
|
+// if (videoEl.value) {
|
|
|
+// videoEl.value.srcObject = stream;
|
|
|
+// videoEl.value.play();
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
|
|
|
// 拍摄函数，截取摄像头当前帧并显示在页面上
|
|
|
function shoot() {
|
|
|
@@ -291,10 +324,9 @@ const init = () => {
|
|
|
//调接口把图片传到后端
|
|
|
const uploadImgFn = (imageDataUrl) => {
|
|
|
// 发送原生axios请求地址为192.168.101.13/face-login
|
|
|
- if(!canUpload.value) {
|
|
|
- uploadImgFn()
|
|
|
- return
|
|
|
- };
|
|
|
+ if (!canUpload.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
canUpload.value = false;
|
|
|
setTimeout(() => {
|
|
|
canUpload.value = true;
|
|
|
@@ -325,35 +357,16 @@ const uploadImgFn = (imageDataUrl) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
};
|
|
|
-// // 上传图片
|
|
|
-// const screenshotAndUpload = () => {
|
|
|
-// // 上锁避免重复发送请求
|
|
|
-// uploadLock.value = false;
|
|
|
-
|
|
|
-// // 绘制当前帧图片转换为base64格式
|
|
|
-// // let canvas = document.getElementById("screenshotCanvas");
|
|
|
-// // let data = video.value;
|
|
|
-// // console.log('canvas',canvas);
|
|
|
-// // let ctx = canvas.getContext("2d");
|
|
|
-// // ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
-// // ctx.drawImage(data, 0, 0, canvas.width, canvas.height);
|
|
|
-// let base64Img = canvas.toDataURL("image/jpeg");
|
|
|
-
|
|
|
-// // 使用 base64Img 请求接口即可
|
|
|
-// // console.log("base64Img:", base64Img);
|
|
|
-
|
|
|
-// // 请求接口成功以后打开锁
|
|
|
-// // this.uploadLock = true;
|
|
|
-// };
|
|
|
|
|
|
// 在组件挂载后执行检查摄像头的操作
|
|
|
onMounted(() => {
|
|
|
- checkCamera();
|
|
|
+ // checkCamera();
|
|
|
// setTimeout(() => {
|
|
|
// shoot();
|
|
|
// }, 3000);
|
|
|
pagInit();
|
|
|
init();
|
|
|
+ NVRInit();
|
|
|
backTimer = setTimeout(() => {
|
|
|
router.push("/");
|
|
|
}, 30000);
|
liuqiang