如何用騰訊雲打造一款微視頻APP

版權聲明：本文由騰訊雲原創文章，轉載請註明出處: 
文章原文連接：https://www.qcloud.com/community/article/196

來源：騰雲閣 https://www.qcloud.com/community

 

產品的整個技術實現架構由Android/iOS APP、業務服務器以及騰訊雲服務組成。其中，APP負責和用戶進行交互，包含的功能模塊有：

1. 註冊登陸（支持微信、QQ等第三方帳號登陸）
2. 拍照/錄像
3. 上傳到雲（騰訊雲對象存儲COS+內容分發網絡CDN）
4. 視頻播放（本地播放/雲端點播）
5. 語音識別（騰訊雲智能語音服務Artificial Audio Intelligence）
6. 圖片處理（騰訊雲萬象優圖的圖片處理和智能鑑黃服務）

考慮到咱們的業務類型和開發團隊的技術基礎，咱們選用的後臺技術架構是Struts+Hibernate+Spring+MySql，前端爲Android和iOS。

爲便於快速開發和可靠擴展，對於關鍵技術難點——圖片、音頻、視頻等大量非結構化數據的上傳、存儲和點播，咱們採用騰訊雲提供的對象存儲（COS：Cloud Object Service）和內容分發網絡（CDN：Content Delivery Network）做爲實現方案。這樣，後臺的MySql數據庫中就只須要存儲圖片、音頻、視頻等文件在騰訊雲對象存儲中的Url，而沒必要在業務側維護其數據持久化和容量擴展，同時，內容的分發和訪問，也可經過騰訊雲CDN來加速，有效下降了服務器端的下載壓力。

在公有云產品的價格方面，騰訊雲提供了每個月50G存儲，10G外網訪問流量、10G的CDN 回源流量、100 萬次讀請求和10萬次寫請求的免費額度，能夠知足初創項目的使用需求。同時，騰訊雲對象存儲還提供了全面的開發者手冊和各種編程語言的SDK Demo，可讓開發者快速上手，搭建原型應用。

騰訊雲COS的註冊、實名認證，以及開通CDN的過程都很簡單快捷，能夠點擊連接當即使用COS的Web控制檯，按照教程「快速上手」完成上述操做。
接下來，新建項目PetUGC，而後在項目中新建bucket存儲桶。

同時，選擇（默認）開通CDN加速。

在存儲桶gamevideo中新建文件夾whirlpk，用於存放APP上傳的「寵物互動視頻」。
點擊獲取API密鑰（必定要注意保護本身的密鑰不被泄漏，並儘可能按期的更換密鑰）。

對於APP端的「文件上傳」功能，騰訊雲COS官方提供的SDK已經將分片上傳的功能作了封裝，開發者只需按照SDK文檔調用FileUploadTask函數，便可完成圖片、音頻、視頻等大文件的上傳，而且能在對應的回調接口中進行上傳成功/失敗後的進一步操做，好比更新APP的UI來顯示上傳進度，或者提示上傳成功/失敗消息等。下面爲代碼示例：

import com.tencent.upload.task.impl.FileUploadTask;
import com.tencent.upload.task.IUploadTaskListener;

/* 若已存在同名的文件： INSERTONLY==false 表示可以上傳成功，且會覆蓋同名的文件； INSERTONLY==true 則不能成功上傳*/

FileUploadTask task = new FileUploadTask(BUCKETNAME, appidFILEPATH, ARGETDIR, ATTRS, INSERTONLY, new IUploadTaskListener(){

        @Override
        public void onUploadFailed(int arg0, String arg1) {
            // TODO Auto-generated method stub
            // 上傳成功
        }

        @Override
        public void onUploadProgress(long arg0, long arg1) {
            // TODO Auto-generated method stub
            // 上傳進度
        }

        @Override
        public void onUploadStateChange(TaskState arg0) {
            // TODO Auto-generated method stub
            // 上傳狀態變化
        }

        @Override
        public void onUploadSucceed(FileInfo arg0) {
            // TODO Auto-generated method stub
            // 上傳失敗
        }});
filetask.setAuth(SIGN);
fileUploadMgr.upload(task);

須要說明的是，上面filetask.setAuth(SIGN)中的SIGN字段，即爲業務端服務器返回的簽名字符串，用於完成用戶請求的鑑權。SIGN的生成過程，在服務器端的SDK中也有提供封裝好的方法。

騰訊雲COS的簽名SIGN分爲兩種：屢次有效簽名和單次有效簽名。當須要進行上傳文件, 重命名文件, 建立目錄, 獲取文件/目錄屬性, 拉取目錄列表這幾個操做時，必須在請求中填寫屢次有效簽名。

