劉連響：小程序實時音視頻在互動場景下的應用

本文來自騰訊雲技術沙龍，本次沙龍主題爲在線教育個性化教學技術實踐

做者簡介：劉連響，一塊兒玩耍科技創始人。2013年起開始研究WebRTC， 對音視頻處理、 直播、實時音視頻相關技術很是感興趣，具備多個實時音視頻產品研發經驗。目前關注實時音視頻在在線教育，醫療行業的應用。

今天爲你們帶來的分享是：小程序實時音視頻在互動教育場景下的應用。我我的一直在作基礎方面的研究，接觸音視頻也比較早，2013年的時候就開始作包括直播在內的相關產品，有多個音視頻研究的相關經驗。目前咱們關注教育、醫療方向的音視頻，以及有關這方面的應用。

下面是我與客戶溝通中列出的一些問題，也就是作一個線上教育實時互動的產品會面臨的問題：

1. 沒有攝像頭。好比一個PC機，有些是沒有攝像頭。若是想要進行視頻教育，須要額外買一個攝像頭。這就是用戶端遇到的問題。
2. 背景比較混亂。一個孩子在固定的電腦前，由於身後的背景比較混亂，可能會不太願意打開視頻。固定電腦沒有辦法很好地移動，這也是一個問題。
3. 終端設備多樣。你們使用的是iPad、手機以及各類各樣的電腦，這是多樣設備適配的問題。
4. 設備調試。設備的調試跟上一個問題相輔相成，咱們發現一些教育客戶，要花不少能力給它的C端用戶作培訓，手機上沒有聲音，聲音變小了，或者相似各類各樣的問題，他要花不少人力進行遠程電話支持，你要怎麼操做。
5. 教務系統多種。這是面對SaaS客戶遇到的問題，沒有辦法接入到排課系統。
6. 網絡延遲、視頻卡頓。目前爲止沒有一個特別完美的解決方法，只能說行業在不斷進行優化，提高體驗。

以上是我列出的問題。有人提到音視頻延遲這部分的問題，音頻很流暢，可是視頻不行，這個技術問題能夠歸爲視頻卡頓中。小程序音視頻是怎麼解決這個問題的呢？先說一下方案介紹。

1. 零基礎快速對接。這個比較好理解。小程序提供音視頻組件JS API，無須具有音視頻基礎知識就能夠進行應用。
2. 卓越的音視頻品質。騰訊已經作了十幾年，從QQ時代就有視頻通話，質量是端到端、400毫秒如下的延遲、800毫秒的網絡抖動，30%丟包。
3. 跨平臺互通。小程序、安卓、IOS、Web端，均可以用它的SDK去解決這個問題。

咱們爲何會看好小程序音視頻在教育行業的應用呢？首先是統一的平臺」微信OS」，主要有如下幾點：

第一，統一的帳戶系統。一個APP須要用戶去註冊登陸，而微信有用戶頭像，有完備的用戶信息, 這是微信已經作好的。

第二，標準的接口。小程序的接口很標準，只要記住兩個東西就能夠，一個是上，一個是下。這兩個有相關的接口，只要記住有上有下就能夠了。

第三，極簡的API。

第四，軟硬件遍解碼底層適配。若是你作音視頻相關的解決方案，尤爲是安卓端，iOS還好一些。安卓端由於每一個平臺硬件的底層不太同樣，須要進行適配，好比高通的、三星的、英特爾的芯片，可能每家每一個型號的芯片、表現都不同，這時就須要花很長的時間作適配。咱們作這個東西就很痛苦，沒有辦法經過簡單的代碼來解決。

在小程序裏就不須要擔憂了，騰訊基於多種機型的適配，已經作得比較完善了。

第五，降噪回升消除。爲何有回聲？背景爲何那麼噪雜？這是比較難解決的問題，行業裏真正作得好的只有不多一部分。

第六，統一的操做路徑。小程序都是同樣的規範、同樣的操做，這些都是很是統一的。

以上是統一平臺的部分，下面介紹很是低廉的羣傳播、打開成本。這是咱們的界面，至關於建立一個課堂以後，小程序爲你提供了分享的接口，能夠作分享的動做。它的分享成本很是低廉。咱們假設在原生的APP場景分享了一個連接以後，別人須要下載一個APP進行註冊，再回到那個房間、教室，小程序能夠極大地簡化這個流程。

