注：此方案于2015年實(shí)現(xiàn)，本文已收錄專利册舞，版權(quán)所有骚露。另外蹬挤，部分段落縮減了部分內(nèi)容。
1. 背景
現(xiàn)今在線教育如此火爆棘幸，百花齊放焰扳、百家爭(zhēng)鳴。對(duì)于在線教育一對(duì)一或一對(duì)多實(shí)時(shí)語音答疑的產(chǎn)品方案中误续，有多種方案可以選擇吨悍，優(yōu)點(diǎn)和缺點(diǎn)因人因公司而異。
本方案采用語音和筆跡（板書）相結(jié)合的方式提供在線答疑服務(wù)蹋嵌。
老師通過語音和學(xué)生實(shí)時(shí)通話講解育瓜，并通過老師端的專用答疑本和數(shù)碼筆為學(xué)生進(jìn)行板書書寫，如圖1栽烂。
答疑本和數(shù)碼筆是定制專用硬件產(chǎn)品躏仇，答疑本上布有專用數(shù)據(jù)點(diǎn)陣，數(shù)碼筆通過USB線和電腦相連腺办。書寫的過程中焰手，數(shù)碼筆采集到本子上的點(diǎn)陣位置，并實(shí)時(shí)傳輸?shù)絇C老師端（圖2）怀喉；
并通過專有服務(wù)器將筆跡數(shù)據(jù)轉(zhuǎn)發(fā)傳輸?shù)綄W(xué)生手機(jī)端APP（圖3）上進(jìn)行描繪出來书妻，同時(shí)對(duì)這一過程進(jìn)行錄播，達(dá)到語音筆跡同步播放的效果躬拢。
圖2躲履、圖3是實(shí)際答疑過程中的截圖见间，圖4是答疑結(jié)束后回放的截圖。
在線答疑業(yè)務(wù)中需要對(duì)老師和學(xué)生答疑過程進(jìn)行現(xiàn)場(chǎng)還原崇呵，需要對(duì)這一過程進(jìn)行錄制缤剧，并在答疑結(jié)束后立即由PC老師端上傳文件到云端馅袁，以便在PC或APP瀏覽器端域慷、APP移動(dòng)端進(jìn)行回放。一方面以供后期學(xué)生對(duì)歷史答疑記錄進(jìn)行知識(shí)點(diǎn)的回放和溫故總結(jié)汗销；另一方面供內(nèi)部審核犹褒，一是審核當(dāng)前答疑老師或?qū)W生是否進(jìn)行了違規(guī)操作、不當(dāng)?shù)难哉Z或老師不用心的講解等弛针，二是審核并且自動(dòng)或人工檢測(cè)當(dāng)前的語音通話質(zhì)量叠骑、筆跡傳輸是否完整和合格。
一種簡(jiǎn)單的方案是削茁，在PC老師端由錄屏軟件錄制音頻和筆跡宙枷，然后壓縮編碼成視頻格式(通用mp4格式)并上傳到后端云存儲(chǔ)服務(wù)。好處是在各類平臺(tái)（如app或pc端）通過html5 video標(biāo)簽自由回放視頻文件茧跋。弊端是：資源和帶寬浪費(fèi)慰丛，因?yàn)橐曨l本身的壓縮會(huì)很耗時(shí)，可能導(dǎo)致PC老師端答疑軟件特別卡頓瘾杭，另外存儲(chǔ)文件的大小也很大（比如1個(gè)小時(shí)的480p/15fps/500Kbps的視頻大小可能達(dá)到200M）诅病，造成本地磁盤和上傳帶寬壓力大大增大，同時(shí)如果文件是存儲(chǔ)在第三方云存儲(chǔ)上的話粥烁，價(jià)格也會(huì)大大增加贤笆；另外PC老師端軟件窗口大小不能調(diào)節(jié)變化，因?yàn)槿绻翱诖笮∽兓肿瑁浧料聛淼囊曨l畫面將會(huì)不一致芥永，導(dǎo)致用戶體驗(yàn)大打折扣。
另外一種方案是钝吮，由中轉(zhuǎn)服務(wù)器或者從中轉(zhuǎn)服務(wù)器引出一路監(jiān)聽者的身份的服務(wù)器（錄制上傳服務(wù)器）來錄制語音（.mp3）和筆跡（.pen自定義格式）文件埋涧，并分開標(biāo)記上傳到云存儲(chǔ)服務(wù)，在app或pc端通過自定義的播放器來播放搀绣。好處是不占用PC老師端的任何額外資源飞袋；其次，因?yàn)槭窃诜?wù)器端錄制链患，不需要PC老師端上傳邏輯巧鸭，這樣答疑完能立即實(shí)時(shí)生成播放文件鏈接。弊端是：消耗服務(wù)器資源麻捻，需要部署多臺(tái)錄制上傳服務(wù)器專門用來做錄制和上傳纲仍；其次不能保證老師端和學(xué)生端的語音和筆跡的完整性呀袱，因?yàn)橹修D(zhuǎn)服務(wù)器在不可用的情況下會(huì)自動(dòng)切換為p2p的形式直連，這樣是不能錄制到語音和筆跡的郑叠；另外也不能保證至少一端的語音通話質(zhì)量（回音夜赵、噪音等），因?yàn)槔蠋煻撕蛯W(xué)生端的語音需要各端的語音引擎分別處理優(yōu)化后才能通過外放播放乡革。
綜合以上情況寇僧，我們可以看出，在線實(shí)時(shí)答疑錄播存在以下難點(diǎn)：
難點(diǎn)1：數(shù)據(jù)壓縮問題沸版。在非wifi情況下的回放答疑歷史記錄嘁傀，需要保證在回放體驗(yàn)的基礎(chǔ)上將流量消耗降到最低。
難點(diǎn)2：數(shù)據(jù)完整性問題视粮。由于PC客戶端軟件可能異常退出细办，所以對(duì)于已經(jīng)錄制的語音和筆記需要保證沒有臟數(shù)據(jù)，播放器也能正常的播放出蕾殴。
難點(diǎn)3：筆跡和語音同步問題笑撞。由于在錄制時(shí)是分別錄制語音和筆跡，同時(shí)在PC客戶端出現(xiàn)異常退出后恢復(fù)時(shí)繼續(xù)上次的語音和筆記錄制钓觉，所以在播放時(shí)需要對(duì)兩者進(jìn)行同步匹配茴肥，不然就會(huì)出現(xiàn)語音和筆跡脫節(jié)不同步，從而影響播放體驗(yàn)议谷。
難點(diǎn)4：播放器效率問題炉爆。由于在移動(dòng)端設(shè)備方面存在IOS和安卓等平臺(tái)的差別，而且基于安卓平臺(tái)卧晓，更有各種手機(jī)廠商數(shù)千款手機(jī)產(chǎn)品芬首，每種產(chǎn)品的設(shè)備配置和性能參數(shù)都不盡相同，所以定制化的播放器（基于html5）需要適配所有這些機(jī)型的兼容問題逼裆，并且在繪制筆跡時(shí)盡量減少cpu的消耗郁稍，尤其是在大步長的seek進(jìn)度條時(shí)，繪制效率更需要考慮胜宇。
綜合以上的討論和難點(diǎn)耀怜，提出了一種更優(yōu)化可靠的方案，即在PC老師端實(shí)時(shí)錄制老師和學(xué)生的語音（.mp3）和筆跡（.pen自定義格式）文件桐愉，分別保存在磁盤指定目錄财破，在答疑結(jié)束后通過deamon進(jìn)程循環(huán)掃描式上傳（斷點(diǎn)續(xù)傳）到云存儲(chǔ)服務(wù)器，定制化的播放器從云端請(qǐng)求播放語音和筆跡从诲。這樣可以保證老師端和學(xué)生端的語音質(zhì)量（本地回音左痢、噪音消除等）；不需要額外的服務(wù)器資源，節(jié)省了成本俊性，完全在PC老師端機(jī)器上完成錄制和上傳略步；充分壓縮錄制文件，減少帶寬和存儲(chǔ)壓力定页；定制化的播放器可以更優(yōu)的回放語音和筆跡趟薄。
2 在線答疑錄播流程
2.1 業(yè)務(wù)流程
圖5所示為答疑錄播的整體流程，在老師接單并建立了答疑通道后典徊，開始答疑杭煎，答疑結(jié)束后上傳語音和筆跡，并存儲(chǔ)和通知后臺(tái)記錄宫峦，供播放器回放岔帽。
老師和學(xué)生建立連接后玫鸟，老師使用數(shù)碼筆在答疑筆記本上書寫要講解的內(nèi)容导绷，實(shí)時(shí)采樣并通過USB線傳輸給PC老師端；同時(shí)采集PC本地音頻設(shè)備來捕獲老師語音屎飘。
通過網(wǎng)絡(luò)中轉(zhuǎn)服務(wù)器妥曲，老師端將語音和筆跡數(shù)據(jù)發(fā)送給學(xué)生端，同時(shí)學(xué)生端采集手機(jī)端語音發(fā)送給老師端钦购，PC老師端實(shí)時(shí)保存老師和學(xué)生的語音到mp3文件檐盟，保存筆跡到自定義pen格式的文件。
在整個(gè)答疑結(jié)束后押桃，隨機(jī)啟動(dòng)的deamon子進(jìn)程對(duì)當(dāng)前答疑文件通過內(nèi)網(wǎng)域名斷點(diǎn)續(xù)傳到反向代理服務(wù)器葵萎，語音和筆跡文件是順序傳輸?shù)模凑Z音文件傳輸完成后傳輸筆跡文件），并且進(jìn)程會(huì)自動(dòng)檢測(cè)當(dāng)前上行網(wǎng)絡(luò)帶寬唱凯，自動(dòng)調(diào)整上傳速率羡忘，保證不影響正常答疑。另外此deamon子進(jìn)程負(fù)責(zé)紀(jì)錄對(duì)應(yīng)答疑訂單號(hào)下的每個(gè)文件的上傳進(jìn)度和狀態(tài)信息到本地?cái)?shù)據(jù)庫磕昼，并且循環(huán)掃描指定的本地存儲(chǔ)目錄卷雕，保證對(duì)所有未完成的文件進(jìn)行斷點(diǎn)續(xù)傳。
反向代理服務(wù)器首先初步驗(yàn)證客戶端上傳片段請(qǐng)求的合法性票从，驗(yàn)證成功后通過負(fù)載均衡策略匹配到合適的單個(gè)業(yè)務(wù)服務(wù)器漫雕，否則拒絕此次上傳片段請(qǐng)求；業(yè)務(wù)服務(wù)器再進(jìn)一步驗(yàn)證請(qǐng)求的頭部字段峰鄙、token浸间、文件格式和類型，驗(yàn)證成功后本地存儲(chǔ)分片到對(duì)應(yīng)的文件里吟榴，否則拒絕此次上傳片斷請(qǐng)求魁蒜。
單個(gè)片段上傳成功后，反向代理服務(wù)器返回http 201響應(yīng)給deamon子進(jìn)程，直到整個(gè)文件全部分段傳完后返回http 200響應(yīng)梅惯，失敗返回錯(cuò)誤響應(yīng)宪拥。這樣一個(gè)文件就算傳輸完成，同時(shí)deamon子進(jìn)程刪除本地?cái)?shù)據(jù)庫對(duì)應(yīng)的狀態(tài)紀(jì)錄和文件铣减，否則本地?cái)?shù)據(jù)庫紀(jì)錄對(duì)應(yīng)文件上傳進(jìn)度和狀態(tài)她君，以便下一次掃描再傳輸。
當(dāng)一個(gè)文件傳輸完成后葫哗，業(yè)務(wù)服務(wù)器負(fù)責(zé)將臨時(shí)存儲(chǔ)在反向代理服務(wù)器本地磁盤的文件缔刹，生成全局唯一的文件名作為key（語音以.mp3為后綴，筆跡以.pen為后綴）劣针，通過第三方云服務(wù)api上傳到云存儲(chǔ)里校镐，成功后同時(shí)刪除本地文件，否則保留捺典。轉(zhuǎn)到第5步返回狀態(tài)給deamon子進(jìn)程鸟廓。
當(dāng)文件傳輸?shù)降谌皆贫朔?wù)器后，通知后臺(tái)web服務(wù)器文件上傳成功襟己，后臺(tái)服務(wù)紀(jì)錄對(duì)應(yīng)答疑訂單號(hào)下的各個(gè)文件url到數(shù)據(jù)庫中引谜，同時(shí)轉(zhuǎn)到第5步返回狀態(tài)給deamon子進(jìn)程。
將指定訂單號(hào)下的語音和筆跡url傳到定制化播放端擎浴，播放器解析筆跡數(shù)據(jù)员咽，將相對(duì)于語音的相對(duì)時(shí)間戳與語音時(shí)間軸進(jìn)行同步化匹配，并最終呈現(xiàn)出來贮预。
2.2 關(guān)鍵技術(shù)
2.2.1 筆跡數(shù)據(jù)高效壓縮
對(duì)于要在PC端贝室、web端或app端能同時(shí)兼容播放渲染筆跡數(shù)據(jù)，同時(shí)為了保證瀏覽器跨域問題仿吞，設(shè)計(jì)了一種高效通用的筆跡數(shù)據(jù)包格式（jsonp格式）滑频，這樣當(dāng)瀏覽器讀取筆跡文件后可以直接內(nèi)部解析成json數(shù)據(jù)。如下圖為筆跡數(shù)據(jù)格式茫藏。
其中：
hw_h表示筆跡數(shù)據(jù)頭误趴，hw_b表示筆跡數(shù)據(jù)體。
hw_h中：此字段存在的目的是為了在播放器進(jìn)度條上明確標(biāo)記老師的狀態(tài)進(jìn)行打點(diǎn)务傲。比如跳過審題狀態(tài)凉当，直接到達(dá)開始講解階段。
s:表示老師的狀態(tài)（0：審題階段售葡；1：開始講解階段看杭；其他預(yù)留）。
t: 表示當(dāng)前老師狀態(tài)對(duì)應(yīng)的點(diǎn)的相對(duì)時(shí)間戳（相對(duì)于音頻開始時(shí)間戳(采集時(shí)間)的時(shí)間（毫秒））挟伙。
hw_b中：
t: 表示當(dāng)前點(diǎn)相對(duì)于音頻開始的相對(duì)時(shí)間戳(采集時(shí)間)的時(shí)間（毫秒）楼雹。
c: 表示筆記相關(guān)命令操作，按位操作。第1位：0表示筆書寫贮缅，1表示筆懸刚ジ馈；第2-4位：表示筆跡的顏色谴供。
s: 筆跡的分頁號(hào)块茁。
x1、y1桂肌、x2数焊、y2: 表示點(diǎn)的開始和結(jié)束。
2.2.2 語音和筆跡完整性錄制
當(dāng)PC老師端錄制語音時(shí)崎场，老師端和學(xué)生端分別經(jīng)過回音消除佩耳、噪聲抑制處理之后，對(duì)生成出來的PCM信號(hào)進(jìn)行采樣谭跨、壓縮干厚、并實(shí)時(shí)編碼成mp3雙聲道數(shù)據(jù)。比如16KHZ 的PCM數(shù)據(jù)每10ms生成長度為160的采樣包饺蚊。如下圖為老師和學(xué)生的PCM信號(hào)包對(duì)齊合并編碼包萍诱。理論上老師和學(xué)生端的語音基本是同步的，如果對(duì)于通話過程中某一方語音信號(hào)丟失污呼，或者某一端等待另一端PCM信號(hào)包超時(shí)，那么需要用對(duì)應(yīng)長度的靜音包來填充包竹，避免出現(xiàn)語音不同步的情況燕酷。
如果PC老師端因?yàn)橐馔馇闆r退出后再恢復(fù)時(shí)，會(huì)接著當(dāng)前訂單的語音繼續(xù)錄制周瞎。如下圖為意外恢復(fù)情況下時(shí)間戳校對(duì)策略苗缩。假設(shè)時(shí)間戳單位是秒，PC老師端在第5秒的時(shí)候意外退出声诸，在第20秒時(shí)恢復(fù)酱讶，在第26秒時(shí)答疑結(jié)束夜矗，那么此時(shí)整個(gè)答疑時(shí)間是11秒（即語音時(shí)長）刁笙。在第20秒恢復(fù)時(shí)，獲取已經(jīng)錄制的第一階段mp3時(shí)長（5秒）拧揽，并且seek到最后一個(gè)sample位置接著寫入語音sample慰照，之后每個(gè)筆跡包的相對(duì)時(shí)間戳都需要減去斷開階段的時(shí)長繼續(xù)錄制灶挟。
2.2.3 高效定制化播放
設(shè)計(jì)了一種定制化的播放器，采用html5進(jìn)行播放和渲染毒租，筆跡(.pen)采用基于canvas的繪制稚铣，語音(.mp3)采用audio標(biāo)簽播放。如圖9為播放器加載語音和筆跡的流程。
2.2.3.1 自適應(yīng)分辨率策略
因?yàn)楣P跡本上的分辨率和要顯示播放設(shè)備的分辨率不一樣惕医，所以需要轉(zhuǎn)換為要播放的設(shè)備窗口的分辨率耕漱。如圖10為自適應(yīng)選擇目標(biāo)窗口分辨率策略。
因?yàn)樵谑謾C(jī)端縮放時(shí)對(duì)點(diǎn)的本身分辨率會(huì)造成影響抬伺，這時(shí)需要記錄scale 為window.devicePixelRatio孤个，對(duì)于每個(gè)點(diǎn)坐標(biāo)e(x,y)做等比例（因子r(x,y)）縮放調(diào)整，即f(x,y)= e(x,y)r(x,y)scale沛简。
2.2.3.2 繪制筆跡流程
對(duì)于筆跡每一頁動(dòng)態(tài)創(chuàng)建一個(gè)canvas來顯示當(dāng)前頁號(hào)下所有的點(diǎn)線齐鲤，通過頁號(hào)來映射canvas。頁面每次只會(huì)有一個(gè)canvas顯示出來椒楣，其他的canvas隱藏给郊。如果下一個(gè)點(diǎn)的頁號(hào)和當(dāng)前繪制的頁號(hào)不同，則繼續(xù)創(chuàng)建一個(gè)canvas和頁號(hào)映射關(guān)聯(lián)捧灰，并且切換為當(dāng)前顯示的canvas淆九。出于效率考慮，每30個(gè)點(diǎn)線stroke一次毛俏。
2.2.3.3 seek進(jìn)度條流程
對(duì)于手機(jī)端來說炭庙，電量和繪制效率是重點(diǎn)要考慮的，尤其對(duì)于canvas的seek繪圖效率問題更應(yīng)該重視煌寇，當(dāng)一次性繪制超過上萬個(gè)點(diǎn)線時(shí)焕蹄，會(huì)暫用大量的臨時(shí)內(nèi)存，并且cpu瞬時(shí)達(dá)到峰值阀溶，這樣會(huì)導(dǎo)致app意外退出腻脏。
如果在當(dāng)前頁之內(nèi)seek：向后seek的話就seek到指定位置，繪出當(dāng)前播放點(diǎn)到指定seek點(diǎn)內(nèi)的所有當(dāng)前頁號(hào)的筆跡點(diǎn)線银锻；如果向前seek則清空當(dāng)前頁號(hào)的canvas內(nèi)的所有筆跡點(diǎn)線永品，繪出當(dāng)前頁號(hào)開始點(diǎn)到指定seek點(diǎn)內(nèi)的所有當(dāng)前頁號(hào)的筆跡點(diǎn)線。
如果在當(dāng)前頁之外seek：清空當(dāng)前canvas击纬，繪制seek點(diǎn)位置對(duì)應(yīng)的頁號(hào)的開始點(diǎn)到seek點(diǎn)內(nèi)的所有當(dāng)前頁號(hào)的筆跡點(diǎn)線鼎姐，同時(shí)將seek點(diǎn)對(duì)應(yīng)的頁號(hào)映射的canvas設(shè)置為顯示狀態(tài)。
