基于React Native框架的音視頻管理系統(tǒng)的實現(xiàn)

陳桂蓉，商麗娟

（廣東東軟學(xué)院 廣東 佛山 528225）

1 引言

隨著智能手機和多媒體的不斷發(fā)展，人們可以隨時隨地使用手機觀看視頻和收聽音樂，因此在移動端涌現(xiàn)出了各種各樣的視頻平臺和音頻平臺。在移動端，用戶從各個平臺下載下來的音視頻文件一般存儲在手機中，如果手機存儲空間不夠則只能刪除文件。本系統(tǒng)旨在給個人用戶提供一個音視頻管理平臺，用戶可以將手機中存儲的音視頻文件上傳到系統(tǒng)的服務(wù)器中進行存儲，這樣用戶就擁有大量的空間存儲音視頻文件，并可以通過該系統(tǒng)對已上傳的音視頻文件進行管理。

React Native是Facebook于2015年4月在React前端框架基礎(chǔ)上開源的跨平臺移動應(yīng)用開發(fā)框架[1]。開發(fā)者通過React的聲明式組件機制和JavaScript代碼，就可以完成一個可運行在iOS和Android平臺的移動應(yīng)用程序，極大地提升開發(fā)效率[2]。本系統(tǒng)使用React Native作為移動端的開發(fā)框架。

用戶在音視頻管理平臺上傳的音視頻默認只能自己查看，用戶也可以主動將自己的音視頻進行分享。用戶可以對已分享的音視頻進行查看、評分和收藏，但是系統(tǒng)暫時不提供下載服務(wù)。

2 登錄和注冊

用戶進入應(yīng)用后首先顯示登錄頁，用戶首次登錄成功后，使用async-storage組件存儲登錄用戶的賬號和密碼，下次自動登錄，直接進入應(yīng)用首頁。

如果是新用戶則先注冊，系統(tǒng)對用戶填寫信息進行校驗后，通過fetch語句向系統(tǒng)服務(wù)端發(fā)送post請求。服務(wù)端接收到用戶的注冊信息后再次進行校驗，例如校驗用戶名和郵箱是否在數(shù)據(jù)庫中是唯一的，校驗完成后將用戶的注冊信息存儲到數(shù)據(jù)庫中。服務(wù)端通過JWT機制，根據(jù)用戶ID和用戶名等私有數(shù)據(jù)設(shè)置認證token，并將token返回給手機客戶端，作為登錄憑證。注冊登錄成功后，將用戶信息和token通過async-storage組件存儲在本地文件中，然后跳轉(zhuǎn)到首頁。

3 底部導(dǎo)航欄

底部導(dǎo)航欄包含4個頁面，如圖1所示，默認先顯示“首頁”，首頁的輪播圖使用react-native-swipe組件完成。

圖1 底部導(dǎo)航欄及其頁面

“首頁”顯示最新分享和評分較高的音視頻，用戶可以點擊播放按鈕進行播放，如果喜歡該音視頻可以點擊收藏按鈕收藏該音視頻。“音樂”和“視頻”兩個頁面分別顯示用戶個人上傳的音頻文件和視頻文件，用戶可對頁面中的音視頻文件進行播放、編輯、刪除、分享等操作?！拔业摹表撁骘@示用戶的個人信息。

應(yīng)用程序使用react-navigation組件完成底部導(dǎo)航欄和頁面間跳轉(zhuǎn)。react-navigation提供了簡單易用的跨平臺導(dǎo)航方案，在iOS和Android上都可以進行翻頁式、tab選項卡式和抽屜式的導(dǎo)航布局。

應(yīng)用程序中所有的圖標都是使用矢量圖標庫reactnative-vector-icons中的圖標。矢量圖是使用直線和曲線，通過數(shù)學(xué)公式計算獲得，所以矢量圖不僅體積小，而且放大、縮小或旋轉(zhuǎn)都不會失真，非常適合作為應(yīng)用程序的圖標。react-native-vector-icons是在GitHub上最火的React Native矢量圖標庫，它包含了十幾個圖標庫一萬多個圖標，幾乎涵括了所有常用的圖標，方便開發(fā)者進行開發(fā)。

4 音頻和視頻播放頁

點擊音頻頁中的播放按鈕后跳轉(zhuǎn)到音頻播放頁。音頻播放頁顯示當前播放音頻的具體信息，包括評分、音頻時長和當前播放進度，見圖2。

圖2 音頻和視頻播放頁

頁面中的星級評分使用react-native-star-rating組件，可以通過組件的屬性starSize、buttonStyle、starStyle、fullStarColor設(shè)置星型圖標的大小、顏色、間距，屬性maxStars設(shè)置最大值，屬性rating和selectedStar設(shè)置評分值。

音頻和視頻都是使用組件react-native-video進行播放控制，用戶通過進度條組件slider與正在播放的音視頻進行交互。React Native通過state來管理數(shù)據(jù)，React內(nèi)部會監(jiān)聽state的變化，state的值一旦變化就重新渲染頁面，音視頻播放的部分代碼如下：

this.state={

paused: false, //是否暫停音頻播放

playImg: 'pause',//播放/暫停圖片

currentTime: 0.0, //當前播放時間

duration: 0.0, //當前音視頻的總時長

} //設(shè)置音視頻播放組件Video

