如何搭建瀏覽器視頻會議直播系統(tǒng)

時間：2023-07-06 18:54:01 | 來源：網(wǎng)站運營

時間：2023-07-06 18:54:01 來源：網(wǎng)站運營

如何搭建瀏覽器視頻會議直播系統(tǒng)：3月30日下午，以“視頻技術的演進與實踐”為主題的保利威第18期視頻極客沙龍在杭州·貝塔空間完美收官。本期視頻極客沙龍由保利威主辦，珠三角技術沙龍社區(qū)、安卓巴士技術社群，CSDN、51CTO、APICloud等合作伙伴對本次活動給予了大力支持。

華南師范大學經(jīng)濟與管理學院副院長徐向龍、保利威技術副總裁梁瑛瑋、保利威前端技術專家羅禮權、搜狐千帆直播高級技術經(jīng)理金昊、大牛教育教學傳媒部負責人黃思源等5位視頻技術大咖和教育專家在本次視頻極客沙龍中，對網(wǎng)絡視頻技術的演進、新一代互聯(lián)網(wǎng)傳輸協(xié)議QUIC及高校在線教育的探索與需求等話題做了精彩分享。

在分享中，羅禮權詳細講解了視頻會議直播流程及相關視頻編碼技術發(fā)展趨勢、常見視頻封裝格式等，并對幾種主流推流協(xié)議的優(yōu)點和缺點做了專業(yè)解讀。

羅禮權

保利威前端技術專家。有11年Web前端開發(fā)經(jīng)驗，先后就職于網(wǎng)易、3G門戶、56搜狐視頻等知名互聯(lián)網(wǎng)企業(yè)，以及美黛拉、貝聊兩個創(chuàng)業(yè)團隊，參與過網(wǎng)易跟貼、網(wǎng)易可視化專題系統(tǒng)，56視頻播放頁等項目的開發(fā)，并維護多個開源項目應用于工作中。

以下是羅禮權的分享實錄整理：

視頻會議經(jīng)過幾十年的發(fā)展，現(xiàn)在分成兩大類，一種是硬件視頻會議，一種軟件視頻會議，硬件視頻會議效果很好，成本也很高，軟件視頻會議彌補了這些問題，但是效果要稍差一些。軟件視頻會議才是比較大眾化的產(chǎn)品。

直播系統(tǒng)

▲ 視頻會議直播過程

編碼環(huán)節(jié)

編碼是為了讓視頻變得更小，更有利于存儲和傳輸。

H.264/MPEG-4 AVC 是目前應用最為廣泛的視頻編碼標準，下一代的 H.265/HEVC 因為專利費高等問題，還未能普及；

VP8 是一種視頻編碼格式。Google 收購其研發(fā)公司后，將其以開放源代碼、無需授權費用的形式發(fā)布。VP8 的下一代是 VP9，是 H.265/HEVC 的競爭者；

網(wǎng)頁瀏覽器對這幾種編碼的支持程度為 H.264 > VP8 > VP9 > H.265；

從目前情況看，Google 主推 VP9，蘋果主推 H.265。

封裝

就是用一個容器把編碼器生成的多媒體內容（視頻、音頻、字幕、章節(jié)信息等）裝在一起。

常見的封裝格式包括：

MP4：ISO/IEC 制定的容器格式標準，支持多種方式編碼后的數(shù)據(jù)，但最常見的是 H.264/H.265 編碼的視頻和 AAC 編碼的音頻；

WebM：Google 基于開源容器格式 Matroska（.mkv）開發(fā)的新型容器格式。目的是用來封裝 VP8/VP9 編碼的視頻和 Vorbis 編碼的音頻以供網(wǎng)絡媒體使用；

FLV：Adobe公司推出的流媒體格式，廣泛應用于視頻網(wǎng)站。

幾種常見推流協(xié)議剖析

RTMP

Adobe 公司為 Flash/AIR 與服務器之間傳輸音視頻數(shù)據(jù)而開發(fā)的私有協(xié)議，也是目前主流的推流協(xié)議。

優(yōu)點：

基于 TCP，延時低，通常只有 1~3s ；

技術成熟，配套完善。

缺點：

在 PC 瀏覽器中只能通過 Flash 使用，且無法在移動瀏覽器使用。

Flash 即將和世界說再見，所以在網(wǎng)頁播放端基本不會以 RTMP 拉流。

HTTP-FLV

把音視頻數(shù)據(jù)封裝成 FLV，然后通過 HTTP 連接傳輸，與 RTMP 相比只是傳輸協(xié)議變了。對于網(wǎng)頁播放端，本來還是需要 Flash 才能播放，但「flv.js」的出現(xiàn)又彌補了這個缺陷。

