WebRTC、リアルタイムWeb API

この簡単なチュートリアルでWebRTCを使用して直接Webカメラ通信アプリケーションを作成する方法

WebRTCはWebリアルタイムコミュニケーション

これにより、ブラウザ間の直接データ通信を作成できます。

あなたはそれを使用することができます

  • ストリーミングオーディオ
  • ストリーミングビデオ
  • 共有ファイル
  • ビデオチャット
  • ピアツーピアのデータ共有サービスを作成する
  • マルチプレイヤーゲームを作成する

もっと。

これは、Webテクノロジを活用して、リアルタイム通信アプリケーションを簡単に作成できるようにするための取り組みです。そのため、Webブラウザのほかにサードパーティのプラグインや外部テクノロジは必要ありません。

将来的にRTCを実行するためのプラグインは必要ありませんが、代わりにすべてが標準テクノロジーであるWebRTCに依存する必要があります。

最新のすべてのブラウザーでサポートされています(サポートされていないEdgeからの部分的なサポートがあります)RTCDataChannel-後で参照):

WebRTCは次のAPIを実装しています。

  • MediaStreamカメラやマイクなど、ユーザー側からデータストリームにアクセスできます
  • RTCPeerConnectionピア間のオーディオおよびビデオストリーミングの通信を処理します
  • RTCDataChannel:他の種類のデータ(任意のデータ)の通信を処理します

ビデオおよびオーディオ通信では、MediaStreamそしてRTCPeerConnection

ゲーム、ファイル共有などの他の種類のアプリケーションは、RTCDataChannel

この記事では、WebRTCを使用して2つのリモートWebカメラを接続する例を作成します。Websocketサーバーを使用Node.js

ヒント:プロジェクトでは、これらの詳細の多くを抽象化するライブラリを使用する可能性があります。このチュートリアルは、WebRTCテクノロジーについて説明することを目的としているため、内部で何が起こっているかを理解できます。

MediaStream

このAPIを使用すると、JavaScriptを使用してカメラとマイクのストリームにアクセスできます。

これは、ビデオカメラにアクセスしてページ内のビデオを再生するように求める簡単な例です。

ペンを見るWebRTCMediaStreamの簡単な例フラビオ・コープス(@flaviocopes) オンCodePen

Tech Wiki Online!