paused={this.state.paused} onLoad={this.onLoad}

onProgress={this.onProgress} />

onValueChange={this.onValueChange}/>

//拖動或點擊進度條，音頻跳轉(zhuǎn)到相應(yīng)的播放進度

onValueChange = (value) => { this.video.seek(value); }

//音頻加載完成時獲取時長，作為進度條的最大值

onLoad = (data) => {

this.setState({ duration: data.duration }); }

//每隔一段時間獲取音頻播放進度，更新進度條

onProgress = (data) => {

this.setState({ currentTime: data.currentTime }); }

視頻需要移動設(shè)備進行橫屏播放，這就要用到react-native-orientation組件來控制橫豎屏的顯示。React Native組件的生命周期分為3個階段，分別是實例化階段、存在階段和銷毀階段，每個階段都有相應(yīng)的生命周期函數(shù)[3]。componentDidMount()屬于實例化階段的最后一個函數(shù)，組件渲染完成后執(zhí)行該函數(shù)。componentWillUnmount()屬于銷毀階段的函數(shù)，在組件銷毀前執(zhí)行該函數(shù)。橫豎屏切換的主要代碼如下：

componentDidMount() { //視頻播放前切換橫屏

Orientation.lockToLandscape(); }

componentWillUnmount() { //退出頁面前切換豎屏

Orientation.lockToPortrait(); }

5 音視頻上傳頁面

音視頻上傳使用react-native-document-picker選擇需要上傳的文件，選擇文件之后，使用react-native-fs將選擇的文件上傳到服務(wù)器；見圖3

圖3 上傳音視頻頁面

使用react-native-document-picker可獲取本地文件，它提供兩個API來打開文件選擇器。DocumentPicker.pick(options)只能選擇一個文件，DocumentPicker.pickMultiple(options)則可以選擇多個文件。在本系統(tǒng)中，由于每個音視頻文件都要填寫信息，因此使用DocumentPicker.pick(options)每次只能選擇一個文件。react-native-document-picker提供屬性DocumentPicker.types.*設(shè)置所選文件的類型，它提供了一些常用的文件類型，例如images、video、pdf等。選擇文件后，返回文件路徑uri、文件類型type、文件名name和文件大小size。

使用react-native-fs可以訪問本地文件系統(tǒng)，支持文件的創(chuàng)建、刪除、查看、上傳和下載，音視頻文件上傳的部分代碼如下：

RNFS.uploadFiles({ //執(zhí)行文件上傳

toUrl: uploadUrl, //文件上傳路徑

files: files, //上傳的音視頻文件和圖片文件

method: 'POST', //HTTP請求方法

headers: {'Accept': 'application/json'},

fields: {title: this.state.title},//音視頻文件信息

begin: uploadBegin, //上傳開始回調(diào)

progress: uploadProgress //上傳進度回調(diào)

}).promise.then((response) => { //HTTP response響應(yīng)

if (response.statusCode == 200) {

//文件上傳成功

} else { console.log('SERVER ERROR'); }

}).catch((err) => { //HTTP請求異常

if(err.description === "cancelled") {//取消上傳}})。

6 服務(wù)端管理頁面

無論是用戶登錄還是上傳查看音視頻文件，都需要與服務(wù)器進行交互。系統(tǒng)服務(wù)端使用springboot作為webMVC框架，mybatis作為數(shù)據(jù)訪問框架，jwt機制來生成登錄憑證，swagger自動生成接口文檔，MySQL作為數(shù)據(jù)庫，RuoYi管理系統(tǒng)對數(shù)據(jù)庫中的數(shù)據(jù)進行管理。系統(tǒng)管理員可以通過管理系統(tǒng)管理所有的用戶和音視頻內(nèi)容，見圖4。

圖4 后臺管理界面

7 數(shù)據(jù)庫設(shè)計

音視頻管理平臺主要有4個數(shù)據(jù)庫表，分別是用戶表、分類表、音視頻表和收藏表，其關(guān)系見圖5。

圖5 數(shù)據(jù)庫關(guān)系圖

（1）用戶表：存儲普通用戶的信息。

（2）分類表：存儲用戶創(chuàng)建的分類，一個用戶對應(yīng)多個分類。

（3）音視頻表：存儲用戶上傳的音視頻文件信息，一個用戶可上傳多個音視頻文件，一個分類對應(yīng)多個音視頻文件。

（4）收藏表：存儲用戶收藏的音視頻文件信息。

8 結(jié)語

本文所完成的音視頻管理平臺實現(xiàn)了比較基本的功能，上傳音視頻文件和在線播放音視頻等，系統(tǒng)還需要從以下幾個方面進行改進：（1）首頁進行個性化推薦。當前首頁的內(nèi)容只是根據(jù)分享時間和評分來推薦，系統(tǒng)應(yīng)該根據(jù)用戶上傳和收藏的內(nèi)容進行個性化推薦。（2）增加音視頻修復(fù)功能。音視頻管理系統(tǒng)可以給普通用戶提供修復(fù)視頻畫質(zhì)和修復(fù)音頻音質(zhì)的功能，介面操作要簡單明了，從而吸引用戶使用。（3）用戶可以一次性上傳多個音視頻文件。當前系統(tǒng)只能一次上傳一個音視頻文件，用戶應(yīng)該一次可以上傳多個音頻或視頻文件，方便操作。