對於屢次有效簽名，能夠在服務器端調用getPeriodEffectiveSign方法來得到。
String getPeriodEffectiveSign(String bucketName, String cosPath, Credentials cred, long expired)
其中的各個參數對應的含義是：

參數名	參數類型	默認值	參數描述
bucket	String	無	bucket名稱，即爲上文中提到的gamevideo
cos_path	String	無	資源在bucket下的相對路徑，即爲上文中提到的 /whirlpk/test.jpg
cred	Credentials	無	用戶身份信息, 包括appid, secretId, secretkey. 將騰訊雲COS Web控制檯中獲取到的API密鑰信息填入便可
expired	long	無	簽名過時時間, UNIX時間戳，單位爲秒。注意，這兒的expired是個時間點，而非時間段。它等於當前時間+有效期限

獲取屢次有效簽名的代碼示例：

Credentials cred = new Credentials(appId, secretId, secretKey);
long expired = System.currentTimeMillis() / 1000 + 600;
String signStr = Sign.getPeriodEffectiveSign(bucketName, "/whirlpk/test.jpg", cred, expired);

對於單次有效簽名，適用場景爲刪除和更新文件目錄。在服務器端的構造過程和上面的屢次有效簽名相似。

當（圖片、音頻、視頻等）文件上傳成功後，騰訊雲會給APP端返回文件在COS中的Url，此時，業務端的數據庫僅需存儲這個Url，當用戶訪問該文件時，將這個Url返回給用戶，而後由騰訊雲COS+CDN來響應用戶的請求，將實際的文件傳輸給用戶。

這樣，在APP端，就能夠直接調用原生的視頻播放控件（好比Android的VideoView或者自定義MediaPlayer），鏈入騰訊雲COS提供的Url來播放視頻（當Android使用VideoView來播放視頻時，視頻源必須是標準的mp4或3gp的視頻，不然沒法播放）。

須要說明的是，騰訊雲返回的資源Url會有兩種，一種是source_url（不通過CDN加速，直接訪問COS存儲源），另外一種是access_url（通過CDN加速來訪問COS存儲源）。推薦使用access_url來爲訪問加速，不只能夠極大的下降訪問時延，同時還能夠節省COS的回源流量。

除了音視頻的上傳和（下載）播放之外，咱們的產品還須要爲用戶提供圖片處理功能，包括縮放、裁剪。同時，爲了保證平臺內容的健康可持續，咱們須要引入圖片鑑黃功能；爲了保護UGC內容的版權，咱們還須要防盜鏈和水印功能。
因而咱們採用騰訊雲的萬象優圖來實現上述的圖片處理功能。整個使用過程能夠分爲：

1. 在萬象優圖控制檯配置參數；
2. 在業務服務器和APP中集成SDK；
3. 按照業務需求自定義回調處理邏輯。

首先，在騰訊雲Web控制檯中點擊進入「萬象優圖」。在以前已經建好的項目PetUGC中新建一個圖片空間petimage。

而後，點擊「管理」，進入對圖片空間的配置界面。

如何在Web控制檯對鑑黃功能進行設置？

在「圖片識別」功能中，能夠開啓鑑黃功能的使用狀態。點擊保存後，凡是要上傳入當前圖片空間（petimage）的新圖片，都須要先通過鑑黃處理。萬象優圖會爲每一張圖片打分（0~100分），其中，超過91分的圖片，會被系統肯定爲是黃圖，低於83分的，會被系統肯定爲是正常圖片。分值處於83~91之間的，系統會判別爲「疑似黃圖」，但沒法肯定，須要業務端經過人工審覈的方式來斷定是否爲黃圖。
業務端能夠進一步設置回調閾值和回調URL，讓騰訊雲萬象優圖將「疑似黃圖」的圖片和相應的判別結果返回給業務端，以作進一步的處理。

如何在APP端將圖片傳送給萬象優圖？

萬象優圖爲開發者提供了Android、iOS和服務器端的SDK和Demo示例，並封裝好了相應的功能模塊供靈活調用。以下是SDK的下載地址

以Android爲例，點擊下載「Android體驗demo」，在QcloudImageActivity中能夠看到關鍵的業務邏輯代碼：
首先，由APP向業務端服務器發起請求，獲取簽名sign（即訪問騰訊雲萬象優圖資源的權限）。

在獲取簽名sign後，就可構造圖片上傳請求：

在圖片上傳請求的回調接口onUploadSucceed中，能夠設定圖片上傳成功後對APP UI界面的操做，在onUploadProgress中可設定圖片上傳的進度顯示，在onUploadFailed中可設定圖片上傳失敗後的處理。

