AI-VUE/src/views/HospitalView.vue

<template>
  <div class="img_bg_camera">
    <el-row :gutter="10" style="padding: 10px; opacity: 0.9">
      <el-col :span="18">
        <el-card style="margin-top: 10px">
          <div v-show="isShow" 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 v-show="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-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import axios from 'a/xios';
import Alarm from "@/element/Alarm.vue";

export default {
  components: {
    Alarm,
  },
  data() {
    return {
      imgif: false,
      videoWidth: 250,
      videoHeight: 250,
      imgSrc: "",
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      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.issues();
            that.isShow = true;
            that.color = "red";
            that.alarmSound();
          }else{
            that.color = "green";
          }

          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"
      );
      if (this.videoDevices.length > 0) {
        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,
          },
        });
        this.$refs.video.srcObject = stream;

        this.mediaRecorder = new MediaRecorder(stream);
        // this.mediaRecorder.ondataavailable = (event) => {
        //   if (event.data.size > 0) {
        //     this.recordedChunks.push(event.data);
        //   }
        // };
        this.mediaRecorder.start();
      } catch (err) {
        console.error("Error accessing media devices.", err);
      }
    },
    issues() {
      this.$message({
        showClose: true,
        message: "警告：用户出现异常！",
        type: "error",
        duration: 0,
      });
    },
    alarmSound() {
      console.log("警报声");
      var audio = new Audio();
      audio.src = require("../image/警报声.mp3");
      audio.play();
    },
    async solve() {
      setTimeout(() => {
        this.isShow = false;
        this.color = "red";
      }, 5000 * 12);
    },
    Alert() {
      this.$message({
        message: "已发送警报！",
        type: "success",
      });
      this.alarmSound();
    },
  },
  async mounted() {
    this.webSocketInit();
    await this.getVideoDevices();
    await this.startRecording();
  },
};
</script>
<style lang="less" scoped>
// 设置背景图片
.img_bg_camera {
  background-image: url(../image/back.png);
  background-size: 100% 100%;
  height: 750px;
  width: 100%;
  margin: 0 auto;
  padding-top: 10px;
  text-align: center;
}

.contain {
  height: 90%;
  width: 95%;
  opacity: 0.9;
}
</style>