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

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

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

沒有攝像頭。比如一個PC機，有些是沒有攝像頭。如果想要進行視頻教育，需要額外買一個攝像頭。這就是用戶端遇到的問題。

背景比較混亂。一個孩子在固定的電腦前，因為身後的背景比較混亂，可能會不太願意打開視頻。固定電腦沒有辦法很好地移動，這也是一個問題。

終端設備多樣。大家使用的是iPad、手機以及各種各樣的電腦，這是多樣設備適配的問題。

設備調試。設備的調試跟上一個問題相輔相成，我們發現一些教育客戶，要花很多能力給它的C端用戶做培訓，手機上沒有聲音，聲音變小了，或者類似各種各樣的問題，他要花很多人力進行遠程電話支持，你要怎麼操作。

教務系統多種。這是面對SaaS客戶遇到的問題，沒有辦法接入到排課系統。

網路延遲、視頻卡頓。目前為止沒有一個特別完美的解決方法，只能說行業在不斷進行優化，提升體驗。

以上是我列出的問題。有人提到音視頻延遲這部分的問題，音頻很流暢，但是視頻不行，這個技術問題可以歸為視頻卡頓中。

小程序音視頻是怎麼解決這個問題的呢？先說一下方案介紹。

零基礎快速對接。這個比較好理解。小程序提供音視頻組件JS API，無須具備音視頻基礎知識就可以進行應用。

卓越的音視頻品質。騰訊已經做了十幾年，從QQ時代就有視頻通話，質量是端到端、400毫秒以下的延遲、800毫秒的網路抖動，30%丟包。

跨平台互通。小程序、安卓、IOS、Web端，都可以用它的SDK去解決這個問題。

我們為什麼會看好小程序音視頻在教育行業的應用呢？

首先是統一的平台」微信OS」，主要有以下幾點：

第一，統一的賬戶系統。一個APP需要用戶去註冊登錄，而微信有用戶頭像，有完備的用戶信息, 這是微信已經做好的。

第二，標準的介面。小程序的介面很標準，只要記住兩個東西就可以，一個是上，一個是下。這兩個有相關的介面，只要記住有上有下就可以了。

第三，極簡的API。

第四，軟硬體遍解碼底層適配。如果你做音視頻相關的解決方案，尤其是安卓端，iOS還好一些。安卓端因為每個平台硬體的底層不太一樣，需要進行適配，比如高通的、三星的、英特爾的晶元，可能每家每個型號的晶元、表現都不一樣，這時就需要花很長的時間做適配。我們做這個東西就很痛苦，沒有辦法通過簡單的代碼來解決。

在小程序里就不需要擔心了，騰訊基於多種機型的適配，已經做得比較完善了。

第五，降噪回升消除。為什麼有回聲？背景為什麼那麼噪雜？這是比較難解決的問題，行業里真正做得好的只有很少一部分。

第六，統一的操作路徑。小程序都是一樣的規範、一樣的操作，這些都是非常統一的。

以上是統一平台的部分，下面介紹非常低廉的群傳播、打開成本。這是我們的界面，相當於創建一個課堂之後，小程序為你提供了分享的介面，可以做分享的動作。它的分享成本非常低廉。我們假設在原生的APP場景分享了一個鏈接之後，別人需要下載一個APP進行註冊，再回到那個房間、教室，小程序可以極大地簡化這個流程。

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

那麼我們是怎麼做的呢？我們剛開始就做了一些小的嘗試，內部已經有了產品，下面主要為大家講一下這個過程中的幾點。

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

下面介紹一下產品設計的時候需要特別注意的部分，因為音視頻是一個原生組件，它的層級比其他都要高，這時不能做複雜的交互。簡單的滑動還可以做，其他的複雜交互不太好做，比如動畫、放大、縮小，很容易造成閃退。最好布局和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，很快地跑起來看到是什麼效果。如果真正做深的話，還要基於自己的理解去封裝一套東西。

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

視頻原生組件，不能做太多複雜的交互。視頻的部分，它的原生組件，在視頻上沒有辦法做複雜的交互。比如視頻之上不能覆蓋東西，或者只能覆蓋一些比較簡單的東西，基於視頻的動畫也不可以。

品類限制。現在只有四個品類，限制比較多。教育品類已經開放，大家可以使用，也希望可以開放更多的品類，做出更多的場景。

不支持pad。在相對大屏上是不可以的，只能用PC端的產品來進行替代。

不支持模擬器調試。正常開發一個場景，在寫完代碼後，用這個手機掃一下，另外一個手機再掃一下，調試過程相對痛苦，希望可以支持中遠程去調試。

上傳文件的限制。這是操作系統的限制，不是小程序的限制。我們希望在操作系統進化的時候，小程序也將相應的能力提升上去。

Q/A

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

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

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

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

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

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！