基于MOOC視頻的增強交互性的研究與實現

張成林+路宏

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

關鍵詞：樹莓派；交互視頻；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

引言

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

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

1 系統的總體設計

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

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

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

2 硬件系統組成

2.1 硬件設備

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

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

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

2.2 樹莓派的基本配置

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

3 軟件搭建及設計

3.1 流媒體服務器的搭建

采用基于HLS協議的Nginx、FFmpeg、MySQL方案搭建流媒體服務器。

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

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

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

3.2 服務器后臺設計開發

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

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

Python中調用方法如下：

sift = cv2.xfeatures2d.SIFT_create（）

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

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

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

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

Python中調用方法如下：

orb = cv2.ORB_create（）

kp = orb.detect（img， None）

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

3.2.2 動態網頁的生成

在服務器后臺使用Python語言進行程序設計，將對視頻進行預處理后得到的基本數據，結合原始網頁與交互形式自動生成動態網頁。

所謂的動態網頁，是指跟靜態網頁相對的一種網頁編程技術。靜態網頁，隨著HTML代碼的生成，頁面的內容和顯示效果就基本上不會發生變化。而動態網頁則不然，頁面代碼雖然沒有變，但是顯示的內容卻是可以隨著時間、環境或者數據庫操作的結果而發生改變的。

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

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

$ pip install requests

在HTTP相關處理中，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前端設計開發

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

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

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

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

在網頁交互的設計上，我們實現的鼠標隱藏與識別、懸停事件的發生，以及浮動畫布的顯示等，就是用JavaScript調用函數來實現的。

參考文獻：

[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