優(yōu)點：

低延時，與 RTMP 非常接近；

相較于 RTMP 協(xié)議，能有效避免防火墻和代理的影響。

缺點：

它的傳輸特性，會讓流媒體資源緩存在本地客戶端，在保密性方面不夠好；

仍然不兼容 iOS 的瀏覽器。

HLS

蘋果公司提出的基于 HTTP 的流媒體網(wǎng)絡傳輸協(xié)議。它的工作原理是把整個流分成一個個小的 TS 片傳輸，每次只傳輸一部分。

優(yōu)點：

基于 HTTP 協(xié)議，接入 CDN 較為容易，且自帶多碼率自適應。

作為蘋果提出的協(xié)議，在 macOS/iOS 下有極大優(yōu)勢，Android 中也提供了對應的支持。

缺點：

延時較大，通常不低于 10s 。

大量 TS 片文件，會造成服務器存儲和請求的壓力。

WebRTC

在不同的上下文中有不同的含義，它可以表示：Google 開源的 WebRTC 項目；W3C 的 WebRTC 標準；瀏覽器中的 WebRTC 接口。

優(yōu)點：

RTMP 和 HLS 都是掌握在大企業(yè)手中的協(xié)議，而 WebRTC 已被納入 W3C 標準。

無需安裝插件，且支持的瀏覽器越來越多。

缺點：

廠商對瀏覽器或系統(tǒng)的定制可能會導致可用性問題。

缺乏服務器端設計、部署的方案。

主要面向 Web 端，對原生開發(fā)支持不足。

實際應用中，更常見的是把多種協(xié)議混合使用，而不是用同一種協(xié)議推流和拉流。

Web端播放器，目前為止基本上只有兩種選擇：

一種是用flash。即將于2020年就停止更新了，部分瀏覽器已經(jīng) 阻止Flash加載，需要我們手動點擊開啟。

另一種是HTML 5 Video。HTML5 Video提供標簽，瀏覽器原生支持的標簽，不同平臺瀏覽器里面，格式和編碼存在一些差異，其中MP4和H·264普適性比較高。國內有部分用戶使用不支持此特性舊版本瀏覽器，對其普及造成一定阻礙。

保利威云課堂

產(chǎn)品構成

直播只是視頻會議的核心。一個合格的視頻會議系統(tǒng)還要根據(jù)應用場景提供對應的配套功能。接下來以保利威云課堂產(chǎn)品為例，描述一下我們提供了什么樣的配套功能以及這些配套功能是怎么實現(xiàn)的。

教師端是PC客戶端，管理端是基于Web的后臺管理系統(tǒng)；

學員端有PC和移動端的觀看頁；客戶也可以使用我們提供的SDK，自行開發(fā)觀看頁。

這是PC端觀看頁的大體截圖，上面可以看到的模塊包括課件、播放器、聊天室。

播放器

協(xié)議選擇：PC端選擇HTTP-PLV，移動端選擇HLS，做好適配。

互動功能

除了播放器，還有互動功能，包括屏幕共享、簽到、問答，白板、課件展示等等，大部分功能都依賴于聊天室模塊做消息傳輸。

白板部分功能：老師在教師端涂畫后，會產(chǎn)生一段數(shù)據(jù)，并以socket的形式經(jīng)過服務器傳輸?shù)綄W員端展示。在IE瀏覽器下通過Flash還原畫板，其他瀏覽器下則用Canvas。

學員連麥部分。這是學員連麥部分，老師在教師端發(fā)起連麥，學員在觀看頁點擊對應的按鈕就可以連上。學員跟老師之間通過WebRTC連接，其他學員通過HTTP-FLV拉流觀看。前幾年WebRTC還不太成熟，所以我們使用了第三方SDK，近兩年技術成熟后又基于開源方案自行搭建相關服務，前端對兩者進行了封裝調用。

網(wǎng)頁版教師端

教師端目前是PC客戶端，使用上有一定的不方便，我們內部已經(jīng)啟動了網(wǎng)頁版教師端項目。

網(wǎng)頁版有一個好處，可以免除下載、安裝、更新的成本，通過瀏覽器打開就可以用。過去瀏覽器對視頻會議相關功能支持較差，而現(xiàn)在大部分已經(jīng)有實現(xiàn)方案了。其中比較麻煩的是屏幕共享，但在一些高版本瀏覽器中已經(jīng)有相關的接口。

然而，最重要的是整套系統(tǒng)的兼容性、穩(wěn)定性，這需要在長期實踐中經(jīng)驗歷各種問題洗禮，才能逐步完善。