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

最新推荐文章于 2023-02-18 22:58:17 发布

weixin_39864453

最新推荐文章于 2023-02-18 22:58:17 发布

阅读量342

点赞数

文章标签： opencv打开摄像头 opencv打开摄像头识别数字浏览器只能获取一个摄像头

用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

<br> (二维码自动识别)

通过浏览器访问摄像头

原理

启动一个简单的web服务，并不断获取摄像头数据
把数据通过HTTP请求发送到web客户端的image元素用于显示
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地址查看页面。

<br> (二维码自动识别)

局域网映射工具

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

Ngrok （国内访问比较慢）
花生壳（虽然慢，但还过得去）

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

视频

知乎视频www.zhihu.com

源码

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

weixin_39864453

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