小程序生態完備。在教育環境，咱們有四個環節，教、練、測、管。你們看到錄播產品、直播產品，常常在朋友圈轉發的課程，這是教的環節。練的環節，咱們看到的一些相關產品，好比打卡、題庫、做業等，各位多多少少也接觸過。測，就是線上考試、比賽、PK的部分。管，就是基於微信羣，或者一些督學和家長溝通的工具。在微信小程序環節裏面，每個環節裏面都有相應的產品。你再設計解決方案的時候，徹底不須要作一個教育產品，還須要作其餘的嗎？不須要了，你能夠在這個生態裏只作你擅長的教學內容，其餘部分能夠和整個生態其餘的工具串聯起來，你能夠有相對統一的用戶惟一標識，這是一個很是好的生態，能夠幫助你的業務更好地發展。以上是我總結出來的三個點，統一的平臺、低廉的傳播成本和完備的生態。

那麼咱們是怎麼作的呢？咱們剛開始就作了一些小的嘗試，內部已經有了產品，下面主要爲你們講一下這個過程當中的幾點。

首先是基礎框架，騰訊官網推出了一個官方的小程序框架，咱們選了vuejS和wepy這兩個技術。若是你會這兩個，一天就能夠進行小程序開發了。另一個是socketio。市面上有些人作了一些第三方的實現，可是咱們發現它的bug不少，由於它畢竟不是爲小程序而生的，只能移到小程序中使用。typescript的前端和後端均可以用一樣的語言來開發，大部分的數據都直接存在redis裏面，像一些實時的場景，好比房間管理、操做歷史等一系列相關的東西均可以用Reids。咱們一開始的時候也有被坑到的點，音視頻的部分須要單獨開放權限，它開放了直播、教育、醫療和金融這四個分類。若是不開放權限，在調用相關接口的時候就會報錯，這裏仍是須要設置一下。

音視頻互動主要有四個部分，pusher、player、房間管理和1V6的實時互動。這是爲微信小程序提供的基礎組件，只須要一個簡單的上和下，其餘的場景在這上面不斷組合就能夠了。房間管理的環境支持1V6，支持上百人、上千人進行觀看，至關於這個房間能夠支持1000人觀看的切入流。房間管理主要是管理學生、pusher和player。在他加入之後，其餘人經過房間管理傳消息，在收到pusher消息之後再進行相應的接收，它的邏輯是相對簡單的。1V6至關於能夠左右進行滑動，一個房間能夠容許1個老師，6個學員。

下面介紹一下產品設計的時候須要特別注意的部分，由於音視頻是一個原生組件，它的層級比其餘都要高，這時不能作複雜的交互。簡單的滑動還能夠作，其餘的複雜交互不太好作，好比動畫、放大、縮小，很容易形成閃退。最好佈局和UI相對簡單固定的，咱們一開始的交互設計比較複雜，最終改了兩個版本，比較簡單一些。但如今還有這樣的問題存在，須要用更長的時間進行優化。音頻比視頻更簡單一些，由於它的資源消耗比視頻小不少，音頻的房間幾十我的都沒有問題，主要是看你們的需求。兩三我的進行互動，其餘人觀看，是這樣的一個場景。

教育跟白板是少不了的，包括視頻白板。咱們作了ppt、doc、pdf格式，如今的版本作得相對簡單，至關於把PPT、文檔和PDF轉成一張張圖片進行同步，包括回放的錄製。回放後，須要鼠標的指示或三角形、畫線操做，在進行廣播的時候能夠同步在學生端。

文檔格式轉換，由於會涉及到一些變形的問題，咱們摸索出來比較好的方式就是用OpenOffice headless mode。它沒有UI，能夠拿來操做，經過OpenOffice headless mode的接口進行轉換。通過測試下發現它的還原度比較好，不會有太多變形。騰訊雲也有文檔轉換的服務，由於咱們已經作了這個部分，也但願對這個系統更可控，因此就本身作了一套轉換的服務。

操做歷史記錄，好比老師翻到下一頁、老師畫了一個三角形，這些都須要記錄下來。提供給你一個時間戳，在回放的時候，根據時間軸就能夠。

