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

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

用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

通过浏览器访问摄像头

原理

  1. 启动一个简单的web服务，并不断获取摄像头数据

  2. 把数据通过HTTP请求发送到web客户端的image元素用于显示

  3. web客户端通过setTimeout不断请求服务器刷新image图像

实现方法

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webcam</title>
</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打开也没有任何兼容问题。

在手机上输入IP地址查看页面。

局域网映射工具

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

  • Ngrok （国内访问比较慢）

  • 花生壳 （虽然慢，但还过得去）

现在可以在任何地方访问我办公室的摄像头了。在微信中打开监控：

视频

https://www.bilibili.com/video/BV1Dv411i7LY/

源码

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

以上是 利用USB摄像头，免费快速搭建浏览器远程监控 的全部内容， 来源链接： utcz.com/z/518211.html

回到顶部