自制预防校园暴力的智能监控系统
流程梳理
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