未加星标

打造树莓派HTML5实时监控

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

硬件准备,既然是树莓派实时监控,当然需要一个树莓派和一个摄像头。

树莓派不多说了,我习惯是原装的 Raspbian 系统。

摄像头可以用树莓派原装摄像头,不过经济的解决方案是USB摄像头,linux内核真的很强大,摄像头的驱动基本都能识别,实时监控因为网络带宽对像素质量要求不高,咸鱼上十几块软妹币就能解决问题。

树莓派插好摄像头,判断树莓派是否正确识别摄像头。

lsusb 一行显示 webcamera


打造树莓派HTML5实时监控

在 /dev 目录下寻找 vedio 设备


打造树莓派HTML5实时监控

找到/dev/vedio后说明摄像头已经驱动好了。还有一点,关于树莓派供电问题,最好输入线是2.5A的,否则外加摄像头会引起供电不足,解决办法是换充电头或摄像头外接USB供电(像那种USB线)。

使用motion 可以直接采用 motion
motion 用起来十分简单,安装和配置到运行花不了几分钟。

sudo apt install motion

配置 motion

修改 /etc/default/motion

start_motion_daemon=yes

motion 启动完成后,会占用树莓派的 8081 端口。


打造树莓派HTML5实时监控

打开浏览器输入 https://树莓派IP:8081即可看到实时监控。同样使用VLC视频播放器也可以播放。


打造树莓派HTML5实时监控

不过在手机上就没那么好使了,除了 chrome 以外,像QQ内置浏览器就一直在加载。

接触过在线视频技术的同学应该知道这种实时播放采用的是 RTSP 协议,一些精简过内核的 html5 浏览器并不支持直接播放。

html5实时监控

网上已经有在 html5 上播放视频流的 解决方案

原理就是酱紫的

stearm -> ffmpeg -> nodejs -> websocket -> html5

ffmpeg 解码视频流后交给 nodejs , nodejs 会处理视频流并通过 WebSockets 发送浏览器,

ffmpeg

ffmpeg 强大之处可以在维基百科上找到,在这个项目中的作用是重定向视频流。

去 ffmpeg 官网下载好源码,放在树莓派上编译。

wget https://www.ffmpeg.org/releases/ffmpeg-3.2.2.tar.gz tar zxvf ffmpeg-3.2.2.tar.gz cd ffmpeg-3.2.2 ./configure --enable-shared --disable-yasm --prefix=/usr/local/ffmpeg make && make install

由于树莓派编译速度比较慢,大概花了20分钟才完全编译好,不想等的同学可以直接用我编译好的这个。

wget https://coding.net/u/sfantree/p/self_use_OSS/git/raw/master/pi_vedio/ffmpeg_armv7_pi.tgz

注意为了防止找不到路径而报错,解压以后放在 /usr/local/ 目录下运行。安装后运行可能会提示找不到动态链接库,全部链接至 /usr/lib/ 目录下。

ln -s /usr/local/ffmpeg/lib/* /usr/lib/

nodejs

关于树莓派上的 node 版本我还在纠结,下了个 6.2 版本发现 ghost 只支持 4.2 ,而 4.2 版本运行 cpm 会报错,不过这个项目使用 6.2 不会报错。

安装nodejs

nodejs 官网已经提供了 armv7 平台的安装包。

wget https://npm.taobao.org/mirrors/node/v6.2.0/node-v6.2.0-linux-armv7l.tar.gz tar zxvf node-v6.2.0-linux-armv7l.tar.gz mv node-v6.2.0-linux-armv7l /usr/local

将node的bin目录添加至环境变量,方便起见,直接将这句话加到 /etc/profile 里面。

export PATH=$PATH:/usr/local/node-v6.2.0-linux-armv7l/bin

自己 node 一下试试

node -v

下载源码

git clone https://github.com/phoboslab/jsmpeg

stream-server.js 作用就是将视频流转为 websocket 发送给浏览器。

stream-example.html 为测试的网页文件

jsmpg.js 解析服务端发来的 websocket ,渲染后显示在 Canvas 上

stream-example.html 与 jsmpg.js 一起移动到网页根目录,稍后再作修改。

启动后端服务。

node stream-server.js 12333

12333 这里只是防止视频流不被窃取, stream-server.js 后面跟的参数在源码里可以看到。


打造树莓派HTML5实时监控

成功运行会显示这些信息。


打造树莓派HTML5实时监控

stream-server.js 将监听8082端口上的视频流,并使用8084端口websocket与浏览器通信。

接下来启动 ffmpeg ,启动之前最好杀掉占用摄像头的进程,比如 motion

cd /usr/local/ffmpeg/bin sudo ./ffmpeg -s 320x240 -f video4linux2 -i /dev/video0 -f mpeg1video -b 256k -r 24 https://127.0.0.1:8082/12333/320/240

- s 设定分辨率大小, -f 指定格式, -i 指定接口, -b 指定视频流比特率, -r 指定帧率,后面的 url 填上在 stream-server.js 设置好的格式。


打造树莓派HTML5实时监控

修改 stream-example.html , websocket 替换为 stream-server.js 设置的 url 。


打造树莓派HTML5实时监控

注意这里IP的设置,根据你想访问的网络来设置,比如在树莓派本机可以用 127.0.0.1 ,局域网 192.168.x.x ,如果映射到互联网,那么就要填写外网地址。

外网访问

关于内网穿透老生常谈的话题,这里依然使用自建的 Ngrok ,搭建步骤原来写过,改变一下穿透的端口。


打造树莓派HTML5实时监控

其实让 websocket 使用的 8084 端口穿透出去就行,这个网页很符合前后端分离的设计,静态网页拿到 websocket 直接渲染成视频。

使用内网穿透的话,因为中转服务器的带宽存在瓶颈,比如我使用的阿里云学生机只有1M带宽,这时为了节省服务器浏览可以将启动 ffmpeg 的 -b 参数尽量改小一些。

下面是在QQ内置浏览器的效果。


打造树莓派HTML5实时监控

画质烂是因为摄像头的原因,换个好的也许更清晰一点,不过考虑外网访问,这个AV画质很合适。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:打造树莓派HTML5实时监控
本站链接:http://www.codesec.net/view/520172.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(59)