張成林+路宏

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

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

中圖分類號(hào)：G434 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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

引言

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

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

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

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

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

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

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

2.1 硬件設(shè)備

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

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

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

2.2 樹莓派的基本配置

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

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

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

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

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

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

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

3.2 服務(wù)器后臺(tái)設(shè)計(jì)開發(fā)

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

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

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

sift = cv2.xfeatures2d.SIFT_create（）

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

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

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

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

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

orb = cv2.ORB_create（）

kp = orb.detect（img， None）

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

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

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

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

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

Requests模塊不包含在標(biāo)準(zhǔn)庫中，需要安裝，Windows和Linux下都可以使用pip安裝：

$ pip install requests

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

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è)計(jì)開發(fā)

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

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

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

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

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

參考文獻(xiàn)：

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

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

[3]Robert Lagannier.OpenCV.計(jì)算機(jī)視覺編程攻略[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