通过html和cgi实现拍照显示功能
2012-06-27 23:17
597 查看
转自:http://www.embedu.org/Column/Column499.htm
作者:任程明,华清远见嵌入式学院讲师。
1. 编写html网页 :video.html。
网页内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>video</title>
<style type="text/css">
<!--
.STYLE1 {
font-size: xx-large;
font-style: italic;
color: #0033FF;
}
-->
</style>
</head>
<body>
<table width="652" height="163" background="images/h3.png" border="0" align="center">
<tr>
<td><span class="STYLE1">example</span></td>
</tr>
</table><tr>
<div align="center">video</div>
<table width="500" align="center" height="561" border="0">
<tr>
(1)前期移植了mjpg-streamer 来获得视频流。
(2)通过“ http://192.168.1.200:8080/?action=stream”来查看视频流的捕获情况。 <td height="500"><img src="http://192.168.1.200:8080/?action=stream"/></td>
</tr>
<tr>
<td height="55"><form id="form3" name="form3" method="post" action="./cgi-bin/capture.cgi">
<table width="500" border="1" bgcolor="#CCFFFF" bordercolor="#5500FF">
<tr>
<td width="195"><p>
<label></label>
<a href="choose.html">choose /a><br />
</p></td>
<td width="289">
<div align="center">
(3)前期移植了boa服务器。
(4)点击网页上的“单拍”按钮后,调用服务器中的cgi:picture.cgi,对图像数据进行采集。
<input type="submit" name="button3" id="button3" value="picture" /> <a href="cgi-bin/picture.cgi">单拍 </a></div></td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>
2. 用于获取图片的cgi程序:picture.c .
Cgi程序内容如下:
#include <stdio.h>
#include"cgic.h"
#include <string.h>
#include <stdlib.h>
#include <unistd.h>
#include <errno.h>
#include <stddef.h>
#include <sys/stat.h>
#include <dirent.h>
#include <iconv.h>
#include <sys/types.h>
#include <sys/wait.h>
int cgiMain()
{
(1)使用文件系统中的文件夹相应的操作变量:
DIR *dir;
struct dirent *dirp;
(2)cgi程序将相关的网页信息到浏览器中显示:
cgiHeaderContentType("text/html");
fprintf(cgiOut, "<HTML>\n");
fprintf(cgiOut, "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
fprintf(cgiOut, " <html xmlns=\"http://www.w3.org/1999/xhtml\"><head>");
fprintf(cgiOut, "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
fprintf(cgiOut, "<link rel=\"stylesheet\" href=\"../images/style.css\" type=\"text/css\" /> <title>history Picture</title></head>");
fprintf(cgiOut, "<body>");
fprintf(cgiOut, "<H1 align=\"left\">history Picture:<H1>");
(3)编写cgi程序读取文件系统中的图片文件
if((dir = opendir("../pice/")) == NULL)
{
perror("fail to opendir");
return -1;
}
if(dir != NULL)
{
while((dirp = readdir(dir)) != NULL)
{
if(dirp->d_name[0] == '.') continue;
fprintf(cgiOut, "<div align=\"center\">");
fprintf(cgiOut,"%s",dirp->d_name);
fprintf(cgiOut, "</div>");
(4)通过cgi程序显示图片文件到网页:
fprintf(cgiOut, "<div align=\"center\"><img src=\"../pice/%s\" width=\"320\" height=\"240\" />",dirp->d_name);
fprintf(cgiOut, "</div>");
}
}
fprintf(cgiOut, "</BODY></HTML>");
return 0;
}
作者:任程明,华清远见嵌入式学院讲师。
1. 编写html网页 :video.html。
网页内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>video</title>
<style type="text/css">
<!--
.STYLE1 {
font-size: xx-large;
font-style: italic;
color: #0033FF;
}
-->
</style>
</head>
<body>
<table width="652" height="163" background="images/h3.png" border="0" align="center">
<tr>
<td><span class="STYLE1">example</span></td>
</tr>
</table><tr>
<div align="center">video</div>
<table width="500" align="center" height="561" border="0">
<tr>
(1)前期移植了mjpg-streamer 来获得视频流。
(2)通过“ http://192.168.1.200:8080/?action=stream”来查看视频流的捕获情况。 <td height="500"><img src="http://192.168.1.200:8080/?action=stream"/></td>
</tr>
<tr>
<td height="55"><form id="form3" name="form3" method="post" action="./cgi-bin/capture.cgi">
<table width="500" border="1" bgcolor="#CCFFFF" bordercolor="#5500FF">
<tr>
<td width="195"><p>
<label></label>
<a href="choose.html">choose /a><br />
</p></td>
<td width="289">
<div align="center">
(3)前期移植了boa服务器。
(4)点击网页上的“单拍”按钮后,调用服务器中的cgi:picture.cgi,对图像数据进行采集。
<input type="submit" name="button3" id="button3" value="picture" /> <a href="cgi-bin/picture.cgi">单拍 </a></div></td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>
2. 用于获取图片的cgi程序:picture.c .
Cgi程序内容如下:
#include <stdio.h>
#include"cgic.h"
#include <string.h>
#include <stdlib.h>
#include <unistd.h>
#include <errno.h>
#include <stddef.h>
#include <sys/stat.h>
#include <dirent.h>
#include <iconv.h>
#include <sys/types.h>
#include <sys/wait.h>
int cgiMain()
{
(1)使用文件系统中的文件夹相应的操作变量:
DIR *dir;
struct dirent *dirp;
(2)cgi程序将相关的网页信息到浏览器中显示:
cgiHeaderContentType("text/html");
fprintf(cgiOut, "<HTML>\n");
fprintf(cgiOut, "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
fprintf(cgiOut, " <html xmlns=\"http://www.w3.org/1999/xhtml\"><head>");
fprintf(cgiOut, "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
fprintf(cgiOut, "<link rel=\"stylesheet\" href=\"../images/style.css\" type=\"text/css\" /> <title>history Picture</title></head>");
fprintf(cgiOut, "<body>");
fprintf(cgiOut, "<H1 align=\"left\">history Picture:<H1>");
(3)编写cgi程序读取文件系统中的图片文件
if((dir = opendir("../pice/")) == NULL)
{
perror("fail to opendir");
return -1;
}
if(dir != NULL)
{
while((dirp = readdir(dir)) != NULL)
{
if(dirp->d_name[0] == '.') continue;
fprintf(cgiOut, "<div align=\"center\">");
fprintf(cgiOut,"%s",dirp->d_name);
fprintf(cgiOut, "</div>");
(4)通过cgi程序显示图片文件到网页:
fprintf(cgiOut, "<div align=\"center\"><img src=\"../pice/%s\" width=\"320\" height=\"240\" />",dirp->d_name);
fprintf(cgiOut, "</div>");
}
}
fprintf(cgiOut, "</BODY></HTML>");
return 0;
}
相关文章推荐
- 通过html和cgi实现拍照显示功能
- 通过html和cgi实现拍照显示功能
- 通过html和cgi实现拍照显示功能
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能 activeandbadboy [原作]
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
- 写一个HTML页面,实现以下功能,左键点击页面时显示“您好”,右键点击时显示“禁止右键”。并在2秒钟后自动关闭页面
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- JavaScript + jQuery + HTML 实现<input>提示信息的显示、隐藏,功能与jQuery EasyUI的easyui-textbox的prompt属性相同。
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能
- JAVA语言实现大量信息的分页显示功能及对象反射(通过参数找到对应的函数)
- 使用Qt通过cgi导入文件并显示在页面上并做类似Action功能的跳转
- html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载
- HTML5+Canvas调用手机拍照功能实现图片上传(上)
- 通过HTML5的getUserMedia实现拍照功能
- Android实现将控件等View转化为Bitmap对象,通过ImageView显示的功能
- 通过对PHP语言的学习,应该知道它是基于函数的一款HTML脚本语言。庞大的函数库支持着PHP语言功能的实现。下面我们为大家介绍有关PHP函数isset()与empty()的相关用法。
- html/css实现阴影蒙版覆盖原网页并显示浮框的功能