首先介绍一下「远程照相机」-- Remote Camera,在手机上访问的界面如下:
所见即所得,我想要的一个产品,就是专注功能,体验简单。
设计思路
手头所拥有「硬件」有:树莓派(电源等套装均需)、摄像头、路由器、网线和手机(iPhone很赞哦)。这样已经足够了,接下来是如何把这些硬件用起来。
基于自己所擅长的技术,我在树莓派上安装了 NodeJS ,安装过程可以参考《树莓派里安装 NodeJS》。那么,如何让摄像机拍照的话,就让 Linux 下的 fswebcam 来完成。
我想要的功能是--在手机上点一个按钮,就控制树莓派上的摄像头拍一张照片,然后传回手机。为了在手机上更方便地操做,我尝试了下 AngularJS,单页面的应用并且和 NodeJS 进行通讯,很方便。
从界面上,我倾向于简单,本人还是比较懒的,在这里使用 FlatUI 作为页面样式。
借鉴使用
假如你也有个树莓派,心动不如行动,一步一步教你让「树莓派」跑起来。
将USB摄像头接到树莓派(最好是免驱动的),然后查看是否已经存在:
pi@raspberrypi ~ $ ls -l /dev/video0 ##此时会打印出: crw-rw---T+ 1 root video 81, 0 Jan 26 18:59 /dev/video0
安装抓图软件:pi@raspberrypi ~ $ sudo apt-get install fswebcam
安装完NodeJS之后,下载我写的
Remote-Camera
:pi@raspberrypi ~ $ git clone git@github.com:pizn/Remote-Camera.git
初始化及安装必须要的工具
pi@raspberrypi ~ $ make intall
自定义配置
pi@raspberrypi ~ $ cd Remote-Camera ##配置文件是config.js pi@raspberrypi ~/Remote-Camera $ vi config/config.js
这里的配置文件,一定得修改
exports.picturePath
,承上可修改为/home/pi/Remote-Camera/webapp/photo/
。该地址到时候页面访问的时候需要用到。主要的内容如下://端口号 exports.port = 3000; //摄像头驱动 exports.piVedioPath = "/dev/video0"; //照片尺寸 exports.pictureXY = "320*240"; //照片生成地址 exports.picturePath = "/home/pi/tmp/"; ...
配置好了之后,就可以大胆使用了。启动服务:
pi@raspberrypi ~/Remote-Camera $ make server ##此时会打印出下列日志: Server started and listening on port 3000
打开你的手机浏览器,例如iPhone里的Safari,访问树莓派的ip地址+端口号,就能看到上图界面了!
在Safari中打开,还有个功能,就是添加到桌面。一下子变身「高富帅」,成为你手机桌面的一个应用了。
下次,只需要点击「Remote-Camera」的图标,就能远程拍照了。
2014.02.17 更新
Remote Camera 新的版本正式可以用。除了核心的拍摄功能之外,增加的功能和说明如下:
- 权限控制:毕竟是控制自己的树莓派,拍照也有隐私
- 相片管理:树莓派的空间大小有限,实现这个功能,可以在手机上删除树莓派的相片
- IP地址获取:主要是因为使用了路由器里面的虚拟服务器,电信的IP地址却动态变化。定时获取IP地址,可以应付。
- 内存查看:便于查看树莓派的使用情况
除了新增功能之外,还对核心代码进行优化和重构,因此一个简单的 Webapp 应用便跑起来了。
计划和完善
这里的设计,是每拍完一张照片,都会保存起来。拍的越多,占的空间就会越大。由于树莓派硬盘是SD卡,所以还得做个清理功能。另外,此次使用了Bootstrap和FlatUI,严格说,对于这个简单的页面来说,有点浪费,得做「性能优化」。
如果你也很感兴趣,欢迎「Star」或者「Fork」,有问题请提「Issues」:
后话
至于如何让你的手机在3G或者外网的情况下访问到局域网的这个服务,这就是「后话」了。