基于MOOC視頻的增強交互性的研究與實現(xiàn)

張成林+路宏

摘 要：為解決MOOC在線學習課程缺乏交互性的問題，文章設(shè)計并搭建了一套基于HLS協(xié)議的增強交互性的流媒體服務(wù)器，采用基于OpenCV的SIFT和ORB算法對教學視頻的圖像內(nèi)容進行識別和處理，生成與學習內(nèi)容相關(guān)的信息數(shù)據(jù)，再使用Python、HTML5和JavaScript語言將信息數(shù)據(jù)嵌入到視頻及網(wǎng)頁中，形成具有交互性的學習內(nèi)容，實現(xiàn)增強教學內(nèi)容的交互視頻。

關(guān)鍵詞：樹莓派；交互視頻；OpenCV；Python

中圖分類號：G434 文獻標志碼：A 文章編號：2095-2945（2018）03-0157-03

Abstract： In order to cope with the lack of interactive MOOC online learning course， this paper designs and builds a set of enhanced interactive streaming media server based on HLS protocol. The image content of teaching video is recognized and processed by SIFT and ORB algorithm based on OpenCV， and the information data related to learning content are generated. Then using Python， HTML5 and JavaScript language， the information data were embedded into the video and web pages， forming interactive learning content， so as to enhance the teaching content of interactive video.

Keywords： raspberry pie； interactive video： OpenCV； Python

引言

目前，在線學習已經(jīng)成了一種新興的學習方式，并吸引著廣大的學習愛好者，其中最有影響力的當屬MOOC（Massive Open Online Courses）。然而由于網(wǎng)絡(luò)課程和實體課程在授課形式上的不同，就導致MOOC這種在線學習課程和實體課程相比有一個很大的不足——交互性的缺失，這也是在線課程雖然廣泛流行，卻沒有顯著地提高學習效率的主要原因。

為解決這一問題，本文將設(shè)計并搭建一套基于HLS協(xié)議的增強交互性的流媒體服務(wù)器，實現(xiàn)增強教學內(nèi)容的在線交互視頻。

1 系統(tǒng)的總體設(shè)計

本文搭建了一套基于HLS協(xié)議的增強視頻交互性的流媒體服務(wù)器，系統(tǒng)整體框架如圖1所示。該系統(tǒng)以樹莓派（Raspberry Pi開發(fā)板），搭載Raspbian操作系統(tǒng)，作為基本的視頻服務(wù)器，采用基于HLS協(xié)議的Nginx、FFmpeg和MySQL的視頻服務(wù)器構(gòu)建方案。

在服務(wù)器后臺，使用Python語言進行程序設(shè)計，自動生成嵌入交互元素和教學內(nèi)容的動態(tài)網(wǎng)頁，處理流程如圖2所示。首先，采用基于OpenCV的SIFT和ORB圖像匹配算法，并結(jié)合教學視頻的內(nèi)容和特點，對教學視頻進行預(yù)處理，提取出關(guān)鍵圖像的基本內(nèi)容和信息；之后，對視頻進行預(yù)處理得到的基本數(shù)據(jù)，結(jié)合交互形式以及原始網(wǎng)頁的信息自動生成動態(tài)網(wǎng)頁。

在Web前端，對服務(wù)器后臺自動生成的動態(tài)網(wǎng)頁，基于在線視頻的動態(tài)網(wǎng)頁設(shè)計方法采用HTML5、JavaScript語言來嵌入交互元素，實現(xiàn)具有多種交互方式和內(nèi)容的動態(tài)網(wǎng)頁，以使用戶在網(wǎng)絡(luò)課程的學習中，能夠提高學習效果與效率。

2 硬件系統(tǒng)組成

2.1 硬件設(shè)備

2.1.1 樹莓派。Raspberry Pi是為學習計算機編程教育而設(shè)計，只有信用卡大小的微型電腦，其系統(tǒng)基于Linux，具有視頻及音頻功能。

2.1.2 SD卡。樹莓派中沒有像臺式機硬盤一樣的硬件設(shè)備，取而代之的是SD卡，它的作用類似于固態(tài)硬盤，樹莓派從SD卡中啟動。

2.1.3 電源適配器。樹莓派的電源采用5V micro-USB輸入，同一般手機或平板的電源一致。實際上，一般手機的充電器均可為樹莓派供電。

