webrtc チュートリアル
webrtcを使い始める

備考

WebRTCベースの通信システムの設定

WebRTCベースの通信システムを設定するには、次の3つの主要コンポーネントが必要です。

1. WebRTCシグナリングサーバ

   WebRTC接続を確立するには、ピアがシグナリングサーバに接続する必要があります。シグナリングサーバはピアツーピア接続を設定するためにピアが必要とするアドレス情報を提供します。シグナリングサーバは、たとえば次のとおりです。

   • signalmaster ：軽量のJavaScriptベースのシグナリングサーバ
   • NextRTC ：Javaベースのシグナリングサーバ
   • Kurento ：包括的なWebRTCフレームワーク
   • Janus ：汎用WebRTCゲートウェイ

2. WebRTCクライアントアプリケーション

   クライアントは、JavaScriptのAPIを使用してブラウザのWebRTC実装にアクセスするか、WebRTCライブラリを使用します（つまり、デスクトップまたはモバイルアプリの一部として）。ピアへの接続を確立するには、まずシグナリングサーバに接続する必要があります。 WebRTCクライアントの例は次のとおりです。

   • いくつかのKurentoプロジェクト

   • OpenWebRTC 、モバイルフォーカスを持つクロスプラットフォームのクライアント

   • Peer.jsブラウザベースのクライアント（Peer.jsは軽量サーバーも提供しています）

   • Janusデモの例

3. STUN / TURNサーバー

   NAT（Session Traversal Utilities for STUN）を使用すると、ピアがNAT（ Network Adress Translation）を使用するルータの背後にあってもアドレス情報を交換できます。ネットワークの制限により、ピアがまったく通信できなくなった場合、トラフィックはTURN（Traversal Using Relays around NAT）サーバ経由でルーティングされます。 STUNとTURNの詳細とグラフィカルな説明は、 http： //www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.htmlにあります 。 WebRTC STUN / TURNサーバーの例は次のとおりです。

   • coturnはSTUNとTURNを組み合わせており、通常は本格的なWebRTCインフラストラクチャの一部です。
   • Janus WebRTC Gatewayには、STUN / TURNサーバーが統合されています。

WebRTC入門

WebRTCは、ブラウザのリアルタイムコミュニケーションを可能にするオープンなフレームワークです。これには、音声およびビデオチャットアプリケーションで使用されるネットワーク、オーディオ、ビデオコンポーネントなど、Web上の高品質な通信のための基本的なビルディングブロックが含まれています。

これらのコンポーネントは、ブラウザに実装するとJavaScript APIを介してアクセスでき、開発者は独自のRTC Webアプリケーションを簡単に実装できます。

WebRTCの取り組みは、 W3Cの APIレベルとIETFのプロトコルレベルで標準化されています。

• Webの成功の鍵となる要素は、HTML、HTTP、TCP / IPなどのコア技術がオープンで自由に実装可能であることです。現在、ブラウザでの通信を可能にするフリーで高品質の完全なソリューションはありません。 WebRTCはこれを可能にします。
• 過去8年以上にわたり数百万のエンドポイントに導入されているベスト・オブ・ブリードの音声およびビデオ・エンジンとすでに統合されています。 GoogleはWebRTCにロイヤリティを請求しません。
• STUN、ICE、TURN、RTP-over-TCP、およびプロキシのサポートを使用して、主要なNATおよびファイアウォールトラバーサル技術を含み、要約します。
• Webブラウザの強みを基盤に構築：WebRTCは、PeerConnectionに直接マッピングするシグナリングステートマシンを提供することによってシグナリングを抽象化します。したがって、Web開発者は、使用シナリオ（たとえば、SIP、XMPP / Jingleなど）に適したプロトコルを選択できます。

ここからWebRTCの詳細を読む

getUserMedia（）API、Hello WebRTCを使用して、オーディオとビデオにアクセスしてください！

navigator.mediaDevicesは現在ChromeとFFでgetUserMediaに適応している一般的なメソッドです。

成功した場合にローカルストリームを返す、約束されたベースのコールバック

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

オーディオやビデオの制約をgetUserMediaに渡すと、解像度、フレームレート、デバイスの設定などのキャプチャ設定を制御できます。

ストリームを動画要素にアタッチする

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

ビデオとオーディオの両方を停止する

localStream.getTracks().forEach((track) => {
    track.stop();
});

オーディオのみを停止する

localStream.getAudioTracks()[0].stop();

ビデオのみを停止

localStream.getVideoTracks()[0].stop();

ライブデモ