【进阶四】家庭陪伴小机器人视频功能以及与遥控同步显示

阿莫斯

感谢E络盟提供的助赛基金。
硬件部分
树莓派3USB免驱摄像头，直接接上就可以使用！某宝上特别多，价格还便宜，这部分没什么好讲！

软件部分
操作系统：raspbian jessie
编程语音：Web编程

本项目使用的mjpg-streamer（同步对比了motion,motion视频流比较卡顿）
具体步骤如下：
1.安装依赖包

1. $ sudo apt-get update
   
2. 
   
3. $ sudo apt-get upgrade
   
4. 
   
5. $ sudo apt-get install libjpeg8-dev
   
6. 
   
7. $ sudo apt-get install imagemagick
   
8. 
   
9. $ sudo apt-get install libv4l-dev
   
10. 
    
11. sudo ln -s /usr/include/linux/videodev2.h /usr/include/linux/videodev.h

复制代码

2.下载mjpg-streamer源码以及安装

1. $ wget http://sourceforge.net/code-snapshots/svn/m/mj/mjpg-streamer/code/mjpg-streamer-code-182.zip
   
2. 
   
3. $ unzip mjpg-streamer-code-182.zip
   
4. 
   
5. $ cd mjpg-streamer-code-182
   
6. 
   
7. $ cd mjpg-streamer
   
8. 
   
9. $ make mjpg_streamer input_file.so input_uvc.so output_http.so
   
10. 
    
11. $ sudo cp mjpg_streamer /usr/local/bin
    
12. 
    
13. $ sudo cp output_http.so input_file.so input_uvc.so /usr/local/lib/
    
14. 
    
15. $ sudo cp -R www /usr/local/www
    
16. 
    
17. $ sudo nano ~/.bashrc           (最后一行加：export LD_LIBRARY_PATH=/usr/local/lib/)
    
18. 
    
19. $ source ~/.bashrc
    
20. 
    
21. $ /usr/local/bin/mjpg_streamer -i "input_uvc.so -y -f 5 -r 320x240" -o "output_http.so -w /usr/local/www"

复制代码

（-r后是分辨率参数，-f后面是帧率，请根据您的摄像头参数进行调整）8090可以自己定义在浏览器http://树莓派IP:8080  打开监控界面

3.视频与控制界面融合
如果期望远程遥控小车，这样就要求视频是实时传输的，同时遥控界面与视频界面在一个界面上！但是两者的端口号不同，如何合并呢？
核心思想：用一个iframe 将视频监控页面嵌套的控制页面
该解决思路也是来王恒的博客，大神提供的是motion的视频，前面我们知道motion视频帧是很卡的，且他并未提供源码，在此我补上我的程序！（对比web编程完全不懂的我，这个折腾了一晚上）

1. vim ~/car/piCar/server/pi_car/templates/home.html

复制代码

添加一个模块

1. {% block camera %}
   
2. 
   
3. <div style="width:640px;height:480px;margin:0 auto;">
   
4. <iframe frameborder=0 width=640 height=480 marginheight=0 marginwidth=0 scrolling=no src="http://192.168.1.105:8080/?action=stream">
   
5. </iframe>
   
6. </div>
   
7. 
   
8. {% endblock %}
   

复制代码

程序中的视频流的源来自http://192.168.1.105:8080/?action=stream，这样就可以去掉上图网页中的其他无用信息；

同时完成以下修改

1. vim ~/car/piCar/server/pi_car/templates/layout.html

复制代码

增加一个类块

1. <camera>
   
2.               <div class="stream">
   
3.                               {% block camera %}{% endblock %}
   
4.              </div>
   
5.         </camera>
   

复制代码

这样就将视频流嵌入到控制页面上了！

此时重启设备，运行mjpg_streamer -i "input_uvc.so -y -f 5 -r 640x480" -o "output_http.so -w /usr/local/www"，以后直接访问htpp://树莓派IP：2000即可同时显示两个窗口！

4.mjpg-streamer的自启动
参考上篇文献，修改/etc/rc.local内容！也有其他更多的方法比如编写一个开启启动脚本（shell）；

风之山谷

楼主辛苦了，mjpg-streamer的确是挺好用的一个开源视频服务器项目，简单配置即可实现网页串流~

阿莫斯

风之山谷 发表于 2018-1-3 17:20
楼主辛苦了，mjpg-streamer的确是挺好用的一个开源视频服务器项目，简单配置即可实现网页串流~ ...

确实很方便，体验感也不错！