前端实现机器学习落地——检测员工是否不在工位
虽然不知道为什么要做这个。！。感觉像是自己给自己下套一样。
如何实现的
调用摄像头，获得图片，图片本质就是数组，那么我们就把图片这个数组当作逻辑回归的入参传入逻辑回归模型，然后根据先前的经验（我们点开这个网页要先录入几组在工位和不在工位的照片作为入参），然后点击开始检测就好了！
使用方式
先把代码复制下来，直接运行就好，点击开启摄像头，然后点击拍照，然后如果你在照片里就点击我在照片里，不在就点击我不在照片里，大概在照片里有个5张，不在照片里有个五张就好了，然后——开始检测，5s拍张照片，机器判断你不在照片里就会alert
代码
<!doctype html>
<html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
<video id="video" width="50px" height="50px" autoplay="autoplay"></video>
<canvas id="canvas" width="50px" height="50px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>
<button id="snap" onclick="ifIn(0)">我在照片里</button>
<button id="snap" onclick="ifIn(1)">我不照片里</button>
<button id="snap" onclick="ok()">结束</button>
<button id="snap" onclick="auto()">开始检测</button>
<script>
//获得video摄像头区域
let video = document.getElementById("video")
let x = []
let y = []
function getMedia() {
let constraints = {
video: {width: 50, height: 50},
audio: true
};
/*
这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
返回的是一个Promise对象。
如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
*/
let promise = navigator.mediaDevices.getUserMedia(constraints)
promise.then(function (MediaStream) {
video.srcObject = MediaStream
video.play()
}).catch(function (PermissionDeniedError) {
console.log(PermissionDeniedError)
})
}
function auto() {
setInterval(() => {
takePhoto()
ok()
}, 5000)
}
function ifIn(c) {
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext('2d')
let imgData = ctx.getImageData(0, 0, 50, 50)
x.push(imgData.data)
y.push(c)
}
function takePhoto() {
//获得Canvas对象
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext('2d')
ctx.drawImage(video, 0, 0, 50, 50)
}
function ok() {
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext('2d')
let imgData = ctx.getImageData(0, 0, 50, 50)
z = imgData.data
console.log(MySigmod(x,y,z))
if(MySigmod(x,y,z) < 0.5) {
alert('您不在工位了么？')
}
}
const MySigmod = function(x, y, z) {
//sigmod函数
const sigmod = function(z) {
let c = []
for(let i = 0; i < z.length; i++) {
c.push(1/(1+Math.exp(-z[i])))
}
return c
}
//梯度方向
const gradient = function(x, h, y) {
let g = []
for(let j = 0; j < x[0].length; j++) {
let c = 0
for(let i = 0; i < y.length; i++) {
c = c + x[i][j] * (h[i] - y[i])
}
c = c / y.length
g.push(c)
}
return g
}
//逻辑回归过程
function Logistic_Regression(x, y, lr=0.0000001, count=500) {
let w = []
for(let i = 0; i < x[0].length; i++) {
w.push(0)
}
for(let m = 0; m < count; m++) {
let z = []
for(let i = 0; i < x.length; i++) {
let item = 0
for(let j = 0; j < w.length; j++) {
item = item + x[i][j] * w[j]
}
z.push(item)
}
let h = sigmod(z)
let g = gradient(x, h, y)
for(let i = 0; i < w.length; i++) {
w[i] = w[i] - lr * g[i]
}
// l = loss(h, y)
}
return w
}
let w = Logistic_Regression(x,y)
//使用求出的权重系数尽心选择
let p = w[0]
for(let i = 0; i < z.length; i++) {
p = p + z[i] * w[i]
}
p = 1/(1+Math.exp(p))
return p
}
</script>
</body>
</html>
