基于React Native框架的音視頻管理系統的實現

陳桂蓉，商麗娟

（廣東東軟學院 廣東 佛山 528225）

1 引言

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

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

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

2 登錄和注冊

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

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

3 底部導航欄

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

圖1 底部導航欄及其頁面

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

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

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

4 音頻和視頻播放頁

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

圖2 音頻和視頻播放頁

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

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

this.state={

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

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

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

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

} //設置音視頻播放組件Video

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

onProgress={this.onProgress} />

onValueChange={this.onValueChange}/>

//拖動或點擊進度條，音頻跳轉到相應的播放進度

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

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

onLoad = (data) => {

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

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

onProgress = (data) => {

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

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

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

Orientation.lockToLandscape(); }

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

Orientation.lockToPortrait(); }

5 音視頻上傳頁面

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

圖3 上傳音視頻頁面

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

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

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

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

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

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

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

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

begin: uploadBegin, //上傳開始回調

progress: uploadProgress //上傳進度回調

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

if (response.statusCode == 200) {

//文件上傳成功

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

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

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

6 服務端管理頁面

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

圖4 后臺管理界面

7 數據庫設計

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

圖5 數據庫關系圖

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

（2）分類表：存儲用戶創建的分類，一個用戶對應多個分類。

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

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

8 結語

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