利用USB摄像头,免费快速搭建浏览器远程监控

用OpenCV实现桌面的摄像头程序很简单,把这部分代码集成到一个简单的HTTP server上就可以实现浏览器远程监控。

OpenCV安装

我这里使用了opencv4nodejs:

npm i opencv4nodejs

安装的时间会有点长,需要先下载OpenCV源码再编译。如果发现编译不通过,请阅读错误信息,再检查系统是否安装了需要的工具。

简单的Node.js桌面摄像头应用

创建一个desktop.js文件:

const cv = require('opencv4nodejs');
 
const vCap = new cv.VideoCapture(0);
  
const delay = 10;
while (true) {
  let frame = vCap.read();
  if (frame.empty) {
    vCap.reset();
    frame = vCap.read();
  }
  
  cv.imshow('OpenCV Node.js', frame);
  const key = cv.waitKey(delay); // Press ESC to quit
  if (key == 27) {break;}
}

运行程序:

node desktop.js

利用USB摄像头,免费快速搭建浏览器远程监控_第1张图片

通过浏览器访问摄像头

原理

  1. 启动一个简单的web服务,并不断获取摄像头数据
  2. 把数据通过HTTP请求发送到web客户端的image元素用于显示
  3. web客户端通过setTimeout不断请求服务器刷新image图像

实现方法

创建一个包含image元素的HTML文件:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webcamtitle>
head>

<body>
    
    <img id="image"/>

    <script type="text/javascript">
        var image = document.getElementById('image');
        function refresh() {
            image.src = "/image?" + new Date().getTime();
            image.onload= function(){
                setTimeout(refresh, 30);
            }
        }
        
        refresh();
    script>

body>
html>

然后创建一个web.js文件:

const http = require('http'); 
const cv = require('opencv4nodejs')
const wCap = new cv.VideoCapture(0);
wCap.set(cv.CAP_PROP_FRAME_WIDTH, 640);
wCap.set(cv.CAP_PROP_FRAME_HEIGHT, 480);

var img = null;
function capture() {
    var frame = wCap.read()
    if (frame.empty) {
        wCap.reset();
        frame = wCap.read();
    }

    img = cv.imencode('.jpg', frame);
    setTimeout(capture, 30);
}

capture();

var fs=require("fs");
var html = fs.readFileSync("index.htm", "utf8");

var server = http.createServer(function (req, res) {   
    if (req.url === '/' || req.url === '/index.htm') { 
        
        res.writeHead(200, { 'Content-Type': 'text/html' });   
        res.write(html);
        res.end();
    
    }
    else if (req.url.startsWith("/image")) {
        
        res.writeHead(200, { 'Content-Type': 'image/jpeg' });
        res.write(img);
        res.end();
    
    }
    else
        res.end('Invalid Request!');

});

server.listen(2020);

console.log('Node.js web server is running on port 2020...')

运行web.js:

node web.js

现在可以通过任意浏览器打开localhost:2020,看到视频。因为只用了image元素,所以即使用IE打开也没有任何兼容问题。

利用USB摄像头,免费快速搭建浏览器远程监控_第2张图片
在手机上输入IP地址查看页面。

利用USB摄像头,免费快速搭建浏览器远程监控_第3张图片

局域网映射工具

内网启动服务之后,借助免费的工具把端口映射到公网。以下工具都有免费版,可以生成一个临时的网址。

  • Ngrok (国内访问比较慢)
  • 花生壳 (虽然慢,但还过得去)利用USB摄像头,免费快速搭建浏览器远程监控_第4张图片

现在可以在任何地方访问我办公室的摄像头了。在微信中打开监控:
利用USB摄像头,免费快速搭建浏览器远程监控_第5张图片

视频

用摄像头搭建远程监控。省时,免费。可以通过微信访问。代码在GitHub上。仅供个人娱乐消遣。

源码

https://github.com/yushulx/opencv-webcam

你可能感兴趣的:(利用USB摄像头,免费快速搭建浏览器远程监控)