1. ホーム
  2. Web制作
  3. HTML/Xhtml

フラッシュプラグインを使用してPCカメラを呼び出す方法TMLページに埋め込む方法

2022-01-15 23:52:13
前文
この記事を書いている理由は、主にチームリーダーから与えられた新しい要件、つまり、ブラウザを使ってコンピュータのウェブカメラを呼び出し、即座に写真を撮るという機能を実現するためです。ネットでいろいろな情報を調べた結果、ある理由から最終的にフラッシュプラグインを使って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はダミーボックスを持ち、ユーザーが一度クリックしないと正常に動作しない。フラッシュはActiveXとしてページに埋め込まれているのでそれも関与しており、この問題を解決するにはJS経由でフラッシュを埋め込むしかないのである。
ここでもFlashのバージョン検出は行われず、バージョンブラウザに十分なバージョンのFlashプラグインがない場合や、swfファイルが正しく表示されない場合、ActiveXのインストールを確認するボックスがポップアップする場合など、多くのユーザにとって怖い存在です。
オブジェクトタグのみを使用する
コード表示
コピーコード
コードは以下の通りです。

<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"& gt;
<param name="cam" value="c.swf?path=cam.swf" />
<img src="defqr.png"
width="550" height="400" alt="" />
</object>
</div></span>

この方法は、Objectタグしか使っていませんが、実はFlashのサテです。embedタグがないため検証をパスし、Flashの埋め込み方法としては標準的で、ブラウザの互換性もよく、ほぼ完璧に見えますが、まだ問題があります。
まず、IEでストリーム機能のためにターゲットswfをロードするためにホルダーswfが必要ですが、これはflashvarsを通してパラメータを渡したり、ページのJSと対話する必要がある場合には面倒なことかもしれません。
2つ目は、1つ目の方法と同じく、ActiveXのプロンプトボックスがポップアップし、バージョン検出が行われない方法です。
繰り返しになりますが、一部の低バージョンブラウザ(Safariの低バージョン等)はこの方式に賛同せず、対応していません。
埋め込みタグのみを使用する
コード表示
コピーコード
コードは以下の通りです。

<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=& quot;#ffffff" width="450" height="350" name="webcam" align="middle" wmode=" transparent" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash& quot; pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="width=490&height=390&objid= cameradialog">
</div></span>

この方法はEmbedタグしか使わないので、比較すると非常に優れており、ブラウザの互換性も全て読み込むので良好です。もちろん、embedタグはW3Cに準拠していないため、この方法も推奨されません。
JavaScriptによる埋め込み
Flashプラグインを読み込むためにJSを使用する方法はたくさんあり、良いJSプラグインがたくさんあります。ここではSWFObjectを取り上げて簡単に紹介することにします。
まず、JSスクリプトを含むSWFObjectプラグインパッケージをダウンロードする必要がありますが、これが導入する必要のあるフッターファイルです。また、2つの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& quot;>
<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>

効果

結論
これらのアプローチに比べ、私はFlashプラグインの読み込みにJSエンベッディングを使用することをお勧めします。このアプローチは、Flashのすべての機能を保証するだけでなく、ブラウザ間の互換性の点でも優れており、JSはより多くの拡張機能を提供しますが、ほとんどはより多くの人が再利用でき、不必要な冗長コードを減らすことができます。
プラグインのダウンロードはこちら SWFOオブジェクト