如何在服務器端構造簽名sign？

以Java SDK爲例，在咱們的業務服務器端，只需將萬象優圖Web控制檯中提供的APP_ID、Secret ID、Secret Key填寫至下圖中的對應位置：

而後調用對象PicCloud的getSign方法，便可獲得屢次/單次有效簽名。

將簽名返回給APP端後，APP端便可將圖片連同簽名一塊兒送至騰訊雲萬象優圖，進行鑑黃處理。

業務服務器該如何處理騰訊雲萬象優圖的回調結果？

在服務器端，須要監聽在控制檯中配置的回調URL接口。當萬象優圖發現APP上傳的圖片分值在閾值（83~90，疑似黃圖）內時，會默認回調該URL，向其發送一個標準的HTTP POST通知消息。

HTTP的Response信息以下表：

參數名稱	類型	必選	描述
url	String	是	上傳後的資源url，包括域名
result	Int	是	供參考的識別結果，0正常，1黃圖，2疑似圖片
forbid_status	Int	是	封禁狀態，0表示正常，1表示圖片已被封禁（只有存儲在萬象優圖的圖片纔會被封禁）
confidence	Double	是	識別爲黃圖的置信度，範圍0-100；是normal, hot, porn的綜合評分
normal	Double	是	圖片爲正常圖片的評分
hot	Double	是	圖片爲性感圖片的評分
porn	Double	是	圖片爲色情圖片的評分

業務端經過判別Response中的參數，來決定向APP端發送對應的處理（好比，拒絕這次UGC上傳），或者轉向人工審查等。

如何使用萬象優圖來實現圖片處理（裁剪+縮放+水印）？

萬象優圖提供了以下的圖片處理功能：

其中，基本圖像處理（imageView2）即爲對 圖片的長和寬按約束條件來等比壓縮。在把原圖上傳到萬象優圖的對象存儲空間後，（若是鑑黃經過）萬象優圖會返回該圖片的Url。當咱們再次請求該圖片的Url時，能夠在Url後面添加參數，來告訴萬象優圖「請按照參數來等比縮放該圖片，而後返回給我」。這樣，APP端就能拿到指定長寬的圖片，不只便於UI排版，還能實現縮略圖顯示。

舉個例子來講明：
點擊萬象優圖→新手指引→web端接入→樣例，進入下面的試用界面：


上傳一張圖片keji.jpg，長寬爲800x450，生成如上的下載連接。
訪問該連接能夠看到原圖。

而後，咱們在下載連接Url上添加基本圖像處理（imageView2）的相應參數，含義爲「調用基本圖像處理imageView2接口，指明採用模式2來等比縮放圖片，並指定圖片的寬的最大值爲400」：
http://test2p-10000002.image.myqcloud.com//u/can/use/slash/sample1470281794?imageView2/2/w/400
在瀏覽器中打開該Url，便可看到萬象優圖將原圖等比壓縮後的處理結果：

基本圖片處理中還提供了不少的等比縮放模式，以及指定圖片格式、圖片質量等等，你們能夠按需設定參數。

但對於咱們的APP，僅僅實現圖片的「等比縮放功能」還不夠，由於在大多數狀況下，用戶上傳的圖片長寬不一，等比縮放很容易形成「顧得了長但顧不了寬」，使得原有的圖片通過縮放後，要麼在顯示時產生留白，要麼就是圖片的關鍵部分（好比中間部分）被縮放到了邊緣，變得很難看。因此，在實際使用時，咱們會採用上圖中的模式5，來指定在縮放時，先等比縮放，而後居中裁剪。舉個例子：
http://test2p-10000002.image.myqcloud.com//u/can/use/slash/sample1470281794?imageView2/5/w/300

這樣，即便通過了縮放和裁剪，也可使得原圖的中間部分獲得保留。

對於萬象優圖提供的高級圖像處理（imageMogr2）接口，能夠按照九宮格來選擇更多的旋轉、裁剪處理模式。

可是這種用Url傳參數來指定圖片處理方式的作法顯得很笨吶有木有Orz，每次請求圖片資源都須要作一次處理……別急，萬象優圖提供了另一種省心的圖片處理方式——在Web控制檯中，對某個存儲空間下的全部圖片，設定統一的圖片樣式。

新添加一個樣式，點擊編輯。



以及圖片水印（左上角的蝙蝠俠標誌）

總結：

經過以上操做，就將騰訊雲提供的音視頻上傳下載、萬象優圖圖片存儲以及處理（縮放、裁剪、水印）等功能集成到了APP和業務端服務器中。