最初の内部ビルドでは、Web開発者はネイティブHTMLツールを使用して、ディスプレイにアクセスし、ユーザーカメラと対話できました。
デバイス要素
開発者は、ユーザーのカメラからリアルタイムでビデオストリームをリクエストできます。 その結果、このビデオストリームは、HTML ビデオ要素のデバイス要素のデータ属性を使用して、任意のWebページに表示できます。
次の簡単な例は、WebページにWebカメラビデオストリームを表示するために使用できるHTML デバイス要素の実装を示しています。
<!DOCTYPE html> <h1>Simple web camera display demo</h1> <device type="media"/> <video autoplay></video> <script type="text/javascript"> var device = document.getElementsByTagName('device')[0], video = document.getElementsByTagName('video')[0]; device.addEventListener('change', function() { video.src = device.data; }, true); </script>
このコードは次を表示します
私たちの実装。
現時点では、ページの読み込み時、またはスクリプトで動的HTMLデバイス要素が作成され、ページで使用されるときに、要素のchangeイベントがトリガーされます。 将来的には、ユーザーと対話するためのさまざまなオプションを検討します。これは、設定内のユーザーがウェブカメラWebページへのアクセスを許可または拒否できるようにするために必要です。 この機能がないため、html canvas要素を介したピクセルデータストリームへのアクセスを無効にすることにしました。
上記の制限に加えて、 Streamインターフェースが簡素化されており、提供するすべてのメソッドと属性を実装していないことに注意してください。 これを行うことで、URIを開く必要なく、 device要素の基本的な機能を提供することができました。 上記のように、Streamオブジェクトはvideo要素のsrc属性で直接指定する必要があります。 video要素のsrc属性が割り当てられると、streamurl URIが不可能であっても、Streamオブジェクトとその属性は予約を要求します。
デバイスの実験中に、このHTML要素を使用していくつかの問題を特定しました。 このアセンブリの最初の実装では、 デバイス要素に独自のインターフェイスはありませんが、要素の設計には、ユーザーがデバイスへのアクセスを許可または拒否できるように、Webページに挿入されるユーザーインターフェイスコンポーネントが必要です。 フォーム要素の経験から、コントロールの設計が制限されるため、これはデザイナーにとって最適なオプションではないことがわかります。 最良の選択肢は、ユーザー自身がユーザーインターフェイスを作成し、同様の機能を備えた必要なAPIを提供できるようにすることです。 したがって、WHATWGのHTMLプロジェクトで提示された最新の変更を歓迎し、実験を続けます。
オリエンテーションイベント
これは、方位イベントを使用してコンパスを作成する簡単な例です。
<!DOCTYPE html> <h1>Simple compass demo</h1> <canvas id="arrow" width="480" height="480"></canvas> <p id='orient'></p> <script type="text/javascript"> window.addEventListener('deviceorientation', function(evt) { var arrow = document.getElementById('arrow'); var ctx = arrow.getContext('2d'); ctx.clearRect(0,0,480,480); alpha = -Math.PI *(evt.alpha/180.0); var x1 = 240 + Math.round(240.0 * Math.sin(alpha)); var y1 = 240 - Math.round(240.0 * Math.cos(alpha)); var x2 = 240 + Math.round(10.0 * Math.sin(alpha - Math.PI/2)); var y2 = 240 - Math.round(10.0 * Math.cos(alpha - Math.PI/2)); var x3 = 240 + Math.round(10.0 * Math.sin(alpha + Math.PI/2)); var y3 = 240 - Math.round(10.0 * Math.cos(alpha + Math.PI/2)); ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.lineTo(x3,y3); ctx.closePath(); ctx.fill(); var orient = document.getElementById('orient'); orient.innerHTML = "(" + evt.alpha + ", " + evt.beta + ", " + evt.gamma + ")"; }, true); </script>
このコードは次を表示します
計画
ブラウザからユーザーのカメラとマイクにアクセスするためのウェブ標準の広範なサポートに関連する長い旅の始まりです。 近い将来、これらの技術に関連する更新プログラムの開発と実装を継続する予定です。
私たちは計画しています：
- 開発者向けの公開Androidビルドをリリースします。
- 他の主要なモバイルおよびデスクトップシステムのサポートを追加します。
- この機能をWeb全体およびすべてのブラウザで提供できるように、標準に関連するすべてに引き続き積極的に参加してください。
- マイクをサポートし、 audio要素でサウンドストリームを使用できるようにします。
- モバイルシステムとデスクトップシステムの両方のユーザーインターフェイスを作成します。これにより、WebカメラWebページへのアクセスがオプションで有効または無効になります。
- オープンなJavaScript APIを使用するか、HTML デバイスの要素として、カスタムWebカメラへの許可されたアクセスを試してください。
- W3C RTC-Webアクティビティに積極的に参加して、 Web上でWebカメラとマイクのストリーミングデータを提供します。
- エンドユーザー向けに安全な方法（たとえば、ファイルシステムのマウント）でローカルデバイスへの他の種類のアクセスを開くことを試す。
現在のプロトタイプは、ウェブカメラにアクセスする優れた方法の1つを示していますが、デバイスの機能（少なくともオリエンテーションイベント）にアクセスする方法は、承認されたWeb標準になる前に変更されます。
アセンブリはまもなく公開されます。
あなたの意見を表明し、コメントを残すことを忘れないでください！