2.2 樹莓派的基本配置

本文中，樹莓派充當了HLS流媒體服務(wù)器的功能。其基本搭建如下：首先，從樹莓派官網(wǎng)下載Raspbian鏡像，并采用win32diskimager軟件將獲得的鏡像文件寫入SD卡，這里采用的是最新版Raspbian Stretch With Desktop鏡像。然后，將SD卡插入樹莓派并連接好其他外部設(shè)備，接通電源即可工作。

3 軟件搭建及設(shè)計

3.1 流媒體服務(wù)器的搭建

采用基于HLS協(xié)議的Nginx、FFmpeg、MySQL方案搭建流媒體服務(wù)器。

Nginx是一款輕量級的Web 服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器，其特點是占有內(nèi)存少，并發(fā)能力強。Nginx最大的特點是可以進行多模塊的整合，它可以整合其他的開發(fā)模塊實現(xiàn)更加復(fù)雜的功能。例如，Ngx_cache_purge緩存模塊，gnosek_nginx_upstream傳輸?shù)霓D(zhuǎn)換模塊，echo-nginx-module回應(yīng)模塊，zlib壓縮模塊，不過，編譯的時候需設(shè)置很多模塊才能正常使用，否則相應(yīng)的配置項無法使用。

Nginx配合FFmpeg搭建流媒體服務(wù)器的原理是： Nginx通過RTMP模塊提供RTMP服務(wù)，F(xiàn)Fmpeg推送一個RTMP流到Nginx， 然后客戶端通過訪問Nginx來收看實時視頻流.。HLS也是差不多的原理，只是最終客戶端是通過HTTP協(xié)議來訪問的，但是FFmpeg推送流仍然是RTMP的。endprint

MySQL是一種關(guān)系數(shù)據(jù)庫管理系統(tǒng)，關(guān)系數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)，這樣就增加了速度并提高了靈活性。MySQL所使用的 SQL 語言是用于訪問數(shù)據(jù)庫的最常用標準化語言。由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，一般中小型網(wǎng)站的開發(fā)都選擇 MySQL 作為網(wǎng)站數(shù)據(jù)庫。

3.2 服務(wù)器后臺設(shè)計開發(fā)

3.2.1 教學視頻的預(yù)處理。在服務(wù)器后臺使用Python語言進行程序設(shè)計，采用OpenCV的SIFT和ORB圖像匹配算法，并結(jié)合教學視頻的內(nèi)容和特點，對教學視頻進行預(yù)處理，提取出關(guān)鍵圖像的基本數(shù)據(jù)。

（1）SIFT圖像匹配算法。SIFT（Scale-Invariant Feature Transform）算法是一種著名的尺度不變特征檢測算法。SIFT特征正如其名稱一樣是縮放不變的。SIFT在一點處檢測主要梯度方向，根據(jù)這個方向記錄局部梯度直方圖結(jié)果，所以SIFT也是旋轉(zhuǎn)不變的。SIFT特征包括興趣點檢測器和描述子。SIFT描述子具有非常強的穩(wěn)健性。該算法檢測特征時，采用圖像空間和尺度空間的局部最大值，通過求一幅圖中的興趣點（Interest Points or Corner Points）及其有關(guān)尺度和方向的描述子得到特征并進行圖像特征點匹配，具有良好效果。

Python中調(diào)用方法如下：

sift = cv2.xfeatures2d.SIFT_create（）

kp， des = sift.detectAndCompute（img， None）

（2）ORB圖像匹配算法。ORB（Oriented FAST and Rotated BRIEF）算法是對非免費的SIFT和SURF算法的一種替代算法。ORB代表定向FAST和旋轉(zhuǎn)BRIEF。這個縮寫的第一層意思表示關(guān)鍵點檢測，第二層意思表示ORB算法提供的描述子。

ORB首先創(chuàng)建一個圖像金字塔。它由一批圖層組成，每個圖層都是用固定的縮放因子對前一個圖層下采樣得到（典型情況是用8個尺度，縮放因子為1.2，這些參數(shù)可在cv2.ORB_create（）函數(shù)中設(shè)置）。在具有關(guān)鍵點評分的位置，接受N個強度最大的關(guān)鍵點。其中關(guān)鍵點評分用的是Harris角點強度衡量方法（這個方法的作者發(fā)現(xiàn)Harris評分是更可靠的衡量方法）。

