ライブについて

ビデオライブブロードキャスト技術百科事典、ライブブロードキャストアーキテクチャ、技術原則と実装アイデア

ライブプロセス

ビデオ収集端末:
1. ビデオ収集: カメラ機器を使用してリアルタイムのビデオストリームを取得します。
2. ビデオ処理: 美化、フィルター、透かしなどの効果の追加を含め、キャプチャしたビデオを処理します。
3. オーディオおよびビデオのエンコードと圧縮: 処理されたオーディオおよびビデオデータはエンコードおよび圧縮され、一般的に使用されるエンコード方法には、H.264 ビデオエンコードと AAC オーディオエンコードが含まれます。
ライブストリームビデオサーバー:
1. ビデオストリームの分析とエンコード: ビデオ取得側からオーディオおよびビデオデータストリームを受信し、分析してデコードします。
2. RTMP/HLS 形式のビデオストリームをプッシュする: デコードされたオーディオおよびビデオデータストリームを RTMP または HLS 形式にカプセル化し、ストリーミングメディアサーバーにプッシュします。これらのストリーミングメディアサーバーは、クライアントの接続とリクエストを処理し、ライブコンテンツをクライアントに配信します。
ビデオ再生終了:
1. オーディオとビデオのデコード: 再生終了時に、ライブストリーミングビデオサーバーからのデータストリームが受信され、デコードされて、元のオーディオとビデオデータが取得されます。
2. 再生 + チャットインタラクション: デコードされたオーディオデータとビデオデータを再生し、視聴者が視聴できるユーザーインターフェイスを提供します。弾幕、いいね、コメントなど、一部のインタラクティブ機能は再生側で実装できます。

ライブビデオフォーマットパッケージ

ライブビデオは通常、ネットワーク上での送信と再生のために特定の形式でパッケージ化されます。これらのパッケージ化形式は、オーディオ、ビデオ、メタデータ、その他の情報を組み合わせて管理し、スムーズな送信と再生エクスペリエンスを保証します。

FLV: Adobe が開発したストリーミングメディアパッケージ形式。元々は Flash プレーヤーと RTMP プロトコルの送信に使用されていました。オーディオ、ビデオ、テキスト、メタデータを保持でき、リアルタイムの送信と再生に適しています。

TS:マルチメディアコンテンツを送信するためのパッケージ形式。デジタル TV や IPTV でよく使用されます。複数のオーディオ、ビデオ、データストリームに対応でき、リアルタイムの送信やブロードキャストに適しています。TS 形式は、オーディオストリームとビデオストリームをカプセル化するために HLS プロトコルで使用されます。

MP4:オーディオ、ビデオ、字幕、メタデータを保持できる汎用マルチメディアパッケージ形式。オーディオおよびビデオコンテンツの保存と送信に広く使用されており、ライブブロードキャストにも使用できます。MP4 形式は通常、H.264 ビデオエンコーディングと AAC オーディオエンコーディングを使用します。

押したり引いたり

推流（Publishing）および拉流（Subscribing）リアルタイムのオーディオおよびビデオ通信における一般的な用語であり、オーディオおよびビデオデータの送信プロセスを説明するために使用されます。プッシュストリーミングはローカルのオーディオデータとビデオデータをサーバーに送信することを指し、プルストリーミングはリモートのオーディオデータとビデオデータをサーバーから受信することを指します。

HLSは、Apple Inc. によって開発されたストリーミングメディア伝送プロトコルです。主に、iOS デバイス、Web ブラウザー、および HLS をサポートするその他のデバイス上でリアルタイムのオーディオおよびビデオのストリーミングを実現するために使用されます。HLS は、オーディオとビデオのストリームを一連の小さなメディアファイル (.ts 形式でカプセル化され、オーディオとビデオのストリームを小さな .ts ファイルに分割) に分割し、HTTP プロトコルを通じて 1 つずつ送信して再生します。
利点:
1. iOS、Android、Web などを含むさまざまなデバイスとプラットフォームに適用できます。
2. アダプティブビットレートをサポートし、ネットワーク状況に応じてビデオ品質を動的に調整します。
3. さまざまな帯域幅でよりスムーズな再生体験を提供できます。
4. 送信に HTTP プロトコルを使用するため、特定のサーバーのサポートは必要ありません。
欠点:
1. 遅延は比較的長く、通常は約 10 秒です。
2. メディアストリームを小さなファイルに分割する必要があるため、サーバーの負荷とストレージのオーバーヘッドが増加します。

RTMP は、TCP プロトコル伝送に基づいて Adobe によって開発されたリアルタイムメッセージ伝送プロトコルで、元々は Flash プレーヤーとメディアサーバー間のオーディオおよびビデオ伝送に使用されていました。
利点:
1. 遅延は比較的低く、通常は 1 ～ 3 秒程度で、リアルタイムの対話に適しています。
2. インスタントライブブロードキャストをサポートします。これは、遅延要件が高い一部のシーンに適しています。
3. Flash プレーヤーとの互換性が向上しました。
短所:
1. iOS デバイスおよび一部のプラットフォームは広くサポートされていないため、これらには適していません。
2. 特別な RTMP サーバーのサポートが必要であり、導入とメンテナンスが比較的複雑です。
3. ファイアウォールやプロキシなどのネットワーク制限を考慮する必要があります。

