Stream摄像头内容到浏览器

2018/5/11 posted in  engineering

需求: 将网络摄像头的流截取下来,进行处理如人脸识别等以后,重新发布到浏览器中直接通过浏览器访问。

本文采用了一个简单的容易实现的方案,使用java语言springboot 框架实现,其它语言应该也是类似。示例代码webcamera-stream-demo


1. 实现思路

使用websocket,客户端和服务器端建立一个长连接,服务器端以固定时间间隔发送一帧(一帧图片的jpeg的base64编码)给前端通过<img>展示。具体流程:

  1. 通过opencv 读取摄像头的RTSP视频流。RTSP协议被大多数网络摄像头支持,摄像头的RTSP流的url可以搜索一下各主流摄像头的rtsp地址格式
  2. 对读取的帧进行想要的操作
  3. 通过websocket发布操作后的帧

2. 具体实现

  • PreviewController.java greeting()方法会每隔50ms(20fps)调用一次,每次将最新的一帧发布出去
  • Camera.java 创建一个后台进程不断读取摄像头的视频流
  • resources/static/index.html(app.js) 客户端订阅socket接收帧,每接收到一帧就更新一次图片,20fps可以达到流畅的视频效果。