从零搭建仿抖音短视频APP-后端开发短视频业务模块(1)
項目持續更新中:
仿抖音短視頻APP專欄
目錄
發布短視頻的流程梳理
傳統上傳流程?
傳統上傳
CDN上傳
CDN上傳流程
使用Unicloud云端功能
?實現app端視頻上傳
保存視頻信息入庫
發布短視頻的流程梳理
傳統上傳流程?
注:controller接受到文件之后會把文件上傳到服務器,同時controller獲得某一幀幀來獲得我們的封面圖,上傳到我們的文件服。視頻和封面的地址保存到我們的數據庫。
傳統上傳
?這里是兩個節點,整個鏈路帶寬資源占了2G,會有2G帶寬的損耗。用戶產生的風險也很大。
CDN上傳
云廠商提供:
CDN,靜態資源服務,全球都能訪問。?
傳統方式:前端上傳文件到cdn之后,我們可以拿到cdn中的播放地址,隨后我們會把視頻文件再次傳到controller。
現在:只需要拿到視頻文件的url地址,一些基本的視頻信息放到我們的controller中存儲就可以了。這里我們只有一次文件的上傳,產生的帶寬損耗發生在云廠商,風險的承擔也由他們承擔。
補:cdn帶有截幀的功能
優化:減少一次帶寬,優化傳輸速率,提升用戶體驗。
CDN上傳流程
?我們會拿到兩個url,文本信息提交到controller做處理。
使用Unicloud云端功能
?unicloud可以在云端編寫云函數,云函數作為接口為前端服務,這里不需要我們操作。
云端也提供了云數據庫服務。
?打開官方控制臺:
創建服務空間:
?打開HBuilder:
?關聯云空間:?
?集成成功之后的unicloud
?
?實現app端視頻上傳
發送在前端的:
?打開前端:
監聽函數,代表中間的+按鈕,可以讓APP.Vue監聽,就可以有相應方法的執行:
?這里的e是一個文件事件對象,
?跳轉到publish頁面:
?進度條:?
上傳成功之后,我們會得到一個文件對象(f):
?這里阿里云會提供一個截幀服務。
最后重啟,打開主頁,點擊+上傳:
?這里的封面圖是截幀截取的
?
?點擊預覽視頻:
?返回網頁看我們的云存儲:
?這個就是我們剛剛上傳的地址。
這就完成了我們CDN的視頻上傳。
保存視頻信息入庫
在前端找到發布視頻的路由:
?在model中:
?構建service:
接口:
?接口實現:
?
?在controller層:
?Meavn中install,重啟運行。
?點擊發布,頁面消失,發布成功,打開數據庫:
?
把視頻的url地址在unicloud中搜索,檢查是否匹配。
總結
以上是生活随笔為你收集整理的从零搭建仿抖音短视频APP-后端开发短视频业务模块(1)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 网站建设基本知识
- 下一篇: AdminLTE2的模态框(弹出框)