カメラとマイクの許可を取得する

navigator.getUserMedia()

MDN-navigator.getUserMedia()

Navigator.getUserMedia()カメラ、画面共有、マイクなどのオーディオ (0 または 1) および (0 または 1) ビデオ入力デバイスが必要であることをユーザーに警告する方法。

文法： navigator.getUserMedia ( constraints, successCallback, errorCallback );

コード：

<body>
    <video autoplay id="video" width="400" height="300"></video>
  <script>
    var video = document.getElementById('video');
    //作兼容处理
    navigator.getMedia = navigator.getUserMedia ||
      navagator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;

    navigator.getMedia({
    
     audio: true, video: true },
      function (stream) {
    
    
        //MDN文档案例中这样写会报错：video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream
        video.onloadedmetadata = function (e) {
    
    
          video.play();
        };
      },
      function (err) {
    
    
        console.log("The following error occurred: " + err.name);
      }
    );
  </script>
</body>

このAPIは引き続き利用可能ですが、公式サイトでは別のAPIが変更されています——MediaDevices.getUserMedia()
ここに画像の説明を挿入

MediaDevices.getUserMedia()

MDN-MediaDevices.getUserMedia()

MediaDevices.getUserMedia()ユーザーは、メディア入力を使用する許可を求められます。これにより、要求されたメディアタイプのトラックを含む MediaStream が生成されます。このストリームには、ビデオトラック (カメラ、ビデオキャプチャデバイス、画面共有サービスなどのハードウェアまたは仮想ビデオソースから)、オーディオトラック (マイク、A/D などのハードウェアまたは仮想オーディオソースからも) を含めることができます。コンバータなど）、場合によっては他のトラックタイプも含まれます。

文法：

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    
     /* 使用这个 stream stream */ })
  .catch(function (err) {
    
     /* 处理 error */});

コード：

<video autoplay id="video" width="400" height="300"></video>
<script>
    var video = document.getElementById('video');
    navigator.mediaDevices
      .getUserMedia({
    
     audio: true, video: true })
      .then(function (stream) {
    
    
        /* 使用这个 stream stream */
        video.srcObject = stream
        video.onloadedmetadata = function (e) {
    
    
          video.play();
        };
      })
      .catch(function (err) {
    
    
        /* 处理 error */
        console.log("The following error occurred: " + err.name);
      });
  </script>

WebRTC

MDN-WebRTC API

WebRTC(Web Real-Time Communication) は、ブラウザ間のリアルタイム通信をサポートするオープン標準およびテクノロジであり、ブラウザがプラグインや追加のソフトウェアを使用せずにオーディオ、ビデオ、およびデータを直接送信できるようにします。WebRTC テクノロジーの中心的な目標は、ビデオチャット、音声通話、データ共有、その他の機能を含むリアルタイムのピアツーピア通信を実現することです。

コード：

<body>
  <!-- 显示本地视频 -->
  <h2>本地视频</h2>
  <video id="localVideo" autoplay playsinline style="width: 300px;"></video>

  <!-- 显示远程视频 -->
  <h2>远程视频</h2>
  <video id="remoteVideo" autoplay playsinline style="width: 300px;"></video>

  <button id="startCall">发起通话</button>
  <button id="answerCall">接听通话</button>

  //呼叫者：
  <script>
    const localVideo = document.getElementById('localVideo');
    let localStream;

    // 呼叫者：获取本地摄像头和麦克风权限
    navigator.mediaDevices.getUserMedia({
    
     video: true, audio: true })
      .then(stream => {
    
    
        localStream = stream;
        localVideo.srcObject = localStream;
      })
      .catch(error => {
    
    
        console.error('获取本地媒体流失败:', error);
      });

    const startCallButton = document.getElementById('startCall');
    startCallButton.addEventListener('click', () => {
    
    
      startCall();
    });

    async function startCall() {
    
    
      // 呼叫者：创建PeerConnection
      const peerConnection = new RTCPeerConnection();

      // 添加本地媒体流到PeerConnection
      localStream.getTracks().forEach(track => {
    
    
        peerConnection.addTrack(track, localStream);
      });
      // 呼叫者：创建Offer并设置本地描述
      peerConnection.createOffer()
        .then(offer => peerConnection.setLocalDescription(offer))
        .then(() => {
    
    
          // 发送本地描述到远程
          const offerSdp = peerConnection.localDescription;
          // 在实际应用中，需要将offerSdp发送给远程端
          // 远程端通过RTCPeerConnection.setRemoteDescription()设置远程描述
        })
        .catch(error => {
    
    
          console.error('创建Offer失败:', error);
        });
    }
  </script>

  //被呼叫者：
  <script>
    const remoteVideo = document.getElementById('remoteVideo');
    let remoteStream;

    const answerCallButton = document.getElementById('answerCall');
    answerCallButton.addEventListener('click', () => {
    
    
      answerCall();
    });

    async function answerCall() {
    
    
      // 创建PeerConnection
      const peerConnection = new RTCPeerConnection();

      // 设置ontrack事件处理程序以接收远程流
      peerConnection.ontrack = event => {
    
    
        remoteStream = event.streams[0];
        remoteVideo.srcObject = remoteStream;
      };

      // 在实际应用中，你需要获取呼叫者发送的offerSdp
      // 并通过RTCPeerConnection.setRemoteDescription()设置远程描述

      // 创建Answer并设置本地描述
      const answer = await peerConnection.createAnswer();
      await peerConnection.setLocalDescription(answer);

      const answerSdp = peerConnection.localDescription;

      // 在实际应用中，你需要将answerSdp发送给呼叫者
      // 呼叫者通过RTCPeerConnection.setRemoteDescription()设置远程描述
    }
  </script>
