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

序文

この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出してインスタント写真撮影機能を実現するという新しい要件を提示したためです。インターネットでいろいろ情報を調べ、いろいろな理由から、最終的にはフラッシュプラグインを使ってPCのカメラを呼び出すことにしました。もちろん、この要件は B/S アーキテクチャに基づいているため、フロントエンドの HTML ページに埋め込む方法を検討していました。

話題外

もちろん、ここではカプセル化は考慮されていません。まずは実装が主目的であり、その後の作業は業務に応じて抽象化され、共通コンポーネントにカプセル化されます。さて、ナンセンスは十分です、本題に入りましょう。

プラグインを埋め込む

オブジェクトタグと埋め込みタグの使用

コードショーケース

コードをコピー

コードは次のとおりです。

このメソッドでは、Object タグと Embed タグを使用します。オブジェクトの多くのパラメータと埋め込みの多くの属性が繰り返されていることがわかります。ブラウザの互換性: 一部のブラウザはオブジェクトをサポートし、一部のブラウザは埋め込みをサポートしています。そのため、Flash パラメータを変更するときは、両方の場所を変更する必要があります。この方法は Macromedia の公式方法であり、Flash の機能性が最大限に保証され、互換性の問題もありません。

しかし、今のところまだ大きな問題があるようです。

まず、互換性のために埋め込まれた埋め込みタグが W3C 仕様に準拠していないため、検証に合格できません。もちろん、標準を気にしないかどうかは別の問題です。

第二に、さまざまな理由により、Microsoft は SP2 以降、IE の ActiveX の使用モードを制限しました。つまり、ページ上の ActiveX に仮想ボックスがあり、ユーザーは正常に操作するために 1 回クリックする必要があります。 Flash は ActiveX として Web ページに埋め込まれているため、これも関係します。この問題は、JS を介して Flash を埋め込むことによってのみ解決できます。

繰り返しになりますが、Flash バージョンの検出はありません。ブラウザの Flash プラグインバージョンが十分でない場合、swf ファイルが正常に表示されないか、ActiveX のインストール確認ボックスがポップアップ表示されることがあります。このボックスは多くのユーザーにとって非常に恐ろしいものです。

オブジェクトタグのみを使用する

コードショーケース

コードをコピー

コードは次のとおりです。

この方法では、実際には Flash satay である Object タグのみを使用します。埋め込みタグがないので検証を通過できます。Flashを埋め込む標準的な方法です。ブラウザの互換性も良好です。ほぼ完璧のように見えますが、まだ問題があります。

まず、IE でのストリーム機能を確保するには、ターゲット SWF をロードするためのホルダー SWF が必要です。フラッシュ変数を介してパラメータを渡したり、ページの JS とやり取りしたりする必要がある場合は、非常に面倒になります。

次に、最初の方法と同様に、バージョン検出なしで ActiveX プロンプトボックスがポップアップ表示されます。

繰り返しになりますが、一部の低バージョンのブラウザ (低バージョンの Safari など) はこのアプローチを認識せず、互換性がありません。

埋め込みタグのみを使用する

コードショーケース

コードをコピー

コードは次のとおりです。

この方法はEmbedタグのみを使用します。効果を比較すると、それでも非常に優れています。ブラウザの互換性も良好で、読み込むことができます。もちろん、埋め込みタグは W3C 仕様に準拠していないため、この方法は推奨されません。

JavaScriptを使用して埋め込む

JS を使用してインターネット上で Flash プラグインを読み込む方法は多数あり、選択できる優れた JS プラグインも多数あります。ここでは SWFObject について簡単に紹介します。

まず、インポートする必要があるスクリプトファイルである JS スクリプトを含む SWFObject プラグインパッケージをダウンロードする必要があります。また、模倣できる 2 つの HTML サンプルも含まれています。もちろん、SWFObject の Web サイトにアクセスして詳細を確認することもできます。ここをクリックしてください。

コードショーケース

コードをコピー

コードは次のとおりです。

<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;">
<オブジェクト id="myId" クラス id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 幅="490" 高さ="390">
<param name="movie" value="cam.swf" />

<オブジェクトタイプ="application/x-shockwave-flash" データ="cam.swf" 幅="490" 高さ="390">

<div>
<h1>代替コンテンツ</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="Adobe Flash Player を入手" /></a></p>
</div>

</オブジェクト>

</オブジェクト>
</div></span>

レンダリング

結論<br />これらの方法と比較して、Flash プラグインをロードするには JS 埋め込みを使用することをお勧めします。この方法は、Flash のすべての機能の実現を保証するだけでなく、さまざまなブラウザとの互換性の点でも優れています。JS はより多くの拡張機能を提供することもできますが、さらに重要なのは、より多くの人が再利用できるため、不要な冗長コードが削減されることです。

プラグインのダウンロードアドレス: SWFObject

<<: JavaScript データのフラット化の詳細な説明

>>: LAMP ソースコードを使用したエンタープライズレベルのインストールチュートリアル