在之前一家公司的时候要做一个app里面有上传头像的功能，当时研究了好久，找到了一篇文章关于h5摄像头以及相册的调用的，所以就解决了这个问题了！！我这里记录一下以便后面有人需要，可以参考一下！！！！
下面是完整的一个HTML页面内容，放在服务器上然后浏览就可以了，只支持Chrome和Safari核的浏览器，QQ浏览器，Chrome，Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。
&!DOCTYPE&HTML
&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&
&&&&&&&&function&setImagePreview()&{&&
&&&&&&&&&&&&var&preview,&img_txt,&localImag,&file_head&=&document.getElementById("file_head"),&&
&&&&&&&&&&&&picture&=&file_head.&&
&&&&&&&&&&&&if&(!picture.match(/.jpg|.gif|.png|.bmp/i))&return&alert("您上传的图片格式不正确，请重新选择！"),&&
&&&&&&&&&&&&!1;&&
&&&&&&&&&&&&if&(preview&=&document.getElementById("preview"),&file_head.files&&&&file_head.files[0])&preview.style.display&=&"block",&&
&&&&&&&&&&&&&&&&preview.style.width&=&"63px",&&
&&&&&&&&&&&&&&&&preview.style.height&=&"63px",&&
&&&&&&&&&&&&&&&&preview.src&=&window.navigator.userAgent.indexOf("Chrome")&
&&&&&&&&&&&&else&{&&
&&&&&&&&&&&&&&&&file_head.select(),&&
&&&&&&&&&&&&&&&&file_head.blur(),&&
&&&&&&&&&&&&&&&&img_txt&=&document.selection.createRange().text,&&
&&&&&&&&&&&&&&&&localImag&=&document.getElementById("localImag"),&&
&&&&&&&&&&&&&&&&localImag.style.width&=&"63px",&&
&&&&&&&&&&&&&&&&localImag.style.height&=&"63px";&&
&&&&&&&&&&&&&&&&try&{&&
&&&&&&&&&&&&&&&&&&&&localImag.style.filter&=&"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",&&
&&&&&&&&&&&&&&&&&&&&localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src&=&img_txt&&
&&&&&&&&&&&&&&&&}&catch(f)&{&&
&&&&&&&&&&&&&&&&&&&&return&alert("您上传的图片格式不正确，请重新选择！"),&&
&&&&&&&&&&&&&&&&&&&&!1&&
&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&preview.style.display&=&"none",&&
&&&&&&&&&&&&&&&&document.selection.empty()&&
&&&&&&&&&&&&}&&
&&&&&&&&&&&&return&document.getElementById("DivUp").style.display&=&"block",&&
&&&&&&&&&&&&!0&&
&&&&&&&&}&&
下面是几个效果图：
Chrome浏览器效果：
QQ浏览器效果：
拍照效果：
参考文献：http://blog.csdn.net/jwzhangjie/article/details/#comments
阅读(...) 评论()这是什么？
这是我将基于网络摄像头的手势识别技术和Hakim El Hattab开发reveal.js融合到一起的研究成果。
我花了很长时间开发和优化调整这个手势识别算法。即使如此，这个算法仍然只有大概80%的准确性。但相信它已经足够让你领略到这种技术的潜力了：
在空中挥一挥手将会切换幻灯片。
两个手上下挥动将会切换到幻灯片的概述页。
后面的幻灯片有提示技巧和常见问题(你也可以使用键盘来控制，或使用reveal.js里内置的控制操作))
(常见问题在下一个幻灯片页)
手势识别算法通过计算你的动作的位置和幅度，当检测到动作的幅度超过一个阀值时，幻灯片将会做出相应的变化。
注意让你的身体保持静止。
你的手最好距离摄像头60-90厘米远。
做手势时手掌张开，手心冲着摄像头。
你需要一个摄像头。没有摄像头是徒劳的。
你需要使用最新的谷歌浏览器。
谷歌浏览器会提示你请求访问摄像头。点击允许。
如果没有出现提示，刷新网页。
如果刷新还不好用，在地址栏输入chrome://flags，开启所有关于WebRTC的选项。重启浏览器。
如果还不好用，那我也不知为什么了。你只能在这个视频上看看别人是怎么玩的了。
REVEAL.JS是什么？
一个很简单的框架，用来开发漂亮的HTML幻灯片
-作者Hakim El Hattab
(下面是详细介绍)
REVEAL.JS是一个幻灯片开发工具
它很像Prezi或微软的Powerpoint，但却是用HTML5做成的。
因为用了HTML5，才会有Reveal的速度，外观，和
很酷的3D动画
胜过Prezi！ (Prezi使用的是Flash)
不同的效果。
除了往左，往右翻页外，
你还可以往
如果你按Esc键，还可以看到一个总览页。
什么是WebRTC？
它是一个从页面上获取你的摄像头和麦克风数据的开发标准。
只要提供一个视频输入设备，你就可以通过JavaScript来展示、修改、提取它捕获的信息。
为什么需要使用谷歌浏览器？往下看你将会明白。
谷歌浏览器对Javascript支持的很好
谷歌浏览器使用了极速的
V8 Javascript 引擎。
不是一般的快。我在多个浏览器上运行三连游戏算法(Tic-tac-toe)，下面是V8引擎的如何胜出的：
谷歌浏览器：199 ms
火狐浏览器：241 ms
Opera浏览器：439 ms
IE： &16000 ms
我的开发过程
使用Reveal.js，你可以做出漂亮的幻灯片和精彩的3D动画...
使用WebRTC，你可以获得用户通过摄像头输入的信息...
利用一些业余时间，我编写了信号分析的JS(得到正确的算法让我花费了不少时间)。
我相信这将是未来的趋势。
什么是Kinect？
Kinect使用的是3D传感器，大概要100美元。
这里使用的是网络摄像头，现在的笔记本上都有内置。便宜的仅20美元。
当然，使用网络摄像头还是有些限制的。
网络摄像头
网络摄像头无法检测到景深。
因为网络摄像头捕获的只是一个照片图像，没有更多的信息，相比起3D扫描器，功能要弱很多。
信息的缺乏迫使开发人员必须跳出固有的思维模式，寻求通过算法来从这些没有景深的数据中分析出发生了什么。
不用触摸电脑也能控制它！
电脑能区分不同的手势！
有了这些，谁还需要触摸屏？
Fork me on Github!&
My site is at&---WebCam网络摄像头11 http协议
看一下httpd.c中关于http协议的部分关于http协议的知识 refer to http://www.cnblogs.com/li0803/archive//1324746.html此文按照http请求应答的流程详细讲了如下：HTTP协议详解之URL篇HTTP协议详解之请求篇HTTP协议详解之响应篇很感谢这里也按照他的思路溯源一下mjpg-streamer①HTTP协议详解之URL篇格式
http://host[":"port][abs_path]
比如http//192.168.1.230:8080
http//192.168.1.230:8080/subdirectory②HTTP协议详解之请求篇http请求由三部分组成，分别是：请求行、消息报头、请求正文请求行以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本，
格式如下：Method Request-URI HTTP-Version CRLF
Method表示请求方法；
Request-URI是一个统一资源标识符；
HTTP-Version表示请求的HTTP协议版本；
CRLF表示回车\r和换行\n（除了作为结尾的CRLF外，不允许出现单独的CR或LF字符）。
比如GET /?action=snapshot HTTP/1.1\r\n
&--http://192.168.1.230:8080/?action=snapshot
GET /?action=stream HTTP/1.1\r\n
&--http://192.168.1.230:8080/?action=streamGET /index.html
HTTP/1.1\r\n
&--http://192.168.1.230:8080/index.html我们只需在浏览器中输入如 http://192.168.1.230:8080/?action=snapshot，浏览器自动会将其解释为请求行GET /?action=snapshot HTTP/1.1\r\n，然后发给web服务器，web服务器在收到的字符串中查找子串GET
/?action=snapshot，如果找到就发送snapshot，比如在httpd.c的client_thread()函数里面有一行
/* determine what to deliver */
if ( strstr(buffer, "GET /?action=snapshot") != NULL ) {
req.type = A_SNAPSHOT;
消息报头(请求报头)Accept
Accept请求报头域用于指定客户端接受哪些类型的信息。eg：Accept：image/gif，表明客户端希望接受GIF图象格式的资源；Accept：text/html，表明客户端希望接受html文本。
Accept-Charset
Accept-Charset请求报头域用于指定客户端接受的字符集。eg：Accept-Charset:iso-8859-1,gb2312.如果在请求消息中没有设置这个域，缺省是任何字符集都可以接受。
Accept-Encoding
Accept-Encoding请求报头域类似于Accept，但是它是用于指定可接受的内容编码。eg：Accept-Encoding:gzip.deflate.如果请求消息中没有设置这个域服务器假定客户端对各种内容编码都可以接受。
Accept-Language
Accept-Language请求报头域类似于Accept，但是它是用于指定一种自然语言。eg：Accept-Language:zh-cn.如果请求消息中没有设置这个报头域，服务器假定客户端对各种语言都可以接受。
Authorization
Authorization请求报头域主要用于证明客户端有权查看某个资源。当浏览器访问一个页面时，如果收到服务器的响应代码为401（未授权），可以发送一个包含Authorization请求报头域的请求，要求服务器对其进行验证。
Host（发送请求时，该报头域是必需的）
Host请求报头域主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的，eg：
我们在浏览器中输入：浏览器发送的请求消息中，就会包含Host请求报头域，如下：
Host：此处使用缺省端口号80，若指定了端口号，则变成：Host：:指定端口号
User-Agent
我们上网登陆论坛的时候，往往会看到一些欢迎信息，其中列出了你的操作系统的名称和版本，你所使用的浏览器的名称和版本，这往往让很多人感到很神奇，实际上，服务器应用程序就是从User-Agent这个请求报头域中获取到这些信息。User-Agent请求报头域允许客户端将它的操作系统、浏览器和其它属性告诉服务器。不过，这个报头域不是必需的，如果我们自己编写一个浏览器，不使用User-Agent请求报头域，那么服务器端就无法得知我们的信息了。具体例子见下面测试③HTTP协议详解之响应篇在接收和解释请求消息后，服务器返回一个HTTP响应消息。
HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文(即实体报头+实体正文)1.状态行格式如下：
HTTP-Version Status-Code Reason-Phrase CRLF
HTTP-Version表示服务器HTTP协议的版本；
Status-Code表示服务器发回的响应状态代码；
Reason-Phrase表示状态代码的文本描述。CRLF：除实体主体外所有协议元素的行结束标志。CR回车\r，LF换行\n
HTTP/1.0 200 OK\r\n2..消息报头(响应报头)在httpd.h中定义#define STD_HEADER "Connection: close\r\n" \
"Server: MJPG-Streamer/0.2\r\n" \
"Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
"Pragma: no-cache\r\n" \
"Expires: Mon, 3 Jan :56 GMT\r\n"3.实体报头即mimetype
用于向浏览器说明实体正文的类型 比如"Content-type: image/jpeg\r\n" \实体正文比如jpg格式的图像数据看一下httpd.c在响应浏览器请求时,发送了怎样的状态行 消息报头 实体报头.
先贴出 STD_HEADER
httpd.h#define STD_HEADER "Connection: close\r\n" \
"Server: MJPG-Streamer/0.2\r\n" \
"Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
"Pragma: no-cache\r\n" \
"Expires: Mon, 3 Jan :56 GMT\r\n"1.case A_SNAPSHOT:/******************************************************************************
Description.: Send a complete HTTP response and a single JPG-frame.
Input Value.: fildescriptor fd to send the answer to
Return Value: -
******************************************************************************/
void send_snapshot(int fd) {
unsigned char *frame=NULL;
int frame_size=0;
char buffer[BUFFER_SIZE] = {0};
/* wait for a fresh frame */
pthread_cond_wait(&pglobal-&db_update, &pglobal-&db);
/* read buffer */
frame_size = pglobal-&
/* allocate a buffer for this single frame */
if ( (frame = malloc(frame_size+1)) == NULL ) {
free(frame);
pthread_mutex_unlock( &pglobal-&db );
send_error(fd, 500, "not enough memory");
memcpy(frame, pglobal-&buf, frame_size);
DBG("got frame (size: %d kB)\n", frame_size/1024);
pthread_mutex_unlock( &pglobal-&db );
/* write the response */
sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
STD_HEADER \
//响应报头
"Content-type: image/jpeg\r\n" \
//实体报头，图像
/* send header and image now */
if( write(fd, buffer, strlen(buffer)) & 0 || \
write(fd, frame, frame_size) & 0) {
//实体正文
free(frame);
free(frame);
2.case A_STREAM:/******************************************************************************
Description.: Send a complete HTTP response and a stream of JPG-frames.
Input Value.: fildescriptor fd to send the answer to
Return Value: -
******************************************************************************/
void send_stream(int fd) {
unsigned char *frame=NULL, *tmp=NULL;
int frame_size=0, max_frame_size=0;
char buffer[BUFFER_SIZE] = {0};
DBG("preparing header\n");
sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
STD_HEADER \
//响应报头
"Content-Type: multipart/x-mixed-boundary=" BOUNDARY "\r\n" \
//实体报头,后续还有
"--" BOUNDARY "\r\n");
if ( write(fd, buffer, strlen(buffer)) & 0 ) {
free(frame);
DBG("Headers send, sending stream now\n");
while ( !pglobal-&stop ) {
/* wait for fresh frames */
pthread_cond_wait(&pglobal-&db_update, &pglobal-&db);
/* read buffer */
frame_size = pglobal-&
/* check if framebuffer is large enough, increase it if necessary */
if ( frame_size & max_frame_size ) {
DBG("increasing buffer size to %d\n", frame_size);
max_frame_size = frame_size+TEN_K;
if ( (tmp = realloc(frame, max_frame_size)) == NULL ) {
free(frame);
pthread_mutex_unlock( &pglobal-&db );
send_error(fd, 500, "not enough memory");
memcpy(frame, pglobal-&buf, frame_size);
DBG("got frame (size: %d kB)\n", frame_size/1024);
pthread_mutex_unlock( &pglobal-&db );
* print the individual mimetype and the length
* sending the content-length fixes random stream disruption observed
* with firefox
sprintf(buffer, "Content-Type: image/jpeg\r\n" \
"Content-Length: %d\r\n" \
"\r\n", frame_size);
//实体报头
DBG("sending intemdiate header\n");
if ( write(fd, buffer, strlen(buffer)) & 0 )
DBG("sending frame\n");
if( write(fd, frame, frame_size) & 0 )
//实体正文
DBG("sending boundary\n");
sprintf(buffer, "\r\n--" BOUNDARY "\r\n");
if ( write(fd, buffer, strlen(buffer)) & 0 )
free(frame);
}3.case A_FILE:/******************************************************************************
Description.: Send HTTP header and copy the content of a file. To keep things
simple, just a single folder gets searched for the file. Just
files with known extension and supported mimetype get served.
If no parameter was given, the file "index.html" will be copied.
Input Value.: * fd.......: filedescriptor to send data to
* parameter: string that consists of the filename
* id.......: specifies which server-context is the right one
Return Value: -
******************************************************************************/
void send_file(int id, int fd, char *parameter) {
char buffer[BUFFER_SIZE] = {0};
char *extension, *mimetype=NULL;
config conf = servers[id].
/* in case no parameter was given */
if ( parameter == NULL || strlen(parameter) == 0 )
parameter = "index.html";
/* find file-extension */
if ( (extension = strstr(parameter, ".")) == NULL ) {
send_error(fd, 400, "No file extension found");
/* determine mime-type */
for ( i=0; i & LENGTH_OF(mimetypes); i++ ) {
if ( strcmp(mimetypes[i].dot_extension, extension) == 0 ) {
mimetypes定义在httpd.h，过滤文件的后扩展名
static const struct {
const char *dot_
const char *
} mimetypes[] = {
{ ".html", "text/html" },
"text/html" },
"text/css" },
"text/javascript" },
"text/plain" },
"image/jpeg" },
{ ".jpeg", "image/jpeg" },
"image/png"},
"image/gif" },
"image/x-icon" },
"application/x-shockwave-flash" },
"application/x-shockwave-flash" },
"application/java-archive" }
所以按照这个mimetypes，客户浏览器访问
http://192.168.1.230:8080/test.cgi
时，服务器就会返回下面的404错误
如果加上下面一行,使支持cgi
{ ".cgi", "magnus-internal/cgi" },但实验中,浏览器直接弹出一个保存对话框。。。原因待查。。。
{ ".cgi", "text/html" },输出是乱码
使支持浏览器在线打开pdf
{ ".pdf", "application/pdf" },可以。
各个mimetype(content-type)
http://blog.csdn.net/fanweiwei/article/details/1787747
mimetype = (char *)mimetypes[i].
/* in case of unknown mimetype or extension leave */
if ( mimetype == NULL ) {
send_error(fd, 404, "MIME-TYPE not known");
/* now filename, mimetype and extension are known */
DBG("trying to serve file \"%s\", extension: \"%s\" mime: \"%s\"\n", parameter, extension, mimetype);
/* build the absolute path to the file */
strncat(buffer, conf.www_folder, sizeof(buffer)-1);
strncat(buffer, parameter, sizeof(buffer)-strlen(buffer)-1);
/* try to open that file */
if ( (lfd = open(buffer, O_RDONLY)) & 0 ) {
DBG("file %s not accessible\n", buffer);
send_error(fd, 404, "Could not open file");
DBG("opened file: %s\n", buffer);
/* prepare HTTP header */
sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
"Content-type: %s\r\n" \
STD_HEADER \
//响应报头
"\r\n", mimetype);
//实体报头。可将"Content-type: %s\r\n" 放在STD_HEADER后面。
i = strlen(buffer);
/* first transmit HTTP-header, afterwards transmit content of file */
if ( write(fd, buffer, i) & 0 ) {
//实体正文
close(lfd);
} while ( (i=read(lfd, buffer, sizeof(buffer))) & 0 );
/* close file, job done */
close(lfd);
}以下是 在firefox浏览器中输入
http://192.168.1.230:8080/?action=snapshot
之后抓取的所有相关的包，192.168.1.101(client)&--&192.168.1.230(webserver)
有两个关键的tcp报文--协议是http的
NO 6和NO 21
NO 6就是对应浏览器向webserver请求时发送的数据，包括请求行和请求报头，共计401字节，具体如下
NO 21对应webserver返回的数据的一部分，72字节。和其他9个tcp报文共同组成一个http报文。即图1黑的底色的标记的部分，共计10个tcp报文。
为什么要将一个http的数据分开？又为什么要分成10个？
因为数据链路层的以太网帧的数据部分最大是1500字节，然后再加上14个字节的以太网头部---所以是1514字节--和图1的NO9 11 12 14 15 17 18 20帧的长度对应。
所以在webserver上的http层将数据交给tcp再给ip再给数据链路层时，会将ip层下来的数据分片，每片最大1500+14字节。所以分成了若干个。
然后在客户端接收时,在ip层会将分片的其组装起来然后再交给http层。
图3其实仔细看一下可以知道，状态行和响应报头的数据是在NO 8里面的图4NO9 11 12 14 15 17 18 20 21对应实体正文，即图像数据
看一下图像数据，
NO 9 fa 7b 9b 76 08 90
90 90 90 90 08 00 45 00
.".{.v.. ......E.
05 dc 9d c2 40 00 40 06
12 be c0 a8 01 e6 c0 a8
....@.@. ........
1f 90 05 d7 4b f6
31 0b 3a a2 68 46 50 10
.e....K. 1.:.hFP.
17 85 00 00 ff d8
ff db 00 84 00 10 0b 0c
. ...... ........
c 0a 10 0e 0d 0e 12
11 10 13 18 28 1a 18 16
........ ....(...
31 23 25 1d 28 3a
33 3d 3c 39 33 38 37 40
..1#%.(: 3=&9387@
c 4e 40 44 57 45 37
38 50 6d 51 57 5f 62 67
H\N@DWE7 8PmQW_bg
3e 4d 71 79 70 64
78 5c 65 67 63 01 11 12
hg&Mqypd x\egc...
15 18 2f 1a 1a 2f
63 42 38 42 63 63 63 63
..../../ cB8Bcccc
63 63 63 63 63 63
63 63 63 63 63 63 63 63
cccccccc cccccccc
63 63 63 63 63 63 63 63
63 63 63 63 63 63 63 63
cccccccc cccccccc
63 63 63 63 63 63 63 63
63 63 63 63 63 63 ff c4
cccccccc cccccc..
01 a2 00 00 01 05 01 01
01 01 01 01 00 00 00 00
........ ........
00 00 00 00 01 02 03 04
05 06 07 08 09 0a 0b 01
........ ........
00 03 01 01 01 01 01 01
01 01 01 00 00 00 00 00
........ ........
00 01 02 03 04 05 06 07
08 09 0a 0b 10 00 02 01
........ ........
02 04 03 05 05 04
04 00 00 01 7d 01 02 03
........ ....}...
11 05 12 21 31 41
06 13 51 61 07 22 71 14
.....!1A ..Qa."q.
91 a1 08 23 42 b1
c1 15 52 d1 f0 24 33 62
2....#B. ..R..$3b
09 0a 16 17 18 19
1a 25 26 27 28 29 2a 34
r....... .%&'()*4
37 38 39 3a 43 44
45 46 47 48 49 4a 53 54
56789:CD EFGHIJST
57 58 59 5a 63 64
65 66 67 68 69 6a 73 74
UVWXYZcd efghijst
77 78 79 7a 83 84
85 86 87 88 89 8a 92 93
uvwxyz.. ........
96 97 98 99 9a a2
a3 a4 a5 a6 a7 a8 a9 aa
........ ........
b2 b3 b4 b5 b6 b7 b8 b9
ba c2 c3 c4 c5 c6 c7 c8
........ ........
c9 ca d2 d3 d4 d5 d6 d7
d8 d9 da e1 e2 e3 e4 e5
........ ........
e6 e7 e8 e9 ea f1 f2 f3
f4 f5 f6 f7 f8 f9 fa 11
........ ........
00 02 01 02 04 04 03 04
07 05 04 04 00 01 02 77
........ .......w
00 01 02 03 11 04 05 21
31 06 12 41 51 07 61 71
.......! 1..AQ.aq
13 22 32 81 08 14 42 91
a1 b1 c1 09 23 33 52 f0
."2...B. ....#3R.
15 62 72 d1 0a 16 24 34
e1 25 f1 17 18 19 1a 26
.br...$4 .%.....&
27 28 29 2a 35 36 37 38
39 3a 43 44 45 46 47 48
'()*5678 9:CDEFGH
a 53 54 55 56 57 58
59 5a 63 64 65 66 67 68
IJSTUVWX YZcdefgh
a 73 74 75 76 77 78
79 7a 82 83 84 85 86 87
ijstuvwx yz......
8a 92 93 94 95 96
97 98 99 9a a2 a3 a4 a5
........ ........
a6 a7 a8 a9 aa b2 b3 b4
b5 b6 b7 b8 b9 ba c2 c3
........ ........
c4 c5 c6 c7 c8 c9 ca d2
d3 d4 d5 d6 d7 d8 d9 da
........ ........
e2 e3 e4 e5 e6 e7 e8 e9
ea f2 f3 f4 f5 f6 f7 f8
........ ........
f9 fa ff c0 00 11 08 01
e0 02 80 03 01 21 00 02
........ .....!..
03 11 01 ff da 00
0c 03 01 00 02 11 03 11
........ ........
f 00 ea 68 c5 59 21
40 a0 02 96 80 0c 50 05
.?..h.Y! @.....P.
8c 50 02 62 8c 50
30 c5 18 a0 05 02 8c 52
..P.b.P 0......R
10 b8 a4 c5 00 18 a7 0a
60 38 52 8a 43 16 8c 50
........ `8R.C..P
03 94 52 95 a0 06 11 8a
50 73 54 88 68 8a 58 f2
..R..... PsT.h.X.
2a b0 8b 0f 44 b4 08 32
f4 23 0a 2a 4c 54 22 c5
*...D..2 .#.*LT".
03 8a 4c 53 18 1a 41 40
87 01 52 0a 06 2e 28 a4
..LS..A@ ..R...(.
01 45 30 0a 28 01 28 a4
02 1a 43 40 0d e9 48 68
.E0.(.(. ..C@..Hh
01 a6 b3 dc 6d ba 7f f6
b9 a0 68 92 90 d2 00 c5
....m... ..h.....
02 9a 70 1c 53 10
50 45 00 03 8a 0f 5a 04
4P..p.S. PE....Z.
80 00 29 d8 a6 21
08 a6 1a 43 0a 5a 60 25
.b..)..! ...C.Z`%
14 b8 a4 31 0d 36
80 15 69 d8 a0 03 14 86
%....1.6 ..i.....
d1 56 21 3a d2 d0
08 4a 29 00 e0 29 68 01
...V!:.. .J)..)h.
62 d0 28 10 62 8a
06 18 a5 a4 01 8a 31 40
(.b.(.b. ......1@
45 00 38 0a 5a 00
5a 28 01 ea 29 d4 00 15
.)E.8.Z. Z(..)...
cd 44 57 14 5c 2c 2e 32
39 a6 f9 5c d3 93 ba 12
.DW.\,.2 9..\....
c8 b8 a7 62 a5 6c
50 a0 52 1a 60 34 8a 40
Vd...b.l P.R.`4.@
c2 9c 0e 28 01 c2
8a 00 29 69 00 94 53 00
(....(.. ..)i..S.
a4 34 00 94 94 80 6b 52
01 40 08 45 50 bc 1b 66
.4....kR .@.EP..f
8d bd 4e 28 1a 1c 39 14
94 80 0d 20 a0 02 9c 3a
..N(..9. ... ...:
53 10 52 f6 a0 42 51 40
05 2d 30 0a 70 a0 04 35
S.R..BQ@ .-0.p..5
19 34 02 01 4b 40 08 68
a0 00 52 d2 01 29 b4 0c
.4..K@.h ..R..)..
05 3c 50 02 d3 4d 02 1e
29 6a c4 2e 29 29 00 50
.&P..M.. )j..)).P
28 b0 0b 4b 40 05 14 00
b4 50 30 a5 c5 20 0a 31
(..K@... .P0.. .1
40 0b 46 28 01 71 48 28
01 c2 94 0a 00 5c 52 81
@.F(.qH( .....\R.
e 02 9d 8a 06 28 a3
14 00 9b 69 71 4a c0 14
@.....(. ...iqJ..
b4 c0 5a 42 28 01 29 28
00 a7 0a 00 70 a5 a4 02
..ZB(.)( ....p...
01 05 14 80 29 bd
e9 80 b4 86 90 0c 34 50
R.....). ......4P
a 96 a0 bf bb 0d dd
48 a0 68 62 f4 a5 a4 02
.j...... H.hb....
e 28 01 69 45 31 08
69 45 08 02 96 84 21 28
R.(.iE1. iE....!(
ea 05 30 11 aa 33
48 10 ab 4a 69 80 94 94
....0..3 H..Ji...
4a 28 01 0d 14 00
94 e1 40 0b 4d 34 00 f1
.QJ(.... ..@.M4..
a b6 20 cd 14 80 29
45 00 14 a2 81 8b 8a 28
K.. ...) E......(
8a 43 17 14 62 80
16 93 14 00 b8 a5 02 80
.R.C..b. ........
a c3 14 20 14 53 85
00 3a 94 50 03 85 38 0a
.... .S. .:.P..8.
06 18 a2 80 14 51 8a 00
31 4b 48 02 8c 50 03 68
.....Q.. 1KH..P.h
c5 30 0c 52 e2 90 0a 29
68 00 a4 ed 4c 02 96 90
.0.R...) h...L...
08 68 a0 04 a4 34 00 c6
1c 52 01 40 c4 39 a8 2e
.h...4.. .R.@.9..
13 74 4c 3d a9 02 2b 42
72 8a 7d aa 43 40 0d a2
.tL=..+B r.}.C@..
80 16 80 79 a6 21 69 28
00 a5 ed 40 09 4b 40 85
...y.!i( ...@.K@.
a2 80 10 f4 a6 62 80 42
8a 29 80 94 94 80 51 4b
.....b.B .)....QK
a4 a0 04 a5 14 0c
75 34 d0 21 e2 96 ac 41
@....... u4.!...A
16 8a 00 50 28 e9
40 0b 40 a4 31 68 a0 05
E ...P(. @.@.1h..
00 b4 94 00 a2 96
80 0a 08 e2 80 11 69 e2
........ ......i.
e 02 8a 00 70 a7 0a
00 5a 28 00 14 b4 00 51
.....p.. .Z(....Q
8a 60 21 a4 c5 00
2d 14 00 b4 b4 00 52 50
H..`!... -.....RP
40 09 45 20 12 90
d0 31 29 28 01 2a 29 46
..@.E .. .1)(.*)F
a 4c 0a 10 f1 95 f4
38 a9 73 40 30 a4 c5 00
T.L..... 8.s@0...
a 28 10 50 29 80 b4
94 00 82 9e 28 10 51 da
/j(.P).. ....(.Q.
30 d2 01 05 2d 30
12 8a 00 51 45 00 21 a4
..0...-0 ...QE.!.
a4 30 a5 14 00 b4 50 21
e3 a5 21 aa 10 50 29 80
.0....P! ..!..P).
ea 29 00 52 e2 80 17 14
bd a9 0c 05 28 a0 00 52
.).R.... ....(..R
d0 02 d1 40 0b 4a 28 18
b4 98 a0 43 71 83 52 2d
...@.J(. ...Cq.R-
0c 07 52 e3 34 0c 50 29
69 00 b4 53 01 69 28 01
..R.4.P) i..S.i(.
68 a4 01 45 00 14 62 98
09 8a 5a 00 29 69 00 52
h..E..b. ..Z.)i.R
62 80 16 8a 00 4a 43 40
b....JC@ ..
NO 10 fa 7b 9b 76 08 90
90 90 90 90 08 00 45 00
.".{.v.. ......E.
05 dc 9d c3 40 00 40 06
12 bd c0 a8 01 e6 c0 a8
....@.@. ........
1f 90 05 d7 4b f6
36 bf 3a a2 68 46 50 10
.e....K. 6.:.hFP.
7e cc 00 00 94 00
1a 61 a0 04 a6 b0 c8 e6
. ~..... .a......
90 cc f3 c5 cb 8e c7 91
52 52 01 0d 2d 31 00 a2
........ RR..-1..
d2 8e 69 80 b4 62
80 13 1c d3 a8 42 12 81
....i..b .....B..
21 a0 06 d1 40 c2
8a 62 01 4b 48 02 8a 06
@.!...@. .b.KH...
08 5a 43 d2 80 1d
4a 2a c4 2e 28 a4 00 29
%..ZC... J*..(..)
b4 b4 08 5a 28 18
52 d2 00 14 e1 40 21 68
h....Z(. R....@!h
a0 05 a6 96 c5 08 18 6f
a7 83 9a 01 01 14 ab d2
.......o ........
81 8e 14 e1 40 0b 4b 40
05 14 00 a2 8a 40 14 50
....@.K@ .....@.P
00 29 68 01 29 68 00 a4
a0 05 a4 a0 05 a2 80 13
.)h.)h.. ........
34 50 01 45 00 34 b6 29
68 01 a6 98 68 00 a6 13
4P.E.4.) h...h...
48 65 19 c6 db a5 3e a2
9f d4 52 e8 02 76 a0 1a
He....&. ..R..v..
60 03 ad 19 a1 00 a6 81
c5 02 16 81 4c 00 d2 66
`....... ....L..f
80 0a 5a 04 2d 25 30 1b
45 00 04 52 50 02 0a 75
..Z.-%0. E..RP..u
a 28 00 a2 80 0a 0d
00 3a 8a a1 0a 28 c5 00
.(..... .:...(..
81 8e a0 52 10 52
d0 30 a5 14 00 b4 a2 80
.....R.R .0......
d0 30 c5 31 93 34
08 55 5a 78 14 90 c5 ed
.R.0.1.4 .UZx....
48 bc 53 01 c2 9c 29 00
a2 8a 60 3a 81 40 05 28
H.S...). ..`:.@.(
a4 01 45 00 14 b4 00 94
b4 00 52 01 40 06 29 45
..E..... ..R.@.)E
50 02 62 90 f4 e2
80 11 72 07 27 34 a6 98
..P.b... ..r.'4..
45 20 03 4c 26 80
12 98 69 01 4e f0 60 a3
..E .L&. ..i.N.`.
c 52 0e 94 ba 14 2f
6a 05 31 05 14 00 b4 50
z.R..../ j.1....P
28 a6 02 1a 6e 28
01 45 14 00 ea 29 92 34
!E(...n( .E...).4
d2 50 30 a4 34 02 10 53
85 21 b1 69 28 b0 84 a5
.P0.4..S .!.i(...
14 00 b4 1a 00 5a 2a 84
14 a2 80 0a 5a 43 16 96
.....Z*. ....ZC..
80 0a 28 01 69 45 00 2d
2d 20 14 52 d3 18 b4 50
..(.iE.- - .R...P
21 68 a0 62 8a 46 14 00
a2 9e 29 00 a0 52 e2 98
!h.b.F.. ..)..R..
06 28 a0 05 a3 a5 20 16
8a 00 28 a0 02 8a 00 28
.(.... . ..(....(
a0 02 92 98 0b 45 00 25
18 a0 04 c5 06 90 09 40
.....E.% .......@
a0 00 f4 a6 91 40 c6 9a
6e 29 01 5e f5 37 40 71
.....@.. n).^.7@q
db 9a 89 7a 52 0e 81 4a
29 80 98 a2 80 17 a0 a4
...zR..J ).......
cd 31 0e 06 96 81 01 a6
50 31 69 45 02 14 51 4c
.1...... P1iE..QL
18 da 29 00 86 9b 40 00
a7 0a 01 8b 49 40 09 4a
..)...@. ....I@.J
d4 86 98 0a 0d 14
c4 14 0a 06 38 51 40 05
(....... ....8Q@.
05 14 00 b4 ec 50
01 4a 28 18 b4 a2 81 0b
:......P .J(.....
05 14 0c 5a 0f 4a
10 81 4f 6a 78 a0 62 d2
K@...Z.J ..Ojx.b.
28 a0 05 14 52 00
a2 80 0a 05 00 2d 14 00
..(...R. .....-..
05 14 00 51 40 05
21 a0 02 90 d0 02 66 8a
Q@...Q@. !.....f.
34 d2 01 29 0d 00
47 30 0d 0b 0a a7 11 f9
.%4..).. G0......
90 0e cd 14 c0 5a
4a 04 2f 6a 6d 00 28 a7
.......Z J./jm.(.
8a 60 06 9a 68 01 45 14
08 5a 28 01 28 a6 02 1a
.`..h.E. .Z(.(...
69 14 00 01 4a 29 00 b4
86 80 12 94 50 03 a9 0d
i...J).. ....P...
00 02 96 a8 41 4b 40 c3
34 a2 80 0c 52 8a 40 2d
....AK@. 4...R.@-
14 00 a2 9c 28 01 69 68
18 b4 50 21 45 14 0c 5a
....(.ih ..P!E..Z
51 40 0b 46 28 01 ac 31
cd 28 34 00 f1 4a 29 00
Q@.F(..1 .(4..J).
b4 b9 a6 01 4b 40 09 45
20 0a 05 30 16 8a 40 14
52 d0 02 51 40 05
25 00 14 1a 06 25 21 3e
..R..Q@. %....%!&
4a 31 40 c6 e6 9a
79 a4 02 11 f2 e2 a8 20
..J1@... y......
c1 61 e8 4d 01 d0 93 b5
20 a1 00 b4 94 08 51 49
e9 4e 5a 62 1c 7a
54 7d e8 18 e1 4b 40 85
@..NZb.z T}...K@.
c1 09 45 02 12 92
90 c1 69 68 00 a6 9a 01
....E... ..ih....
e 14 0c 5a 43 40 85
a2 a8 48 5a 5a 06 14 b4
.N..ZC@. ..HZZ...
52 01 45 27 7a 00
78 a5 14 00 b4 a2 80 16
..R.E'z. x.......
c5 a5 14 08 5a 28
18 b4 b4 00 84 71 48 94
.@....Z( .....qH.
69 d4 00 98 a5 c5
00 28 a2 80 0a 31 48 02
..i..... .(...1H.
0b 45 00 25 19 f4
a0 00 0a 28 00 a0 50 00
.@.E.%.. ...(..P.
69 bd e8 00 a3 34 0c 29
09 a0 43 72 29 09 34 00
i....4.) ..Cr).4.
d0 32 69 c1 69 0c 43 54
24 c2 ce e3 b9 39 a0 05
.2i.i.CT $....9..
1d 28 a0 03 b5 14 00 0a
0d 02 01 d2 95 4d 30 63
.(...... .....M0c
fa 8a 66 28 b8 85 51 4a
68 00 14 50 02 51 40 08
..f(..QJ h..P.Q@.
45 14 00 0a 5a 00 43 4d
34 00 82 9c 29 a0 16 9a
E...Z.CM 4...)...
4d 20 16 8a a0 01 4e a0
05 14 b4 80 29 45 00 2d
M ....N. ....)E.-
28 a5 a0 05 14 b4
00 a2 96 81 80 a7 62 80
-.(..... ......b.
d0 02 62 9c 29 00
53 0f 06 98 0f a5 14 00
.R..b.). S.......
ea 28 00 a0 8a 00 00 a7
52 00 a4 a0 02 8a 00 42
.(...... R......B
c0 75 26 69 00 51
40 09 48 45 00 14 0a 06
(..u&i.Q @.HE....
31 39 a0 43 73 49
9a 00 95 17 8c 9a 18 d0
!.19.CsI ........
d5 0b 90 56 e5 5b
fb c2 91 48 51 4b 9a 04
.d...V.[ ...HQK..
a0 18 b4 1e 28 10
0a 4a 00 92 9a 69 80 2f
%(....(. .J...i./
00 5a 5a 04 36 8a
00 51 45 30 12 96 80 12
J(.ZZ.6. .QE0....
00 52 8a 60 2d 31
a9 00 ea 3b 55 00 52 83
.i.R.`-1 ...;U.R.
e 14 a2 90 05 28 a0
07 51 40 0a 29 68 01 45
@.....(. .Q@.)h.E
2d 00 2d 28 a0 61 4e cd
02 0c d2 d0 31 45 14 00
-.-(.aN. ....1E..
53 58 71 40 0a 87 23 14
ea 40 28 e6 96 80 16 8a
SXq@..#. .@(.....
60 26 69 41 a0 02 81 48
02 98 cd 8a 60 22 b6 4d
`&iA...H ....`".M
48 3a 50 02 d1 48 06 96
e7 14 a2 80 0a 69 34 00
H:P..H.. .....i4.
94 66 80 03 4c a0 60 17
34 f5 40 39 34 20 06 3c
.f..L.`. 4.@94 .&
71 4c 3d 28 01 b5 4e fb
84 56 ee 0d 20 43 07 4a
qL=(..N. .V.. C.J
51 cd 03 61 40 34 08 50
69 cd c8 a0 48 68 34 b4
Q..a@4.P i...Hh4.
00 fc f1 4c 26 80 14 74
a2 98 85 02 8a 00 31 49
...L&..t ......1I
c 01 45 30 0a 4a 40
14 d3 40 09 4a 28 18 66
.,.E0.J@ ..@.J(.f
02 d0 2a 84 14 a3
8a 40 38 1a 5a 00 05 38
....*... .@8.Z..8
b3 45 00 28 a5 a0
05 a5 14 00 b4 b4 0c 29
P..E.(.. .......)
16 96 81 85 2e 68
00 cd 14 00 c1 f2 bf b1
E......h ........
a9 48 a0 05 5e 94 b4 00
52 13 40 00 1c d2 d2 00
.H..^... R.@.....
a4 a0 05 a6 95 cd 03 14
20 1d 29 45 00 14 99 a0
c d0 28 01 6a 2c ee
27 1d a8 01 68 a0 02 9a
A..(.j,. '...h...
47 02 9e 4f 14 00
da 42 28 18 d2 2a b5 da
h.G..O.. .B(..*..
e6 16 1d e9 31 ad ca d1
9d c8 0f b5 38 71 40 0e
....1... ....8q@.
14 94 08 3a 1a 77 6a 04
20 14 a6 86 31 45 21 14
08 55 e9 4b 4c 40 3a d1
40 01 a0 50 02 52 50 00
.U.KL@:. @..P.RP.
29 68 01 0d 21 a0 06 d1
40 c2 83 40 85 a2 a8 05
)h..!... @..@....
a6 39 c5 08 01 1e a6 07
.9...... ..
下面是浏览器中输入
http://192.168.1.230:8080/static.html
之后的相关http包static.html 的源码如下&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&
&title&MJPG-streamer&/title&
&meta http-equiv="content-type" content="text/ charset=iso-8859-1" /&
&link rel="stylesheet" href="style.css" type="text/css" /&
&!--[if IE 6]&
&link rel="stylesheet" href="fix.css" type="text/css" /&
&![endif]--&
&div id="sidebar"&
&h1&MJPG-Streamer Demo Pages&/h1&
&h2&a ressource friendly streaming application&/h2&
&div id="menu"&
&a href="index.html"&Home&/a&
&a class="active" href="static.html"&Static&/a&
&a href="stream.html"&Stream&/a&
&a href="java.html"&Java&/a&
&a href="javascript.html"&Javascript&/a&
&a href="videolan.html"&VideoLAN&/a&
&a target="_blank" onClick="window.open(this.href, '_blank','width=400,height=400');" href="control.htm"&Control&/a&
&h3&Version info:&/h3&
&p&v0.1 (Okt 22, 2007)&/p&
&div id="content"&
&h1&Static&/h1&
&h2&A static snapshot&/h2&
&h3&Hints&/h3&
&p&This example shows a static snapshot. It should work with any browser. To see a simple example click &a href="static_simple.html"&here&/a&.&/p&
&h3&Source snippet&/h3&
&p&&pre&&img src="/?action=snapshot" /&&/pre&&/p&
&img src="/?action=snapshot" alt="This is a static snapshot" width="512px" height="384px" /&
&p&(C) The &a href="http://mjpg-streamer.sf.net"&MJPG-streamer team&/a& | Design by &a href="http://andreasviklund.com"&Andreas Viklund&/a&&/p&
根据源码和抓取的包中若干GET方法可以推断整个过程：1.浏览器首先根据地址栏里的/static.html，发送一个GET/static.html HTTP/1.1请求。然后服务器响应，将static,html发出
2.浏览器依次解释static.html的html标记，以便将static.html的内容显示出来。
3.解释到line 7,会发送GET /style.css HTTP/1.1请求。以获取style.css文件。
4.解释到line 44,会发送GET /?action=snapshot请求，以获取图像数据。
没有更多推荐了，