</body>

テンセントクラウドエクスプレスライブ

Tencent クラウドライブストリーミング - WebRTC プロトコルストリーミング

Cloud Live は、Web ストリーミングSDK TXLivePusher用の、ブラウザーによってキャプチャされたオーディオおよびビデオ画像を WebRTC プロトコルを通じてライブブロードキャストサーバーにプッシュする役割を果たします。現在、カメラ収集、マイク収集、画面共有収集、ローカルメディアファイル収集、ユーザー定義収集およびその他の収集方法をサポートしており、収集されたコンテンツのローカル混合ストリーム処理をサポートし、バックエンドサーバーにプッシュします。

1. 初期化スクリプトをインポートします（スクリプトはHTMLのボディ部分に導入する必要があります。ヘッド部分に導入するとエラーが報告されます）。

<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>

2.ビデオコンテナを作成する

<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>

3. ストリーミング SDK インスタンスを生成する

    //通过全局对象 TXLivePusher 生成 SDK 实例，后续操作都是通过实例完成。
    const livePusher = new TXLivePusher();
    // 指定本地视频播放器容器 div，浏览器采集到的音视频画面会渲染到这个 div 当中。
    livePusher.setRenderView('local_video');
    // 设置音视频流    
    livePusher.setVideoQuality('720p');
    // 设置音频质量
    livePusher.setAudioQuality('standard');
    // 自定义设置帧率
    livePusher.setProperty('setVideoFPS', 25);

4. ライブプッシュストリーミングを有効にする

    // 开启直播
    // 打开摄像头       
    livePusher.startCamera();
    // 打开麦克风
    livePusher.startMicrophone();
    //传入云直播推流地址，开始推流。
    livePusher.startPush(推流地址);

Tencent Cloud ライブストリーミングサービスを使用する場合、ストリーミングアドレスは、以下に示すように Tencent Cloud の標準ライブストリーミングストリーミング URL の形式を満たす必要があります。この URL は 4 つの部分で構成されます。
ここに画像の説明を挿入

5. ライブブロードキャストを閉じる

    // 关闭直播
    // 停止直播推流
    livePusher.stopPush();
    // 关闭摄像头
    livePusher.stopCamera();
    // 关闭麦克风
    livePusher.stopMicrophone();

完全なコード:

<body>
  <div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>
  </div>

  <script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
  <script>
    //通过全局对象 TXLivePusher 生成 SDK 实例，后续操作都是通过实例完成。
    const livePusher = new TXLivePusher();
    // 指定本地视频播放器容器 div，浏览器采集到的音视频画面会渲染到这个 div 当中。
    livePusher.setRenderView('local_video');
    // 设置音视频流    
    livePusher.setVideoQuality('720p');
    // 设置音频质量
    livePusher.setAudioQuality('standard');
    // 自定义设置帧率
    livePusher.setProperty('setVideoFPS', 25);

    // 开启直播
    // 打开摄像头       
    livePusher.startCamera();
    // 打开麦克风
    livePusher.startMicrophone();
    //传入云直播推流地址，开始推流。
    livePusher.startPush(推流地址);

    // 关闭直播
    // 停止直播推流
    livePusher.stopPush();
    // 关闭摄像头
    livePusher.stopCamera();
    // 关闭麦克风
    livePusher.stopMicrophone();
  </script>
</body>

間違っていたら修正してください！

ウェブエンドはローカルカメラマイク+WebRTC Tencent Cloudを呼び出してライブブロードキャスト機能を実現します

目次

ライブについて

ライブプロセス

ライブビデオフォーマットパッケージ

押したり引いたり

カメラとマイクの許可を取得する

navigator.getUserMedia()

MediaDevices.getUserMedia()

WebRTC

テンセントクラウドエクスプレスライブ

おすすめ