您的位置：首页 > 运维架构

远程监控web开发-嵌入式boa

2015-07-02 16:47 363 查看

VLC毫无疑问是优秀的一款播放软件，子B/S机构的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 nogroup

为 Group user（开发板上有的组）

修改 User nobody

为 User boa （user组中的一个成员）

根据你的开发板的情况设定。一定要存在的组和用户。

以下是我在开发板上的操作：

[root@~]#adduser -g
user boa

Changing password for boa

Enter the new password (minimum of 5, maximum
of 8 characters)

Please use a combination of upper and lower case letters and numbers.

Enter new password:

Bad password: too short.

Warning: weak password (continuing).

Re-enter new password:

passwd[820]: password for `boa'
changed by user `root'

Password changed.

[root@~]#

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

[tekkamanninja@Tekkaman-Ninja log]$ cd ..

[tekkamanninja@Tekkaman-Ninja var]$ mkdir -m
777 www

[tekkamanninja@Tekkaman-Ninja var]$ mkdir -m
777 www/cgi-bin

[tekkamanninja@Tekkaman-Ninja var]$ cd ..

[tekkamanninja@Tekkaman-Ninja rootfs]$ cp /etc/mime.types
etc/

三、运行Boa

开发板操作：

[root@~]#boa

如果发现boa没有运行，则可以在开发板的/var/log/boa/error_log文件中找原因。

比如端口已被其他程序占用：

[root@~]#cat /var/log/boa/error_log

[20/Feb/2008:21:21:57 +0000] boa.c:194 - unable
to bind: Address already in use

或是用户设置错误等等，都可以查到。

四、功能测试

静态网页测试

将静态网页存入根文件系统的/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/

[tekkamanninja@Tekkaman-Ninja var]$ cp -r /usr/share/doc/HTML/img
www/

[tekkamanninja@Tekkaman-Ninja var]$ cp /usr/share/doc/HTML/homepage.css
www/

[tekkamanninja@Tekkaman-Ninja var]$ cp -r/usr/share/doc/HTML/stylesheet-images
www/

直接在浏览器中输入开发板的IP地址（比如我的是http://192.168.1.2）
，出现fedora的欢迎网页。静态HTML调试成功。

CGI功能测试

1、编写HelloworldCGI.c程序

[tekkamanninja@Tekkaman-Ninja source]$ vi helloworldCGI.c

(主程序的程序开头一定要用Tab，而不是空格，不然编译可能不通过)

#include<stdio.h>

#include<stdlib.h>

int main(void)

{

printf("Content-type:
text/html\n\n");

printf("<html>\n");

printf("<head><title>CGI
Output</title></head>\n");

printf("<body>\n");

printf("<h1>Hello,world.</h1>\n");

printf("<body>\n");

printf("</html>\n");

exit(0);

}

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 ../..

[tekkamanninja@Tekkaman-Ninja source]$ cd ../nfs/rootfs/etc/

[tekkamanninja@Tekkaman-Ninja etc]$ mkdir
boa

[tekkamanninja@Tekkaman-Ninja etc]$ chmod
777 boa/

[tekkamanninja@Tekkaman-Ninja etc]$ cd
boa

[tekkamanninja@Tekkaman-Ninja boa]$ kwrite
boa.conf

CC = /home/tekkamanninja/working/source/2.95.3/bin/arm-linux-gcc

CPP = /home/tekkamanninja/working/source/2.95.3/bin/arm-linux-gcc -E

[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

来源：http://www.cnblogs.com/cslunatic/archive/2013/03/25/2980826.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航