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

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 -/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="&nbsp;播&nbsp;&nbsp;放&nbsp;" 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.οncοntextmenu=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="&nbsp;恢复音量&nbsp;";
  document.getElementById("no_sound").value=" "+"恢复音量"+" ";
 }else{
  // document.getElementById("no_sound").value="&nbsp;静&nbsp;&nbsp;&nbsp;&nbsp;音&nbsp;";
  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="&nbsp;播&nbsp;&nbsp;&nbsp;&nbsp;放&nbsp;"  onclick="repeatPlay();" id="play_button">&nbsp;&nbsp;
<input type="button" value="&nbsp;停&nbsp;&nbsp;&nbsp;&nbsp;止&nbsp;"  onclick="stopPlay();" id="stop_button">&nbsp;&nbsp;
<input type="button" value="&nbsp;静&nbsp;&nbsp;&nbsp;&nbsp;音&nbsp;"  onclick="noSound();" id="no_sound">&nbsp;&nbsp;
<input type="button" value="&nbsp;减少音量&nbsp;"  onclick="soundChange(-10);">&nbsp;&nbsp;
<input type="button" value="&nbsp;增大音量&nbsp;"  onclick="soundChange(10);">&nbsp;&nbsp;
<input type="button" value="&nbsp;全&nbsp;&nbsp;&nbsp;&nbsp;屏&nbsp;"  onclick="screenFull();">
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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">&nbsp;
<input type="text" id="current_video_time" style="width: 65px;color: blue">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;
<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

  • 0
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值