在web端实现基于yolov7的实时目标检测

---

前言

本篇文章将介绍如何在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的实时目标检测的服务，以及如何进行手机端的调试。希望对大家有用。