Web ビデオの再生

1. 3 つの主要なライブビデオプロトコル:

1.
RTMP の正式名称は、リアルタイムメッセージングプロトコルである Real Time Messageing Protocol です;
起源: Flash Player プレーヤーに対応するオーディオおよびビデオ flv パッケージフォーマットに基づいて Adobe によって提案された伝送プロトコル; 利点
:
1. 遅延は非常に低く、一般に 1 ～ 3 秒です;
2. 長時間の安定した連続再生;
3. 一般的なビデオ会議とインタラクティブなライブブロードキャストで十分です;
欠点:
1. アプリケーション層の TCP ロングコネクションプロトコルに基づくデータ伝送、パブリックポートがファイアウォールによってブロックされる可能性がある;
2. Adobe 独自のプロトコルであり、多くのデバイス、特に IOS モバイル端末で再生できないため、サードパーティのデコーダを使用する必要がある; 3. 高い同時実行性の下では不安定で
ある.
拡張:
1. RTMP は主要なプロトコルであり、さらに、RTMPT / RTMPS / RTMPE / RTMFP などのバリアントが含まれます;
2. その中で、RTMFP は UDP 伝送に基づくプロトコルです; P2P 通信でよく使用されます;
アプリケーション:ライブストリーミング (ライブ)、オンデマンド (VOD); ストリーミング (ホスト側) の詳細。

*プッシュストリーム: コンテンツプロデューサー; ライブビデオ信号をネットワークに送信するプロセスは、ネットワーク環境に対して比較的高い要件があり、不安定な場合、ライブブロードキャストの吃音などの現象が発生し、視聴体験が低下します。 *プルストリーム:
コンテンツコンシューマー; サーバーからライブデータをプルし、分析し、トランスコードして、最終的に端末に表示します。

P2P

1. 完全な名前は、ピアツーピア、ポイントツーポイント、またはエンドツーエンドの通信技術です;
2. 解決すべき問題: 異なるイントラネット環境にあるデバイスが、それぞれのイントラネット IP を介して直接通信します;
3. 基本条件:中間サーバーにはパブリックネットワーク IP アドレスがあります ; NAT ネットワークアドレス交換プロトコル (ネットワークアドレス変換): イントラネットへの侵入、ホールパンチング、プローブ、ミドルウェアなど; 4. フロントエンドアプリケーション: WebRTC (Web リアルタイム通信)
リアル- 時間通信技術: ブラウザー間でポイントツーポイントのリンクを確立して、オーディオおよびビデオストリームまたはその他のデータの伝送を実現する; オンラインチャットルーム、画面共有、ファイル共有、大容量ファイルのポイントツーポイント伝送、リアルタイムゲーム、ライブブロードキャスト、p2p に基づく Web 検索; 5. 中間サービス: 1. peerjs
セルフトランジットサービスが提供されます; 2. 自分で peerjs-server を構築します; 3. バックエンドビルドトランジット

HLS

1. フルネーム: HTTP ライブストリーミング;
2. 起源: Apple の HTTP ベースのストリーミングメディアリアルタイム伝送プロトコル;
3. 原理: ストリーミングメディアデータ全体を、継続時間の短い連続した ts ファイルにカットします (小さな断片、数秒)。 M3U8 インデックスファイルを介して ts ファイルに順次アクセスする;
4. 利点:
1. HTTP に基づいて、HTTP データを許可するファイアウォールまたはプロキシサーバーを通過できます。
2. コンテンツ配信ネットワークを使用してメディアストリームを送信し、高速化するのは簡単です。
5. 欠点: 10 秒以上の高い遅延;
6. 用途: オンデマンドおよびライブ放送の分野;
* オンデマンドとライブ放送を区別するための重要な兆候: m3u8 インデックスファイル #EXT-X-ENDLIST があるかどうか;

HTTP-FLV

フルネーム: HTTP FLASH VIDEO
利点:
1. HTTP に基づいているため、HTTP データを許可するファイアウォールまたはプロキシサーバーを通過できます。
2. HTTPS を暗号化チャネルとして使用できます。
3. 優れたモバイルサポート。
4. 遅延はわずか 2 秒です。
ここに画像の説明を挿入

2. フロントエンドの一般的に使用されるビデオライブラリ

1.VideoJS (推奨)

公式ウェブサイト: https://docs.videojs.com/
利点: オープンソースで無料、大規模で包括的、純粋な CSS+JS で構築、高いスケーラビリティ、すべてのブラウザーと互換性あり、欠点: ドキュメントは
純粋な英語であり、サポートされていませんRTSP ストリーム (ビデオ監視に一般的に使用される) を再生するには、フラッシュに依存します。
注:
1. rtmp: タイプは rtmp/flv に設定されます。
2. hls: type は application/x-mpegURL に設定されます。