多人受權白板，至關於老師佈置了一個任務讓學生進行操做，能夠將白板受權給學生，學生來操做白板，老師也能夠把權限收回。

動畫、音頻、視頻的支持，目前來看沒有很好的方案。例如一些幼教的產品，3歲到6歲這種，它的可見很是活潑、很是豐富，各類動畫、視頻比較多。單純的圖片轉換不太能知足這種需求，這時就須要一些機構進行動畫相應的轉化。目前，小程序的底層技術還沒法很好地支撐這些東西，咱們能夠在PC端進行這部分。

小程序暫時沒有辦法支持PDF，這不是小程序的問題，而是操做系統的問題，上傳的時候只能選圖片和視頻。如今iOS已經支持了，能夠選擇其餘文件。而安卓尚未一個統一的結構，小程序目前還不能支持，只能上傳一張張圖片。

雲端錄製能夠方便學生以後再進行學習，騰訊在小程序音視頻上提供了雲端的錄製，其實就是標準的rtmp流。這部分是額外收費的，若是須要錄製的服務能夠進行開通。

關於截圖鑑黃，教育場景有必要作這些嗎？仍是很是有必要的。在中國這種大的環境下，多注意都不過度，以防萬一，這部分真的很是有必要。

關於雲端混流，好比說一個房間裏面有五路音視頻，你須要把這些流混起來。還有一些其餘更特殊的場景，須要將PPT和老師的操做都混起來，這是有一些麻煩的。目前騰訊雲的方案提供了視頻的混流，能夠將多個視頻混流，但尚未提到PPT和音視頻混流的方案。這部分咱們本身有實現一套方案，你能夠把音視頻錄製下來再進行合成。由於咱們以前作過相似方案，有一些相應的技術積累，咱們儘可能在作服務的時候，能能夠本身把控的就儘可能本身把控。

關於雲存儲，在錄製下來以後存放在騰訊雲上面就能夠了。

關於合成ffmpeg、moviepy，若是遇到一些合成效果就能夠來研究一下，常見的視頻效果均可以經過幾行命令行來搞定。

關於瀏覽器合流、screen recorder，你們想象一個場景，在整個教育過程當中須要回放合流的時候，假如一個房間五我的，在服務端合流很難完美地浮現學生當時看到的場景，由於回放和學生當時看到的不是徹底之一致的。並且像PPT這種操做，沒有辦法完美合進去。這時候咱們有一些技巧，瀏覽器的合流能夠把幾個視頻合成一個流。甚至把白板、視頻、音頻都合成一個視頻錄製下來上傳到服務端。它能夠將當前窗口完美錄製下來，比合流的效果更好一些。這個方案能夠考慮，可是有限的瀏覽器支持，做爲一個對服務端混流的補充。

咱們應該怎麼作呢？WebRTC你們都瞭解，能夠很快地作一個demo。小程序爲了節省資源，用的不是RTC的技術，不少市面上的產品已經有那麼多平臺支持了，這要怎麼辦呢？騰訊確實也提供了這樣的方案，像WebRTC。小程序的音視頻就是rtmp，它在傳輸時基於UDP的協議，只須要將這兩個東西打通就能夠。騰訊在服務端已經在作將這兩種動態打通，咱們正常去作音頻轉碼就能夠了。騰訊雲團隊將相關的操做都已經封裝成一個比較好的組件，好比RTC多人動畫的組件。

WebRTC這部分的能力可使PC端和小程序進行互通，打包成一個組件提供給你們。同時它也提供相應的服務端的代碼，有java版本。它提供的服務能夠某種程度知足你的需求，畢竟作得相對集成一些，咱們至關於在這個基礎之上，本身封裝了一套，由於還有不少定製化的需求在。比較好的是你能夠快速搭建一個demo，很快地跑起來看到是什麼效果。若是真正作深的話，還要基於本身的理解去封裝一套東西。

咱們說了一些好的方面，接下來再說一下存在的問題：

