主頁 > 知識庫 > 使用flash插件來調(diào)用pc的攝像頭如何將它嵌入到TML頁面中

使用flash插件來調(diào)用pc的攝像頭如何將它嵌入到TML頁面中

熱門標(biāo)簽:鄒城智能外呼系統(tǒng) 經(jīng)綸電銷機(jī)器人 華為收費(fèi)站地圖標(biāo)注 電話機(jī)器人宣傳片 騰訊植物園地圖標(biāo)注 個貸電銷機(jī)器人 巫山縣地圖標(biāo)注app 外呼智能系統(tǒng)報價 浦東新區(qū)百度地圖標(biāo)注圖片
前言

之所以寫這篇文章,主要是因為組長給提的一個新的需求——使用瀏覽器調(diào)用電腦的攝像頭,來實現(xiàn)即時拍照的功能。在網(wǎng)上查了很多資料,由于這樣那樣的原因,最終選擇了使用flash插件來調(diào)用pc的攝像頭。當(dāng)然,這個需求是基于B/S架構(gòu)的,因此,就在想怎么把它嵌入到前端的HTML頁面中。

題外話

當(dāng)然,這里還沒有考慮到封裝,主要是先以實現(xiàn)為目的,后續(xù)工作再根據(jù)業(yè)務(wù)進(jìn)行抽象,封裝成通用的組件。好了,廢話不多說,看重點。

嵌入插件

使用 object 和 embed 標(biāo)簽

代碼展示

復(fù)制代碼
代碼如下:

<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 標(biāo)簽,可以看到 object 的很多參數(shù)和 embed 里面的很多屬性是重復(fù)的。瀏覽器兼容性,有的瀏覽器支持 object,有的支持 embed,這也是為什么要修改 Flash 的參數(shù)時兩個地方都要改的原因。這種方法是 Macromedia 一直以來的官方方法,最大限度的保證了 Flash 的功能,沒有兼容性問題。

但現(xiàn)在來看,它還是存在很大問題的。

首先,無法通過驗證,由于為了兼容性而嵌入的 embed 標(biāo)簽是不符合 W3C 的規(guī)范的。當(dāng)然,如果你不在乎什么規(guī)范不規(guī)范,另當(dāng)別論。

其次,微軟由于種種原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在頁面中的 ActiveX 有一個虛框,需要用戶點擊一次才能正常交互。Flash是作為一個 ActiveX 嵌入到網(wǎng)頁中的,所以它也會受牽連,只有通過 JS 嵌入 Flash 才能解決這個問題。

再次,沒有 Flash 版本檢測,如果版本瀏覽器的flash插件版本不夠,或者不能正常顯示你的 swf 文件,或者會彈出一個 ActiveX 的確認(rèn)安裝的框——這個框?qū)芏嘤脩魜碚f是很恐怖的。

只使用 object 標(biāo)簽

代碼展示

復(fù)制代碼
代碼如下:

<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 標(biāo)簽,其實也就是 Flash satay。由于沒有了 embed 標(biāo)簽,可以通過驗證,是標(biāo)準(zhǔn)的嵌入 Flash 的方法,瀏覽器兼容性也不錯,看起來幾乎完美,不過還是有問題的。

首先,需要一個 holder swf 來加載你的目標(biāo) swf 以保證 IE 中的 stream 能力,如果你需要通過 flashvars 來傳參,或者和頁面的 JS 交互,會很麻煩。

其次,和第一種方法一樣,也會彈出一個ActiveX的提示框,沒有版本檢測。

再次,一些低版本的瀏覽器(如低版本的Safari等)不認(rèn)同這種方式,對它的兼容性不好。

只使用 embed 標(biāo)簽

代碼展示

復(fù)制代碼
代碼如下:

<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 標(biāo)簽,對比效果來說,還是很不錯的,瀏覽器的兼容性也還不錯,都是可以加載的。當(dāng)然,由于 embed 標(biāo)簽是不符合 W3C 的規(guī)范的,所以也不推薦使用這種方法。

使用JavaScript嵌入

使用 JS 來加載 Flash 插件,網(wǎng)上已經(jīng)有很多的方法了,而且也有很多不錯的 JS 插件供大家選擇。我這里只拿 SWFObject 來簡單的介紹一下。

首先,你需要下載一個 SWFObject 插件包,該插件包中包含一個 JS 腳本,這個是你需要引入的腳步文件。還包括兩個 html 的例子,大家可以模仿一下。當(dāng)然,你還可以去 SWFObject 的網(wǎng)站了解一下,網(wǎng)址請點擊 這里 。

代碼展示

復(fù)制代碼
代碼如下:

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


復(fù)制代碼
代碼如下:

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

效果圖
 
結(jié)束語
對比這幾種方式,我更推薦使用 JS 嵌入的方式來加載 Flash 插件,這種方式不僅能保證實現(xiàn) Flash 的所有功能,同時在各瀏覽器的兼容性方面也都表現(xiàn)不錯,并且 JS 還可以提供更多的擴(kuò)展功能,更主要是可以被更多的人復(fù)用,減少不必要的冗余代碼。

插件下載地址:SWFObject

標(biāo)簽:日喀則 楊凌 那曲 唐山 滁州 南平 廣西 三沙

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用flash插件來調(diào)用pc的攝像頭如何將它嵌入到TML頁面中》,本文關(guān)鍵詞  使用,flash,插件,來,調(diào)用,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用flash插件來調(diào)用pc的攝像頭如何將它嵌入到TML頁面中》相關(guān)的同類信息!
  • 本頁收集關(guān)于使用flash插件來調(diào)用pc的攝像頭如何將它嵌入到TML頁面中的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章