使用flash插件来调用pc的摄像头如何将它嵌入到TML页面中

所属分类: 网页制作 / HTML/Xhtml 阅读数: 136
收藏 0 赞 0 分享
前言

之所以写这篇文章,主要是因为组长给提的一个新的需求——使用浏览器调用电脑的摄像头,来实现即时拍照的功能。在网上查了很多资料,由于这样那样的原因,最终选择了使用flash插件来调用pc的摄像头。当然,这个需求是基于B/S架构的,因此,就在想怎么把它嵌入到前端的HTML页面中。

题外话

当然,这里还没有考虑到封装,主要是先以实现为目的,后续工作再根据业务进行抽象,封装成通用的组件。好了,废话不多说,看重点。

嵌入插件

使用 object 和 embed 标签

代码展示

复制代码
代码如下:

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="490" height="390" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="cam.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="cam.swf" quality="high" bgcolor="#ffffff" width="490" height="390" name="cam" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div></span>

这种方法用到的是 Object 和 Embed 标签,可以看到 object 的很多参数和 embed 里面的很多属性是重复的。浏览器兼容性,有的浏览器支持 object,有的支持 embed,这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法,最大限度的保证了 Flash 的功能,没有兼容性问题。

但现在来看,它还是存在很大问题的。

首先,无法通过验证,由于为了兼容性而嵌入的 embed 标签是不符合 W3C 的规范的。当然,如果你不在乎什么规范不规范,另当别论。

其次,微软由于种种原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在页面中的 ActiveX 有一个虚框,需要用户点击一次才能正常交互。Flash是作为一个 ActiveX 嵌入到网页中的,所以它也会受牵连,只有通过 JS 嵌入 Flash 才能解决这个问题。

再次,没有 Flash 版本检测,如果版本浏览器的flash插件版本不够,或者不能正常显示你的 swf 文件,或者会弹出一个 ActiveX 的确认安装的框——这个框对很多用户来说是很恐怖的。

只使用 object 标签

代码展示

复制代码
代码如下:

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
<object type="application/x-shockwave-flash data="c.swf?path=cam.swf" width="490" height="390">
<param name="cam" value="c.swf?path=cam.swf" />
<img src="defqr.png"
width="550" height="400" alt="" />
</object>
</div></span>

这种方法只用到了 Object 标签,其实也就是 Flash satay。由于没有了 embed 标签,可以通过验证,是标准的嵌入 Flash 的方法,浏览器兼容性也不错,看起来几乎完美,不过还是有问题的。

首先,需要一个 holder swf 来加载你的目标 swf 以保证 IE 中的 stream 能力,如果你需要通过 flashvars 来传参,或者和页面的 JS 交互,会很麻烦。

其次,和第一种方法一样,也会弹出一个ActiveX的提示框,没有版本检测。

再次,一些低版本的浏览器(如低版本的Safari等)不认同这种方式,对它的兼容性不好。

只使用 embed 标签

代码展示

复制代码
代码如下:

<span style="font-family:Microsoft YaHei;"><div style="margin-top:0px;margin-left:-70px;">
<embed id="cam" src="cam.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="450" height="350" name="webcam" align="middle" wmode="transparent" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="width=490&height=390&objid=cameradialog">
</div></span>

这种方法只用到了 Embed 标签,对比效果来说,还是很不错的,浏览器的兼容性也还不错,都是可以加载的。当然,由于 embed 标签是不符合 W3C 的规范的,所以也不推荐使用这种方法。

使用JavaScript嵌入

使用 JS 来加载 Flash 插件,网上已经有很多的方法了,而且也有很多不错的 JS 插件供大家选择。我这里只拿 SWFObject 来简单的介绍一下。

首先,你需要下载一个 SWFObject 插件包,该插件包中包含一个 JS 脚本,这个是你需要引入的脚步文件。还包括两个 html 的例子,大家可以模仿一下。当然,你还可以去 SWFObject 的网站了解一下,网址请点击 这里 。

代码展示

复制代码
代码如下:

<span style="font-family:Microsoft YaHei;"><script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "cam.swf");
</script></span>


复制代码
代码如下:

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="490" height="390">
<param name="movie" value="cam.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="cam.swf" width="490" height="390">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div></span>

效果图
 
结束语
对比这几种方式,我更推荐使用 JS 嵌入的方式来加载 Flash 插件,这种方式不仅能保证实现 Flash 的所有功能,同时在各浏览器的兼容性方面也都表现不错,并且 JS 还可以提供更多的扩展功能,更主要是可以被更多的人复用,减少不必要的冗余代码。

插件下载地址:SWFObject
更多精彩内容其他人还在看

XHTML入门学习教程:XHTML超级链接

超级链接<a>标签 毫不夸张的说,是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源,例如另外一个网页、一张图片、一首MP3歌曲等等。而利用XHTML建立超级链接的语法却非常简单,只需要一对<a></a>标签即可:
收藏 0 赞 0 分享

网页制作解惑:图象文件的路径

本文属于网页教学网闪电儿原创,转载可以去掉这句话,但是不要以任何借口或方式更改文章的内容,否则后果自负!转载请注明作者和出处。 很久以前一直到现在,有好多网友问过我类似的问题,尤其是拷贝了本站的一些图形图像特效代码后,总是图片显示不出来等问题出现,在这
收藏 0 赞 0 分享

HTML教程,简单学习HTML语言

1、<body background=图片文件名 bgcolor=颜色 text=颜色 link=颜色 vlink=颜色 alink=颜色>...</body>标记属性: background:设置网页的背景图像。bgcolor:设置网页的背景颜色。
收藏 0 赞 0 分享

HTML基础:HTML的基本结构

HTML的基本结构   超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。 <HTML>    <HEAD>       头 部 信 息    </HEAD>
收藏 0 赞 0 分享

HTML教程,认识optgroup元素

select的分类选择,经测试IE和FF都能很好的支持该元素 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S
收藏 0 赞 0 分享

网页输入框的样式触发效果

  这个例子主要学习两个参数onblur和onFocus.因为这两个参数以前很少遇到,baidu 一下明白了,onblur 是控件在失去焦点的时候触发的事件,而onFocus就是成为输入焦点的时候触发的事件,这两个参数都可以和className结合直接调用样式表类名
收藏 0 赞 0 分享

HTML教程,HTML默认样式

html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4,
收藏 0 赞 0 分享

超链接打开目标(target)的测试

链接的target属性决定了链接在哪边打开,它的值通常为以下五种:_blank、_self、_parent、_top和自定义,依次表示为:新窗口、当前窗口、父窗口、顶层窗口和框架。当所指名称的框架不存在时,自定义作用等同于_blank。今天我们主要测试一下当所指名称的框架处于不同
收藏 0 赞 0 分享

HTML优化加快网页速度

明显HTML,暗渡“公用脚本” 减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下
收藏 0 赞 0 分享

XHTML教程,简单认识XHTML基础知识

  本文简单让大家认识一下XHTML,了解XHTML的基础知识 什么是XHTML   XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XM
收藏 0 赞 0 分享
查看更多