ORB檢測器的原理基于一個現(xiàn)象，即每個被檢測的興趣點總是關(guān)聯(lián)了一個方向。這個信息可用于校準不同圖像中檢測到的關(guān)鍵點描述子。ORB算法建議使用關(guān)鍵點周圍的圓形鄰域的重心的方向。因為根據(jù)定義，F(xiàn)AST關(guān)鍵點肯定有一個偏離中心點的重心，中心點與重心的連線的角度總是非常明確的。

Python中調(diào)用方法如下：

orb = cv2.ORB_create（）

kp = orb.detect（img， None）

kp， des = orb.compute（img， kp）

3.2.2 動態(tài)網(wǎng)頁的生成

在服務(wù)器后臺使用Python語言進行程序設(shè)計，將對視頻進行預(yù)處理后得到的基本數(shù)據(jù)，結(jié)合原始網(wǎng)頁與交互形式自動生成動態(tài)網(wǎng)頁。

所謂的動態(tài)網(wǎng)頁，是指跟靜態(tài)網(wǎng)頁相對的一種網(wǎng)頁編程技術(shù)。靜態(tài)網(wǎng)頁，隨著HTML代碼的生成，頁面的內(nèi)容和顯示效果就基本上不會發(fā)生變化。而動態(tài)網(wǎng)頁則不然，頁面代碼雖然沒有變，但是顯示的內(nèi)容卻是可以隨著時間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而發(fā)生改變的。

具體在操作的時候，我們可以使用Python下的爬蟲程序，如scrap、bs4、requests等，但我們初期只是解析一些簡單的視頻網(wǎng)頁，所以用不上scrap這樣的重型武器，只需requests這種簡單輕便的即可。

Requests模塊不包含在標準庫中，需要安裝，Windows和Linux下都可以使用pip安裝：

$ pip install requests

在HTTP相關(guān)處理中，Requests模塊更能簡約的支持完整的簡單用例：

import requests

req = requests.get（'https：//api.github.com/user'，auth=（'user'， 'password'））

print req.status_code

print req.headers['content-type']

print req.encoding

print req.content

print req.json（）['login']

3.3 Web前端設(shè)計開發(fā)

基于在線視頻的動態(tài)網(wǎng)頁設(shè)計采用HTML5、JavaScript語言來嵌入交互元素（鼠標懸停、鍵盤交互以及攝像頭等），實現(xiàn)具有多種交互方式和內(nèi)容的交互式視頻。

所謂交互式視頻，即通過各種技術(shù)手段，將交互體驗融入到線性的視頻的新型視頻。

在前端視頻網(wǎng)頁的設(shè)計上，我們使用最基本的HTML語言來播放視頻，CSS用作排版和美化，但這兩個都只是作為最基本的靜態(tài)網(wǎng)頁框架的搭建，本網(wǎng)頁前端的設(shè)計中，真正開發(fā)最多的還是JavaScript。

JavaScript作為世界上最流行的腳本語言，它是屬于web的語言，廣泛適用于 PC、筆記本電腦、平板電腦和移動電話，所以在此被用來向HTML頁面增加交互性。許多 HTML 開發(fā)者都不是程序員，因為JavaScript擁有非常簡單的語法，幾乎每個人都有能力將小的JavaScript片段添加到網(wǎng)頁中。

在網(wǎng)頁交互的設(shè)計上，我們實現(xiàn)的鼠標隱藏與識別、懸停事件的發(fā)生，以及浮動畫布的顯示等，就是用JavaScript調(diào)用函數(shù)來實現(xiàn)的。

參考文獻：

[1]Gary Bradski，Adrian Kaehler.學習OpenCV[M].于仕琪，劉瑞禎，譯.北京：清華大學出版社，2009：355-356.

[2]Jan Erik Solem.Python計算機視覺編程[M].朱文濤，袁勇，譯.北京：人民郵電出版社，2014：39-40.

[3]Robert Lagannier.OpenCV.計算機視覺編程攻略[M].相銀初，譯.北京：人民郵電出版社，2015：185-186，189-189.

[4]Alexander Mordvintsev，Abid K.OpenCV-Python Tutorials Documentation Release 1[EB/OL].https：//docs.opencv.org/3.3.0/d6/d00/tutorial_py_root.html.endprint