webrtc の原理と関連する API 使用ロジック

#webrtc の簡単な分析。easyrtc および coturn (スタン、ターン) サービスと組み合わせて、オーディオおよびビデオチャットを実現します。

webRTCの正式名称はWeb Real-Time Communications、つまりWebリアルタイム通信です。
オーディオおよびビデオチャットの前提は、ライブブロードキャストの前提とは異なります~ API には多くの種類があり、一部は古いものです。何か違うものが表示された場合は、MDN を参照して別のソリューションを試すことができます。メディアを有効にするには、Google が https または localhost を必要としますただし、互換性を持たせるには多くの作業が必要です。localhost でテスト用に 2 つの Web ページを開きます。easyrtc については後ほど説明します。

WebSocket 接続を理解する/WebSocket は Node.js の最も盛んな分野であり、http://socket.io は単純で失礼ですhttps://github.com/socketio/socket.io.git はwebrtc juejin.cn/
のワークフローを理解します投稿/684490…

スタンサーバーの役割は、接続の確立を支援するために双方の IP を取得することです。
ターンサーバーの役割、音声ビデオをターンします
シグナリングサーバーの役割はhttp://socket.ioを使用して実現され、主に音声およびビデオチャットで双方のソフトウェアおよびハードウェア情報 IP およびデバイス情報を転送し、直接接続またはビデオ転送を支援します。

記事コンテンツの導入を簡略化する webrtc プロセス。以下をイントラネットで実行できます。

1. ユーザーのオーディオおよびビデオメディアを取得します。この手順を完了すると、自分のカメラ画像が表示されます。

  navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
  }).then((stream) => {
    let video = document.querySelector('#video')
    video.srcObject = stream  // mediaDevices.getUserMedia获取到的音视频流捆绑在video标签上
    video.onloadedmetadata = () => video.play() // 读取数据时进行播放
  })

2. ピアツーポイント接続を確立します。

2-1. homeowner createOffer コールバックでは、住宅所有者の情報記述、オーディオおよびビデオ構造のソフトウェアおよびハードウェア情報を取得してローカルに保存し、転送を支援するためにシグナリングサーバーに送信できます。

  let peer = new RTCPeerConnection(servers)
  pc.createOffer(sendOffer, function (error) {
    console.log('发送 offer 失败')
  })
  function sendOffer (desc) {
    console.log('sendOffer')
    pc.setLocalDescription(desc);
    socket.emit('offer', JSON.stringify({
    data: {sdp: desc}
      })
    )
  }

2-2. 住宅所有者が Offer を作成すると、独自の接続の onicecandidate イベントをトリガーして、候補者、ユーザーのアドレスなどを取得します。

  pc.onicecandidate = function(event) {
    if (event.candidate !== null) {
        socket.emit("_ice_candidate",JSON.stringify({
          type: '_candidate',
          data: {
            candidate: event.candidate
          }
        })
      )
    }
  };

2-3. 相手がソケットでオファーを受信したら、それをリモート記述として設定し、オファーが回答に対応するユーザーが作成されると、ユーザーの onicecandidate イベントがトリガーされ、ユーザーのアドレスがこの時点で、その説明が住宅所有者に送信されます。

 socket.on('offer', function(e) {
    getUserMedia(function (stream) {
    let vid1 = document.getElementById('vid1')
    vid1.srcObject = stream
    vid1.onloadedmetadata = function(e) {
      vid1.play();
    };
    pc.addStream(stream)
    var json = JSON.parse(e) 
    pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
    pc.createAnswer(sendAnswer, function (error) {
      console.log('创建answer失败')
    })
    }, function (error) {
      console.log('摄像头获取失败', '接听视频失败');
    })
  })
  function sendAnswer(desc) {
    pc.setLocalDescription(desc);
    socket.emit('answer', JSON.stringify({
      type: '_answer',
      data: {
        sdp: desc
      }
    }))
  }

2-4. 住宅所有者は、応答を受け取ったソケットイベントでリモート記述として設定します。

  socket.on('answer', async function(e) {
    let data = e.message
    await peer.setRemoteDescription(data)
  })

外部ネットワーク上にポイントツーポイントのオーディオおよびビデオチャット ICE を実装します (スタン、ターン、ペネトレーションを組み合わせて、オーディオパーティとビデオパーティの両方のアドレスを取得します)

STUN分析
- しかし実際には、ビデオ通話はイントラネットに限定することはできず、ファイアウォールや NAT の内側にある可能性があり、ポイントツーポイント接続の前に、ビデオ通話が実行できるかどうかを確認する必要があります。このテクノロジーは NAT ペネトレーションと呼ばれ、通常は RFC3489 などの UDP プロトコルに基づいています。TCP ペネトレーションは新しい RFC5389 でサポートされています
ターン解析
- TURN はリレーを使用して NAT に侵入します。STUN の拡張機能は、STUN と同様に、アプリケーション層でプライベートネットワークアドレスを変更することによって NAT 侵入の効果を実現します。類似点と相違点は、TURN が 2 つの「仲介者」方式を通じて侵入を達成することです。当事者間のコミュニケーション。これは、オーディオおよびビデオストリームを翻訳するサーバーの意味に少し似ています。STUN が失敗すると、TURN になります。

NATの役割とは何ですか

グローバル IP の不足を軽減するために、NAT は内部ネットワークのプライベートアドレスを外部ネットワークのパブリックアドレスに変換し、インターネットアクセスを実行できるようにします。
外部ホストが内部ホストを攻撃するのを防ぐ

もちろん、フロントエンド開発にはこれらのことは馴染みがありませんが、多くの RTC ブログを読んだ後、Google が stun と coturn に関連するオープンソースのサービスを提供しており、依存関係をインストールし、アカウントのパスワードを暗号化するだけで使用できることを知りました。参考https://www.cnblogs.com /idignew/p/7440048.html
coturn を設定した後、アドレスをテストし、成功を証明するためにサーバーアドレスとしてリレー属性を返しますhttps://webrtc.github.io/samples /src/content/peerconnection/trickle-ice/

easyRTC

多くのテストを行った結果、私が作成した RTCdemo の互換性は低く、現在のテスト段階では手書きで作成するつもりはありません。easyRTC を使用しても、safari と Antique を除いて、その他の点は問題ありません。github.com/priologic/e…

最新のプロジェクトにはベータブランチが使用されることに注意してください

★記事末尾の名刺では、オーディオ・ビデオ開発学習教材（FFmpeg、webRTC、rtmp、hls、rtsp、ffplay、srs）やオーディオ・ビデオ学習ロードマップ等を無料で受け取ることができます。

以下を参照してください！

webrtc の原理と関連する API 使用ロジック

おすすめ