引航计划智能监控系统笔记1

最新推荐文章于 2023-12-18 13:10:05 发布

Dfuswy

最新推荐文章于 2023-12-18 13:10:05 发布

阅读量248

点赞数

文章标签： javascript 前端 html flask

本文链接：https://blog.csdn.net/dfuswy/article/details/127115354

版权

本文介绍了自制的预防校园暴力智能监控系统的实现过程，包括前端表单设计、摄像头内容展示、Flask后端开发及登录改进。系统通过摄像头抽帧识别危险物，并将信息发送至微信服务号。前端使用HTML、JavaScript，后端采用Flask框架，实现了前后端交互。

摘要由CSDN通过智能技术生成

自制预防校园暴力的智能监控系统

流程梳理
1.输入用户名密码登陆，服务器返回token凭证，进入主界面
2.主界面可以打开摄像头抽帧，并发送给后端
3.后端识别是否有危险物
4.记录危险物信息,发送信息到微信服务号

表单

在这里插入图片描述

表单在网页中主要负责数据采集功能。

表单标签,用于申明表单，定义采集数据的范围
action：表单数据发给哪个服务器

<form action='URL' method='post'>...</form>

表单域
包含文本框，选择框等，用于采集用户的输入。

<input name='name' type='text' placeholder='提示信息'>

表单按钮
有提交按钮，复位按钮和一般按钮

<button type='submit'>

表单练习

<form action="https://search.bilibili.com/all">
  <div>
    <span>哔哩哔哩搜索</span>
    <input type="text" name="keyword" placeholder="输入关键词">
  </div>
  <div>
    <button>搜索登陆</button>
  </div>
</form>

摄像头

把摄像头内容显示到前端页面

video，canvas 标签

video标签定义视频，比如电影片段或其他视频流
几个属性：
scr：要播放视频的url
controls：显示控件，如播放按钮
width，height：尺寸

canvas标签只是图形容器，必须使用脚本来绘制图形。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>调用摄像头</title>
  <style>
    video {
     
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>

<div>
  <button onclick="openCamera()">打开摄像头</button>
  <button