1. 視頻原生組件，不能作太多複雜的交互。視頻的部分，它的原生組件，在視頻上沒有辦法作複雜的交互。好比視頻之上不能覆蓋東西，或者只能覆蓋一些比較簡單的東西，基於視頻的動畫也不能夠。
2. 品類限制。如今只有四個品類，限制比較多。教育品類已經開放，你們可使用，也但願能夠開放更多的品類，作出更多的場景。
3. 不支持pad。在相對大屏上是不能夠的，只能用PC端的產品來進行替代。
4. 不支持模擬器調試。正常開發一個場景，在寫完代碼後，用這個手機掃一下，另一個手機再掃一下，調試過程相對痛苦，但願能夠支持中遠程去調試。
5. 上傳文件的限制。這是操做系統的限制，不是小程序的限制。咱們但願在操做系統進化的時候，小程序也將相應的能力提高上去。

Q/A

Q：咱們發現市場有個特定的應用，恰好跟視頻結合比較完美，數量大概有1億以上。目前瞭解到有沒有支持到這個量級？這個應用已經到了1億的瀏覽量上，不知道您如今作的應用，有沒有支持大併發？

A：視頻能支持這種量級很難，好比鬥魚這種高併發級別宣稱有幾百萬，其實也到不了，可能幾十萬已經差很少了。主要的壓力在於視頻，好比如今有的機構一天的課堂數有幾萬節，這已經很是多了。像你說的1億多是應用人數，這不必定就表明了高併發。

Q：您是公司的創始人，我不是作互聯網行業的，對這部分不太瞭解。做爲一個外行人想問兩個關於產品的問題。第一，咱們基於騰訊雲小程序所作的開發，隨着用戶量愈來愈龐大，對於騰訊雲小程序的耦合性愈來愈緊。緊耦合性將帶來一個問題，對騰訊的依賴會愈來愈深。如今量沒有上去時對咱們不收費。量級上去就會收費不少。並且，騰訊有本身的公開課或騰訊課堂，咱們作的產品對騰訊的市場有了衝擊，咱們還依賴於它，這種問題應該如何處理？

A：我說一下本身的見解，每一個階段你都有應該考慮的問題。首先更多的仍是把產品打磨好，第二個階段其實你已經有足夠的能力擺脫這方面的限制。一個很現實的狀況就是，若是你到達必定量級後，不少公司到了C輪、D輪級別，纔開始大量去鋪本身的基礎IT設施。我以爲若是到了兩個量級，再考慮這個問題比較OK。我跟騰訊雲交流比較多，他們選擇一種合做模式，這點從過去幾年騰訊一些具體例子能夠看到，我認爲騰訊仍是相對開放。你的問題可能會做爲憂慮的一部分，但更多仍是把本身的產品作好，讓更多的人使用。

Q：如今你們基於小程序作了不少程序，作了本身的APP。平臺是沒有技術壁壘的，一個沒有技術壁壘的產品，是很容易被模仿的。不知道您的投資人是否諮詢過關於技術這部分的問題，若是沒有技術壁壘，如何在同類產品突出本身的產品亮點，或者憑什麼吸引咱們？好比教育行業的一些名師就是師資資源上的亮點，但從程序自己，有沒有能夠打造亮點的地方？

A：技術和產品在這個環節中的應用我想要說明一下，雖然我是技術出身，很重視技術，可是不得不認可一點，在某些行業裏技術和產品只是第一步，是重要的第一步。每一個公司、每一個業務必定是一個總體。你不能說，我只有這一部分強。教育行業是很重服務的，它有不少老師。在這種場景下，它確實很重要，同時還有上層的業務打造。考慮這個問題的時候，仍是要想清楚本身的優點，本身能作什麼？有什麼樣的資源？若是你有技術，確實能夠省去不少的時間和精力。

獲取更多詳細資料，請戳如下連接：
小程序實時音視頻互動教育-劉連響.pdf

問答
小程序能夠實現哪些音視頻解決方案？
相關閱讀
周錦民：騰訊在線教育視頻互動直播間技術實踐
郭卓惺：互動課堂的搭建實例及相關領域應用 
楊婷：騰訊雲在線教育解決方案分享

此文已由做者受權騰訊雲+社區發佈，原文連接：https://cloud.tencent.com/dev...

歡迎你們前往騰訊雲+社區或關注雲加社區微信公衆號（QcloudCommunity），第一時間獲取更多海量技術實踐乾貨哦~