ホームページ >ウェブフロントエンド >htmlチュートリアル >Flash プラグインを使用して PC のカメラを呼び出し、TML ページに埋め込む方法
私がこの記事を書いた理由は主に、チームリーダーによって提起された新しい要件のためです - ブラウザを使用してコンピュータのカメラを呼び出し、瞬時に写真を撮る機能を実現するということです。インターネットでさまざまな情報を調べましたが、最終的には何らかの理由で、Flash プラグインを使用して PC のカメラを呼び出すことにしました。もちろん、この要件は B/S アーキテクチャに基づいているため、フロントエンドの HTML ページにどのように埋め込むかを考えています。
余談
もちろん、ここではカプセル化は考慮されていません。主に最初に実装するためのもので、その後の作業はビジネスに基づいて抽象化され、共通コンポーネントにカプセル化されます。さて、早速、重要なポイントに焦点を当ててみましょう。
埋め込みプラグイン
オブジェクトタグと埋め込みタグを使用する
コード表示
<span style="font-family:Microsoft YaHei;"><p 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> </p></span>
このメソッドは、オブジェクトの多くのパラメータと埋め込み内の多くの属性を確認できます。ブラウザの互換性。一部のブラウザはオブジェクトをサポートし、一部のブラウザは埋め込みをサポートします。そのため、Flash パラメータを変更する場合は両方の場所を変更する必要があります。この方法は常に Macromedia の公式方法であり、互換性の問題を発生させることなく Flash の機能を最大限に保証します。
しかし、今見てみると、まだ大きな問題を抱えています。
まず、互換性のために埋め込まれた埋め込みタグがW3Cの仕様に準拠していないため、検証を通過できません。もちろん、ルールや規制を気にしないのであれば、それは別の問題です。
次に、さまざまな理由により、Microsoft は sp2 以降、IE の ActiveX の使用モードを制限しました。つまり、ページ上の ActiveX には仮想ボックスがあり、通常の操作ではユーザーが 1 回クリックする必要があります。 Flash は ActiveX として Web ページに埋め込まれているため、JS を介して Flash を埋め込むことのみがこの問題の影響を受けます。
繰り返しになりますが、ブラウザの Flash プラグインのバージョンが不十分な場合、または swf ファイルが正常に表示されない場合、または ActiveX のインストール確認ボックスがポップアップ表示される場合、このボックスは非常に怖いです。の多くのユーザー。
objectタグのみを使用する
コード表示
<span style="font-family:Microsoft YaHei;"><p 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> </p></span>
このメソッドはObjectタグのみを使用しており、実際にはFlashサテです。 embed タグがないので、標準的な Flash 埋め込み方法であり、ほぼ完璧に見えますが、まだ問題があります。
まず、IE でストリーム機能を確保するために、ホルダー swf をロードする必要があります。flashvars 経由でパラメータを渡したり、ページの JS を操作したりする必要がある場合、非常に面倒になります。
2 番目に、最初の方法と同様に、バージョン検出なしで ActiveX プロンプト ボックスがポップアップ表示されます。
繰り返しになりますが、一部の下位バージョンのブラウザ (Safari の下位バージョンなど) はこの方法に同意せず、互換性が低くなります。
埋め込みタグのみを使用しますコード表示
<span style="font-family:Microsoft YaHei;"><p 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"> </p></span>
JavaScript を使用して埋め込む
JS を使用して Flash プラグインをロードする インターネット上には多くの方法があり、誰もが選択できる優れた JS プラグインも数多くあります。ここでは SWFObject を簡単に紹介するためにのみ使用します。
まず、JS スクリプトを含む SWFObject プラグイン パッケージをダウンロードする必要があります。これは、インポートする必要があるスクリプト ファイルです。また、真似できる 2 つの HTML サンプルも含まれています。もちろん、SWFObject の Web サイトにアクセスして詳細を確認することもできます。ここをクリックしてください。
コード表示
レンダリング
結論
これらの方法を比較すると、FlashプラグインをロードするにはJS埋め込みメソッドを使用することをお勧めします。この方法は、Flashのすべての機能を確実に実現できるだけでなく、さまざまなブラウザとの互換性の点でも優れています。JS はより多くの拡張機能も提供でき、さらに重要なことに、JS はより多くの人が再利用できるため、不要な冗長コードが削減されます。
PC のカメラを呼び出すためのその他の Flash プラグインと、それを TML ページに埋め込む方法については、PHP 中国語 Web サイトの関連記事に注目してください。