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

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

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

話題外

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

プラグインを埋め込む

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

コードショーケース

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

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
<オブジェクトクラスid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
コードベース="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
幅="490" 高さ="390" id="無題-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" プラグインページ="http://www.macromedia.com/go/getflashplayer" />
</オブジェクト>
</div></span>

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

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

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

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

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

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

コードショーケース

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

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;">
<オブジェクトタイプ="application/x-shockwave-flash データ="c.swf?path=cam.swf" 幅="490" 高さ="390">
<param name="cam" value="c.swf?path=cam.swf" />
<img src="defqr.png"
幅="550" 高さ="400" alt="" />
</オブジェクト>
</div></span>

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

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

次に、最初の方法と同様に、バージョン検出なしで 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="#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タグのみを使用します。効果を比較すると、それでも非常に優れています。ブラウザの互換性も良好で、読み込むことができます。もちろん、埋め込みタグは 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" />
<!--[if !IE]>-->
<オブジェクトタイプ="application/x-shockwave-flash" データ="cam.swf" 幅="490" 高さ="390">
<!--<![endif]-->
<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>
<!--[if !IE]>-->
</オブジェクト>
<!--<![endif]-->
</オブジェクト>
</div></span>

レンダリング

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

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

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

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

推薦する

Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...

CentOS はローカル yum ソースを使用して LAMP 環境を構築するグラフィック チュートリアル

この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...

ノードでシェルスクリプトを使用する方法

背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...

webpackでHMRを手動で実装するいくつかの方法

目次1. はじめに2. GitHub 3. 基本構成プロジェクトディレクトリパッケージ.json c...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

Nginx プロキシを使用してインターネットを閲覧する方法

私は通常、Tomcatや他のアプリケーションのリバースプロキシとしてnginxを使用しています。実際...

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...

ウェブサイトのデザインを改善するための役立つ提案を提供します

<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...

アコーディオン効果を実現するJavaScript

この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

CSS3はさまざまな境界効果を実現します

半透明の境界線結果: 実装コード: <div> 半透明の境界線が見えますか? </...

nginx proxy_cache バッチキャッシュクリアスクリプトの紹介

前書き: 以前、公式の nginx proxy_cache を CDN 静的キャッシュとして使用して...

ファイアウォールルールの設定とコマンド(ホワイトリスト設定)の詳しい説明

1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...