2.CKPlayer (非推奨)

公式ウェブサイト: https://www.ckplayer.com/
長所: 比較的完全な機能; 独立した構成ファイル; 独立した素材とスキンのサポート;
短所: 小さな画面の再生には適していない, スタイルを台無しにしやすい; UI スタイルはあまりよくない親しみやすい; 独立した機能は後で追加されます , 比較的難しい; プロジェクトのメインパッケージを占有します;
使用:
1. public または assets ファイルに配置する必要があり、index.html は静的ファイルとしてインポートされます;
2.ローカル環境とサンドボックス環境の UI に一貫性がない;
3. フルスクリーンの [スクリーンショットボタン] は、親に対してのみ配置されるため、消える;
4. ビデオスクリーンの機能制御、dom 構造の動的出力には、クラス値がなく、ui でカバーできない
5. ボリュームコントロールは垂直表示をサポートしていません。

3. スイカ奏者

公式サイト：https://v2.h5player.bytedance.com/
Bytedance は独自のビジネスを組み合わせてホイールを作成します [動画のスクリーンショット] 落とし穴はありますが、あえて踏まないでください。

4、Dプレイヤー

公式ウェブサイト: https://dplayer.js.org/zh/利点
:
1. API は簡潔です;
2. UI スタイルはより現代的な美学に沿っており、ボタン制御構造は明確です; スタイルはオーバーライドできますクラス別;
3. 統合された弾幕;
4. メインストリームのビデオをサポートするには、他のコンポーネントライブラリと組み合わせる必要があります: hls.js、flv.js など;
5. GitHub は継続的に維持されます; 問題には一般的な問題に対する解決策があります;
スクリーンショット機能:
1. 組み込みのスクリーンショット構成では、画像の名前を設定できません; デフォルト Dplayer.png;
2. スクリーンショットデータを引き継ぎ、開発者に操作させます: https://github.com/DIYgod/DPlayer/issues/1006
右- メニューをクリック:
1. ブロック: https://github.com/DIYgod/DPlayer/ Issues/544 は、
m3u8 および ts ファイルの連続した要求を禁止します:
1. プレーヤーは破棄されますが、HLS サービスは実行中です: https:/ /github.com/DIYgod/DPlayer/issues/628
2. HLS.js 構成: https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlsstartlevel
Vue 二次パッケージ:
https://console.cloud.baidu-int.com/devops/icode/repos/baidu/adu/v2xapp-key-vehicle-front/blob/develop:src/components/videoPlayer/dPlayer.vue

"dplayer": "^1.26.0",
"hls.js": "^1.0.5",
 
import DPlayer from '@/components/videoPlayer/dPlayer';
 
<DPlayer
    class="video-area"
    :ref=""
    :key=""
    :className=""
    :videoUrl=""
></DPlayer>

3.キャンバスキャンバス汚染

意味: ビットマップ内のピクセルは、他のホストから取得した画像やビデオなど、さまざまなソースから取得される可能性があるため、セキュリティ上の懸念が必然的に発生します。参照: https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
シナリオ: h5 ペイント共有ポスター、フロントエンドのトリミングされた画像、合成画像、フロントエンドのビデオスクリーンショット、html2Canvas プラグの使用-インなど
結果: ブラウザーはキャンバスからデータを読み取れなくなります。toDataURL()、toBlob()、getImageData() メソッドは使用できません。

ここに画像の説明を挿入
解決

let video = document.querySelector('#dplayer video');
video.setAttribute('crossOrigin', 'anonymous'); // 重点，前提：服务端的视频支持跨域
 
const canvas = document.createElement('canvas');
canvas.width = this.player.video.videoWidth;
canvas.height = this.player.video.videoHeight;
canvas.getContext('2d').drawImage(this.player.video, 0, 0, canvas.width, canvas.height);
const data = canvas.toDataURL('image/jpg');

考えられる解決策: イメージタグの機能を使用してドメインを横断する

// 西瓜视频、网上大多资料的解决方案
let img = new Image();
img.setAttribute('crossorigin', 'anonymous') // 给图片设置允许跨域
image.src = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
img.onload = function () {
    
    
    // do Something
}
img.error = function () {
    
    }

1. 3 つの主要なライブ ビデオ プロトコル:

P2P

HLS

HTTP-FLV

2. フロントエンドの一般的に使用されるビデオ ライブラリ

3.キャンバスキャンバス汚染

おすすめ

1. 3 つの主要なライブビデオプロトコル:

2. フロントエンドの一般的に使用されるビデオライブラリ