前言
本篇文章将介绍如何在web端实现基于yolov7的实时目标检测任务。内容主要包括1)项目的介绍,2)https服务的构建,3)手机端的调试。
一、项目介绍
本项目是由yolov7-node和yolov7-onnxruntime-web整合而来。两者使用的推理框架都是onnx,区别在于前者做了视频检测,(根据作者所说)出于性能考虑,将推理部分放在了node端,而后者只检测图片,整个服务都放到了web端。想要实现web端视频检测,只需要将yolov7-onnxruntime-web中的detectImage方法替换成yolov7-node中的detect方法,并进行简单的代码适配即可。
二、https服务构建
1.build
使用yarn build可以进行react打包,方便后面http-server启动http或https服务。但是实际启动服务时会发现找不到相应的文件,也就是文件路径不对,所以需要做一些改动,具体步骤如下:
- 并将App.js中模型路径改成 “/static/${modelName}”
- yarn build执行打包
- 将build文件夹下的index.html文件中所有路径的"yolov7-onnxruntime-web/"都去掉
- 使用http-server启动服务,具体会在下面讲解。
2.http服务
- 进入build文件夹
cd build
- 启动http服务
npx http-server -c-l
这样正常情况下就已经启动了http服务,浏览器中会自动弹出目标检测服务的页面,我们就可以玩起来了。
3.https服务
http服务有一个缺点,就是在手机端访问本地服务时,没有办法打开手机摄像头,也就没有办法进行实时的目标检测。而https服务是没有这样的问题的,因此就需要将http-server默认的http服务改成https服务。可以参考http-server在本地启动https服务以及配置域名。具体步骤如下:
- 进入build目录
cd build
- git bash中输入以下命令,生成证书文件 cert.pem 和 key.pem
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
- 在同一目录下(这边是build)运行以下命令启动服务,且需要注意参数大小写,指定目录的时候是大写。
npx http-server -S -C cert.pem
成功后效果如下:
三、手机端调试
上面说到http服务没有办法访问手机摄像头,我是怎么发现的呢?是通过手机chrome浏览器usb远程调试之后看到报错发现的。如何调试可以参考该链接。当然此处也对具体步骤做一下记录:
- 手机和chrome浏览器都启用开发者模式
- 将手机用usb连接到电脑上,打开usb调试模式
- 输入网址:chrome://inspect/, 在手机浏览器中打开一个网页,电脑上就会捕获到相应的信息,如下图所示。只要点击【inspect】,就会弹出devtools。
- 注意:devtools可能显示"HTTP/1.1 404 Not Found",这是因为在中国境内访问不了google,需要翻墙。devtools加载成功之后,就能开始调试了,如下图。
总结
本文介绍了如何在web端构建基于yolov7的实时目标检测的服务,以及如何进行手机端的调试。希望对大家有用。