远程监控web开发
第一步：搭建BOA 嵌入式web services
参考：http://blog.chinaunix.net/uid-26921272-id-3322975.html
一：移植Boa(web服务器)到嵌入式Linux系统
一、Boa程序的移植
1、下载Boa源码
下载地址: http://www.boa.org/
目前最新发行版本： 0.94.13 （几年没更新版本了）
下载 boa-0.94.13.tar.gz，
注意：若从boa上下载的是boa-0.94.13.tar.tar，解压方式一样
解压：
2、生成Makefile文件
进入boa-0.94.13，直接运行src/configure文件
|
[tekkamanninja@Tekkaman-Ninja src]$./configure |
3、修改Makefile文件（注意：必须用cross-2.95.3, 如使用3.4.1、4.1.1等等会出错） 4、交叉编译
|
[tekkamanninja@Tekkaman-Ninja src]$ make |
5、去除调试信息，减小体积。（可选）
|
[tekkamanninja@Tekkaman-Ninja src]$/home/tekkamanninja/working/source/2.95.3/bin/arm-linux-strip boa |
6、将编译好的程序放入根文件系统的/bin目录下。
|
[tekkamanninja@Tekkaman-Ninja src]$ cp boa/home/tekkamanninja/working/nfs/rootfs/bin/ |
二、配置Boa
Boa需要在/etc目录下建立一个boa目录，里面放入Boa的主要配置文件boa.conf。在Boa源码目录下已有一个示例boa.conf，可以在其基础上进行修改。
1、Group的修改
为 Group user（开发板上有的组）
修改 User nobody
为 User boa （user组中的一个成员）
|
[root@~]#adduser -g user boa |
2、ScriptAlias的修改
修改 ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
为 ScriptAlias /cgi-bin/ /var/www/cgi-bin/
这是在设置CGI的目录，你也可以设置成别的目录。比如用户文件夹下的某个目录。
3、ServerName的设置
修改 #ServerName www.your.org.here
为 ServerName www.your.org.here
注意：该项默认为未打开，执行Boa会异常退出，提示“gethostbyname::No such file or directory”,所以必须打开。其它默认设置即可。你也可以设置为你自己想要的名字。比如我设置为：ServerName tekkaman2440
此外，还需要：
将mime.types文件复制/etc目录下，通常可以从linux主机的 /etc目录下直接复制即可。
（以下配置和boa.conf的配置有关）
创建日志文件所在目录/var/log/boa
创建HTML文档的主目录/var/www
创建CGI脚本所在录 /var/www/cgi-bin
|
[tekkamanninja@Tekkaman-Ninja log]$ mkdir -m 777 boa |
三、运行Boa
开发板操作：
[root@~]#boa
如果发现boa没有运行，则可以在开发板的/var/log/boa/error_log文件中找原因。
|
比如端口已被其他程序占用：
或是用户设置错误等等，都可以查到。 |
四、功能测试
静态网页测试
将静态网页存入根文件系统的/var/www目录下（可以将主机 /usr/share/doc/HTML/目录下的index.html、homepage.css和img、stylesheet-images目录复制到/var/www目录下）
我参考《嵌入式Web服务器移植 》的做法如下：
在根文件系统的/var目录下
|
[tekkamanninja@Tekkaman-Ninja var]$ cp /usr/share/doc/HTML/index.html www/ |
直接在浏览器中输入开发板的IP地址（比如我的是http://192.168.1.2） ，出现fedora的欢迎网页。静态HTML调试成功。
CGI功能测试
1、编写HelloworldCGI.c程序
[tekkamanninja@Tekkaman-Ninja source]$ vi helloworldCGI.c
(主程序的程序开头一定要用Tab，而不是空格，不然编译可能不通过)
|
#include<stdio.h> |
2.交叉编译生成CGI程序
|
[tekkamanninja@Tekkaman-Ninja source]$/home/tekkamanninja/working/gcc4.1.1/gcc-4.1.1-glibc-2.3.2/arm-9tdmi-linux-gnu/bin/arm-9tdmi-linux-gnu-gcc-o helloworldCGI helloworldCGI.c |
将helloworldCGI 拷贝至根文件系统的/var/www/cgi-bin/下
|
[tekkamanninja@Tekkaman-Ninja source]$ cp helloworldCGI../nfs/rootfs/var/www/cgi-bin/ |
3.测试
浏览器输入http://192.168.1.2/cgi-bin/helloworldCGI
网页出现 Hello,world. 调试成功！
|
[tekkamanninja@Tekkaman-Ninja src]$ cd ../.. |
|
CC = /home/tekkamanninja/working/source/2.95.3/bin/arm-linux-gcc |
|
[tekkamanninja@Tekkaman-Ninja source]$tar xzf boa-0.94.13.tar.gz |
第二步：下载VLC安装程序；（推荐1.0.3或者是1.0.5版本，比较稳定）
http://download.videolan.org/pub/videolan/vlc/
第三步：安装；（我实在XP上做测试滴，linux下面有测试过。。。）
注意选中Mozilla插件，不然Firefox下就不能使用VLC控件啦（ActiveX插件是IE下的，我就是在IE下测试的）
第四步：页面编码（我也不说废话啦，直接上代码）
参考原文：http://hi.baidu.com/huahua035/item/4bff79d5268ae490260ae7a6（自己添加了一些修改）
---------------------------------------- index.html --------------------------------------------------------------
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点播测试</title> <script type="text/javascript" charset="UTF-8"> var vdUrl = "rtsp://192.168.168.151:554"; // 播放路径（定义为全局变量，给子页面播放控件提供播放路径） function showDialog(type){ vdUrl="rtsp://192.168.168.151:554"; var temp=document.getElementsByName('fileName')[0].value; if(temp==''){ alert('请输入一个有效的网络视频地址...'); return; } vdUrl=temp; eventCode="XXXX"; if(type==1){ var winObj=window.open('./play.html','play', 'height=640, width=740,toolbar=yes, menubar=yes, scrollbars=no, resizable=no,location=no, status=no'); }else if(type==2){ var winObj=window.open('./play.html','play', 'height=640, width=740,toolbar=yes, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); } } </script> </head> <body> <input type="text" name="fileName" style="text-align:center;"> <input type="button" value=" 播 放 " onclick="showDialog(1);"> <br> <span style="color: red;font-weight: bold;font-size: 14px">提示：</span> <span style="color: blue;font-weight: normal;font-size: 14px">请选择本地视频或者输入一个网络视频路径（建议先通过VLC media player播放通过）。</span> </body> </html>
---------------------------------------- play.html --------------------------------------------------------------
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>视频剪辑</title> <script type="text/javascript" charset="UTF-8"> <!-- 屏蔽右键 // document.oncontextmenu=function(e){return false;} //--> var vlc; // VLC对象 var itemId; // 播放列表中播放节目的id var vlcSound; // vlc音量大小（初始化默认为50） var videoLength; // 视频总时长 var then_time; // 播放开始时间(播放开始的日期，看下面实现代码，它是毫秒哦) var isPlaying=0; // 是否播放状态 （0 未播放 1 播放） // 初始化 === 很重要哦，控制程序的入口 function initPlayUrl(){ vlc=document.getElementById("vlc"); // 添加播放地址 //vlc.playlist.add(window.opener.vdUrl); // 播放 // vlc.playlist.play(); // 添加播放地址方式2 -- 推荐用下面的方法控制播放列表 var vedio_url=window.opener.vdUrl; itemId= vlc.playlist.add(vedio_url); vlc.playlist.playItem(itemId); // 获取VLC当前音量 vlcSound=vlc.audio.volume; // 设置VLC音量值 document.getElementById("vlc_sound").value=vlcSound; // 播放按钮不可用 document.getElementById("play_button").disabled=true; // 检查播放节目的状态 -- 注意这个是延时操作哦（setTimeout以毫秒为单位，这里延时0.5秒） setTimeout(checkVedioStatus,500); } // 检查播放节目的状态 function checkVedioStatus(){ if(vlc.input.state>2 && vlc.input.state<5){ isPlaying=1; // vlc.input.time 当前播放时长，单位毫秒 // vlc.input.length 节目总时长，单位毫秒 videoLength=parseInt(vlc.input.length/1000); var temp_total_time=parseTime(videoLength); // 总时长设置 document.getElementById("vedio_length").value=temp_total_time; // 当前可以输入时间段跳转 document.getElementById("time_change").disabled=false; // 获得当前系统时间 then_time=new Date().getTime(); // 计算当前播放时间点 checkTime(); }else{ // 如果不是播放状态就在延时执行 setTimeout(checkVedioStatus,500); } } // 实时检测系统时间，计算视频的播放时长（典型的秒表功能） function checkTime(){ if(isPlaying==1){ setTimeout("checkTime();",50); var temp_time=parseInt((new Date().getTime() - then_time)/1000); document.getElementById("current_video_time").value=parseTime(temp_time); } } // 改变播放地址 function changeNewBeginTime(){ // vlc.input.time 获取当前播放时间（毫秒）/也可重设当前播放时间点 var jumpTime=document.getElementById("change_length").value; if(jumpTime!=""){ if(jumpTime>videoLength){ alert("对不起，输入值大于视频总时长..."); return; } vlc.input.time=jumpTime*1000; then_time=new Date()-jumpTime*1000; } } // 把秒转换为时间格式（HH：mm：ss） function parseTime(numLength){ var h_time=0; var m_time=0; var s_time=0; if(numLength>=60){ m_time=parseInt(numLength/60); s_time=parseInt(numLength%60); }else{ s_time=numLength; } if(m_time>=60){ h_time=parseInt(m_time/60); m_time=parseInt(m_time%60); } if(h_time<10){ h_time="0"+h_time; } if(m_time<10){ m_time="0"+m_time; } if(s_time<10){ s_time="0"+s_time; } return h_time+":"+m_time+":"+s_time; } // 停止播放 function stopPlay(){ vlc.playlist.stop(); isPlaying=0; // 修改播放/停止按钮状态 document.getElementById("play_button").disabled=false; document.getElementById("stop_button").disabled=true; // 修改跳转按钮的状态 document.getElementById("change_length").value=""; document.getElementById("time_change").disabled=true; // 当前视频播放时间点清空 document.getElementById("current_video_time").value=""; } // 重新播放 function repeatPlay(){ vlc.playlist.play(); setTimeout(checkVedioStatus,500); // 修改播放/停止按钮状态 document.getElementById("play_button").disabled=true; document.getElementById("stop_button").disabled=false; } // 静音 function noSound(){ if(vlcSound>0){ vlcSound=0; } vlc.audio.toggleMute(); vlcSound=vlc.audio.volume; document.getElementById("vlc_sound").value=vlcSound; if(vlcSound==0){ // document.getElementById("no_sound").value=" 恢复音量 "; document.getElementById("no_sound").value=" "+"恢复音量"+" "; }else{ // document.getElementById("no_sound").value=" 静 音 "; document.getElementById("no_sound").value=" "+"静"+" "+"音"+" "; } } // 音量加减 function soundChange(nums){ if(nums<0 && vlcSound==0){ alert("音量最小，不能再减少音量...."); return; } vlcSound+=nums; if(vlcSound<=0){ vlcSound=0; document.getElementById("no_sound").value=" "+"恢复音量"+" "; }else{ // 当音量>0的时候，都要把静音的标识打开 document.getElementById("no_sound").value=" "+"静"+" "+"音"+" "; } if(vlcSound>200){ alert("音量最大，不能再增大音量...."); vlcSound=200; } vlc.audio.volume =vlcSound; document.getElementById("vlc_sound").value=vlcSound; } //全屏 function screenFull(){ vlc.video.toggleFullscreen() } </script> </head> <body onload="initPlayUrl()" > <!--[if IE]> <object type='application/x-vlc-plugin' id='vlc' events='True' classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' width="720" height="540"> <param name='mrl' value='' /> <param name='volume' value='50' /> <param name='autoplay' value='false' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> </object> <![endif]--> <!--[if !IE]><!--> <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540"> <param name='mrl' value='' /> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> </object> <!--<![endif]--> <br><br> <input type="button" value=" 播 放 " onclick="repeatPlay();" id="play_button"> <input type="button" value=" 停 止 " onclick="stopPlay();" id="stop_button"> <input type="button" value=" 静 音 " onclick="noSound();" id="no_sound"> <input type="button" value=" 减少音量 " onclick="soundChange(-10);"> <input type="button" value=" 增大音量 " onclick="soundChange(10);"> <input type="button" value=" 全 屏 " onclick="screenFull();"> <font color="red" size="2">音量：</font><input type="text" id="vlc_sound" style="width: 40px;color: blue"> <br> <font color="red" size="2">总时长：</font><input type="text" id="vedio_length" style="width: 65px;color: blue"> <input type="text" id="current_video_time" style="width: 65px;color: blue"> <font color="red" size="2">跳转：</font><input type="text" id="change_length" style="width: 100px;color: blue"> <span style="color: blue;font-weight: normal;font-size: 14px">秒</span> <input type="button" value="确定" id="time_change" disabled="disabled" onclick="changeNewBeginTime();"> </body> </html>
第五步：将下面的两个html 文档 copy 到 开发板的 /var/www/目录下，启动 boa
