添加websocket
This commit is contained in:
parent
55889ecaac
commit
ef17d04783
|
|
@ -15,7 +15,8 @@
|
|||
"less-loader": "^12.2.0",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^2.8.1",
|
||||
"vuex": "^3.6.2"
|
||||
"vuex": "^3.6.2",
|
||||
"ws": "^8.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
|
|
@ -11029,6 +11030,27 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-bundle-analyzer/node_modules/ws": {
|
||||
"version": "7.5.10",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.10.tgz",
|
||||
"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-chain": {
|
||||
"version": "6.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz",
|
||||
|
|
@ -11207,27 +11229,6 @@
|
|||
"node": ">= 12.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-dev-server/node_modules/ws": {
|
||||
"version": "8.16.0",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.16.0.tgz",
|
||||
"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-merge": {
|
||||
"version": "5.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-5.10.0.tgz",
|
||||
|
|
@ -11379,16 +11380,15 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "7.5.9",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
|
||||
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
|
||||
"dev": true,
|
||||
"version": "8.18.0",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.0.tgz",
|
||||
"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
|
||||
"engines": {
|
||||
"node": ">=8.3.0"
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
|
|
@ -20135,6 +20135,13 @@
|
|||
"resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
|
||||
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
|
||||
"dev": true
|
||||
},
|
||||
"ws": {
|
||||
"version": "7.5.10",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.10.tgz",
|
||||
"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -20278,13 +20285,6 @@
|
|||
"ajv-formats": "^2.1.1",
|
||||
"ajv-keywords": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.16.0",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.16.0.tgz",
|
||||
"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -20403,10 +20403,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"ws": {
|
||||
"version": "7.5.9",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
|
||||
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
|
||||
"dev": true,
|
||||
"version": "8.18.0",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.0.tgz",
|
||||
"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
|
||||
"requires": {}
|
||||
},
|
||||
"y18n": {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
"less-loader": "^12.2.0",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^2.8.1",
|
||||
"vuex": "^3.6.2"
|
||||
"vuex": "^3.6.2",
|
||||
"ws": "^8.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
|
|
|
|||
|
|
@ -1,21 +1,35 @@
|
|||
<template>
|
||||
<div class="img_bg_camera">
|
||||
<el-row :gutter="10" style="padding: 10px; opacity: 0.9;">
|
||||
<el-row :gutter="10" style="padding: 10px; opacity: 0.9">
|
||||
<el-col :span="18">
|
||||
<el-card style="margin-top: 10px;">
|
||||
<div style="width: 100%;max-width: 900px;">
|
||||
<el-card style="margin-top: 10px">
|
||||
<div style="width: 100%; max-width: 900px">
|
||||
<video ref="video" autoplay></video>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card style="margin-top: 10px; display: flex;justify-content: center;">
|
||||
<canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
|
||||
<div style=" align-items: center;">
|
||||
<alarm backgroudColor="red" :size="80">!</alarm>
|
||||
<el-button style="margin-top: 10px;" type="danger" @click="Alert()">医疗出警</el-button>
|
||||
<el-card
|
||||
style="margin-top: 10px; display: flex; justify-content: center"
|
||||
>
|
||||
<canvas
|
||||
style="display: none"
|
||||
id="canvasCamera"
|
||||
width="250"
|
||||
height="250"
|
||||
></canvas>
|
||||
<div style="align-items: center">
|
||||
<alarm v-if="isShow" :backgroudColor="color" :size="80">!</alarm>
|
||||
<el-button style="margin-top: 10px" type="danger" @click="Alert()"
|
||||
>医疗出警</el-button
|
||||
>
|
||||
</div>
|
||||
<el-button style="margin-top: 10px;" type="success" @click="RemoteDialog()">远程对话</el-button>
|
||||
<el-button
|
||||
style="margin-top: 10px"
|
||||
type="success"
|
||||
@click="RemoteDialog()"
|
||||
>远程对话</el-button
|
||||
>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -24,41 +38,92 @@
|
|||
|
||||
<script>
|
||||
// import axios from 'a/xios';
|
||||
import Alarm from '@/element/Alarm.vue';
|
||||
import Alarm from "@/element/Alarm.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Alarm
|
||||
Alarm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgif: false,
|
||||
videoWidth: 250,
|
||||
videoHeight: 250,
|
||||
imgSrc: '',
|
||||
imgSrc: "",
|
||||
thisCancas: null,
|
||||
thisContext: null,
|
||||
thisVideo: null,
|
||||
imga: '',
|
||||
intervalId: null,//
|
||||
AiMessage: [
|
||||
],
|
||||
time: "5000",//拍照时间间隔
|
||||
}
|
||||
imga: "",
|
||||
intervalId: null, //
|
||||
AiMessage: [],
|
||||
time: "5000", //拍照时间间隔
|
||||
isShow: false,
|
||||
color: "red",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
webSocketInit() {
|
||||
const that = this;
|
||||
if (typeof WebSocket === undefined) {
|
||||
console.log("您的浏览器不支持WebSocket");
|
||||
} else {
|
||||
console.log("您的浏览器支持WebSocket");
|
||||
let socketUrl = "ws://localhost:8081/danger/get";
|
||||
let socket;
|
||||
|
||||
if (socket != null) {
|
||||
socket.close();
|
||||
socket = null;
|
||||
}
|
||||
|
||||
socket = new WebSocket(socketUrl);
|
||||
socket.onopen = function () {
|
||||
console.log("websocket已打开");
|
||||
};
|
||||
socket.onmessage = function (message) {
|
||||
console.log(message.data);
|
||||
if (message.data == "二级") {
|
||||
that.isShow = true;
|
||||
that.color = "#CCCC00";
|
||||
that.issues();
|
||||
that.solve();
|
||||
} else if (message.data == "三级") {
|
||||
that.issues();
|
||||
that.isShow = true;
|
||||
that.color = "red";
|
||||
that.solve();
|
||||
that.alarmSound();
|
||||
}
|
||||
|
||||
socket.onerror = function () {
|
||||
console.log("websocket发生了错误");
|
||||
};
|
||||
socket.onclose = function () {
|
||||
console.log("websocket已关闭");
|
||||
};
|
||||
};
|
||||
}
|
||||
},
|
||||
async getVideoDevices() {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
this.videoDevices = devices.filter(device => device.kind === 'videoinput');
|
||||
this.videoDevices = devices.filter(
|
||||
(device) => device.kind === "videoinput"
|
||||
);
|
||||
if (this.videoDevices.length > 0) {
|
||||
this.selectedDeviceId = this.videoDevices.find(device => device.label.includes('usb'));
|
||||
this.selectedDeviceId = this.videoDevices.find((device) =>
|
||||
device.label.includes("usb")
|
||||
);
|
||||
}
|
||||
console.log(this.selectedDeviceId);
|
||||
},
|
||||
async startRecording() {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { deviceId: this.selectedDeviceId ? { exact: this.selectedDeviceId } : undefined }
|
||||
video: {
|
||||
deviceId: this.selectedDeviceId
|
||||
? { exact: this.selectedDeviceId }
|
||||
: undefined,
|
||||
},
|
||||
});
|
||||
this.$refs.video.srcObject = stream;
|
||||
|
||||
|
|
@ -70,37 +135,43 @@ export default {
|
|||
// };
|
||||
this.mediaRecorder.start();
|
||||
} catch (err) {
|
||||
console.error('Error accessing media devices.', err);
|
||||
console.error("Error accessing media devices.", err);
|
||||
}
|
||||
},
|
||||
issues() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告：用户出现异常！',
|
||||
type: 'error',
|
||||
duration: 0
|
||||
message: "警告：用户出现异常！",
|
||||
type: "error",
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
alarmSound() {
|
||||
console.log("警报声");
|
||||
var audio = new Audio();
|
||||
audio.src = require('../image/警报声.mp3');
|
||||
audio.src = require("../image/警报声.mp3");
|
||||
audio.play();
|
||||
},
|
||||
async solve() {
|
||||
setTimeout(() => {
|
||||
this.isShow = false;
|
||||
this.color = "red";
|
||||
}, 5000 * 12);
|
||||
},
|
||||
Alert() {
|
||||
this.$message({
|
||||
message: '已发送警报！',
|
||||
type: 'success'
|
||||
message: "已发送警报！",
|
||||
type: "success",
|
||||
});
|
||||
this.alarmSound();
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this.webSocketInit();
|
||||
await this.getVideoDevices();
|
||||
await this.startRecording();
|
||||
this.issues();
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 设置背景图片
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<template>
|
||||
<div class="outer">
|
||||
<Alarm :size="50">!</Alarm>
|
||||
<div style="padding: 20px;">
|
||||
|
||||
<Alarm v-if="isShow" :size="50" :backgroudColor="color">!</Alarm>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="video">
|
||||
<video ref="video" autoplay></video>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div></div>
|
||||
<!-- <img src="../image/感叹号.png" alt="error" class="alarmOn" /> -->
|
||||
|
||||
<!-- <button @click="startRecording">开始录像</button>
|
||||
|
|
@ -16,37 +19,114 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Alarm from '@/element/Alarm.vue';
|
||||
import Alarm from "@/element/Alarm.vue";
|
||||
export default {
|
||||
name: 'User',
|
||||
name: "User",
|
||||
data() {
|
||||
return {
|
||||
mediaRecorder: null,
|
||||
recordedChunks: [],
|
||||
videoDevices: [],
|
||||
selectedDeviceId: null,
|
||||
isShow: false,
|
||||
color: "red",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Alarm,
|
||||
},
|
||||
async mounted() {
|
||||
this.webSocketInit();
|
||||
await this.getVideoDevices();
|
||||
await this.startRecording();
|
||||
},
|
||||
methods: {
|
||||
issues() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "警告：用户出现异常！",
|
||||
type: "error",
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
alarmSound() {
|
||||
var audio = new Audio();
|
||||
audio.src = require("../image/警报声.mp3");
|
||||
audio.play();
|
||||
},
|
||||
webSocketInit() {
|
||||
const that = this;
|
||||
if (typeof WebSocket === undefined) {
|
||||
console.log("您的浏览器不支持WebSocket");
|
||||
} else {
|
||||
console.log("您的浏览器支持WebSocket");
|
||||
let socketUrl = "ws://localhost:8081/danger/get";
|
||||
let socket;
|
||||
|
||||
if (socket != null) {
|
||||
socket.close();
|
||||
socket = null;
|
||||
}
|
||||
|
||||
socket = new WebSocket(socketUrl);
|
||||
socket.onopen = function () {
|
||||
console.log("websocket已打开");
|
||||
};
|
||||
socket.onmessage = function (message) {
|
||||
console.log(message.data);
|
||||
if (message.data == "二级") {
|
||||
that.isShow = true;
|
||||
that.color = "#CCCC00";
|
||||
that.issues();
|
||||
that.solve();
|
||||
} else if (message.data == "三级") {
|
||||
that.isShow = true;
|
||||
that.color = "red";
|
||||
//延时执行
|
||||
setTimeout(() => {
|
||||
that.alarmSound();
|
||||
}, 500);
|
||||
that.issues();
|
||||
|
||||
}
|
||||
|
||||
socket.onerror = function () {
|
||||
console.log("websocket发生了错误");
|
||||
};
|
||||
socket.onclose = function () {
|
||||
console.log("websocket已关闭");
|
||||
};
|
||||
};
|
||||
}
|
||||
},
|
||||
async solve(){
|
||||
setTimeout(() => {
|
||||
this.isShow = false;
|
||||
this.color = "red";
|
||||
}, 5000*12);
|
||||
},
|
||||
async getVideoDevices() {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||
this.videoDevices = devices.filter(device => device.kind === 'videoinput');
|
||||
this.videoDevices = devices.filter(
|
||||
(device) => device.kind === "videoinput"
|
||||
);
|
||||
if (this.videoDevices.length > 0) {
|
||||
this.selectedDeviceId = this.videoDevices.find(device=>device.label.includes('usb'));
|
||||
this.selectedDeviceId =
|
||||
this.videoDevices.find((device) => device.label.includes("usb")) !==
|
||||
null
|
||||
? this.videoDevices.find((device) => device.label.includes("usb"))
|
||||
: this.videoDevices[0].deviceId;
|
||||
}
|
||||
console.log(this.selectedDeviceId);
|
||||
},
|
||||
async startRecording() {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { deviceId: this.selectedDeviceId ? { exact: this.selectedDeviceId } : undefined }
|
||||
video: {
|
||||
deviceId: this.selectedDeviceId
|
||||
? { exact: this.selectedDeviceId }
|
||||
: undefined,
|
||||
},
|
||||
});
|
||||
this.$refs.video.srcObject = stream;
|
||||
|
||||
|
|
@ -58,7 +138,7 @@ export default {
|
|||
// };
|
||||
this.mediaRecorder.start();
|
||||
} catch (err) {
|
||||
console.error('Error accessing media devices.', err);
|
||||
console.error("Error accessing media devices.", err);
|
||||
}
|
||||
},
|
||||
// stopRecording() {
|
||||
|
|
@ -73,7 +153,7 @@ export default {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
background-image: url('../image/back.png');
|
||||
background-image: url("../image/back.png");
|
||||
display: flex;
|
||||
.video {
|
||||
width: 100%;
|
||||
|
|
@ -81,14 +161,10 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue