Promise改寫獲取螢石云直播地址接口示例
改寫原因
通常情況下,螢石云的直播地址都是在服務端進行獲取,然后存儲到數(shù)據(jù)庫中,但是螢石云官方默認同一個ip最多只能使用5個appKey
,否則會爆出appKey數(shù)量超出安全限制
的錯誤提示。
因此改為前端進行api的調(diào)用,來分散ip和appKey之間的綁定(這一點對開發(fā)者而言其實意義并不是很大,應為開發(fā)者的ip是固定的,測試過程中遲早也會超出數(shù)量限制)。
技術選擇
需求明確之后,有兩種方案可供選擇。
- ajax回調(diào)
- Promise異步編程解決方案
整個直播鏈接的獲取流程大致如下:
可想而知,如果單純用ajax進行回調(diào),無疑會陷入回調(diào)地獄中,于是果斷選擇了Promise進行改寫(進步源于折騰)。
源碼
let serial, channelNo; /** * 向服務器查詢攝像頭直播鏈接 * * @param cameraId 攝像頭id * @param perspective 是否允許查看其他用戶的攝像頭 * * 服務器首先查詢數(shù)據(jù)庫直播鏈接緩存 * ------如果數(shù)據(jù)庫有緩存,則服務器將直接返回cameraBean的信息 * ------如果沒有緩存,則查找當前用戶的accessToken * ------------如果數(shù)據(jù)庫保存有accessToken,則返回accessToken * ------------數(shù)據(jù)庫沒有保存accessToken,則返回appKey/appSecret,由瀏覽器進行下一步accessToken的獲取 */ function step1(cameraId, perspective) { return new Promise(function (resolve, reject) { $.ajax({ type: "GET", url: "/cameraManage/getCameraAddress?id=" + cameraId + "&perspective=" + perspective, success: function (data) { if (data.state == 'success') { resolve(data.data); } else { layer.msg(data.msg); console.log(data.msg); } }, error: function (e) { layer.msg("網(wǎng)絡異常請稍后再試"); console.log("error"); } }); } ) } /** * 接收step1返回的結(jié)果,判斷結(jié)果類型 * ------如果是camera對象或者是accessToken,則直接攜帶該數(shù)據(jù)進入step3 * ------如果是appKey/appSecret,則調(diào)用開放平臺接口,查詢accessToken,并上傳至服務器保存,進行step3 */ function step2(data) { serial = data.serial; channelNo = data.channelNo; return new Promise(function (resolve, reject) { if (data.camera || data.accessToken) {//服務器直接返回了攝像頭直播信息或accessToken resolve(data); } else if (data.appKey && data.appSecret) {//服務器返回了appKey && appSecret $.ajax({ type: "POST", url: "https://open.ys7.com/api/lapp/token/get", data: { appKey: data.appKey, appSecret: data.appSecret }, dataType: "json", success: function (data) { let tokenData = data.data; if (data.code == "200" && tokenData) { resolve(tokenData); uploadAccessToken(tokenData.accessToken, tokenData.expireTime, 1); } }, error: function (e) { layer.msg("網(wǎng)絡異常請稍后再試"); console.log(e); } }); } }); } /** * 接收step2返回的數(shù)據(jù),camera或accessToken * ------如果是camera對象,則直接返回 * ------如果是accessToken,則調(diào)用開放平臺接口,查詢直播鏈接,并上傳至服務器保存 */ function step3(data) { if (data.camera) { // console.log("上一步直接返回了camera"); return data.camera; } return new Promise((resolve, reject) => { $.ajax({ type: "POST", url: "https://open.ys7.com/api/lapp/live/video/list", data: { accessToken: data.accessToken, }, dataType: "json", success: function (data) { let addressData = data.data; if (data.code != '200' || !addressData) { layer.msg("直播鏈接獲取失敗"); console.log("直播鏈接獲取失敗"); return; } for (let i = 0; i < addressData.length; i++) { if (addressData[i].deviceSerial == serial && addressData[i].channelNo == channelNo) { let argObject = { serial: addressData[i].deviceSerial, channelNo: addressData[i].channelNo, flv: addressData[i].flvAddress, flvHd: addressData[i].hdFlvAddress, hls: addressData[i].liveAddress, hlsHd: addressData[i].hdAddress, rtmp: addressData[i].rtmp, rtmpHd: addressData[i].rtmpHd }; // console.log("獲取了直播鏈接"); // console.log(argObject); resolve(argObject); uploadYs7CameraAddress(argObject); break; } } }, error: function (e) { layer.msg("網(wǎng)絡異常請稍后再試"); console.log(e); } }); }); } /** * 獲取攝像頭直播鏈接調(diào)用接口 * @param cameraId 攝像頭id * @param perspective 是否允許當前用戶查看其他用戶的攝像頭 */ function getCameraAddress(cameraId, perspective) { return step1(cameraId, perspective).then(step2).then(step3); } /** * 將accessToken上傳至服務器保存 */ function uploadAccessToken(accessToken, expireTime, cameraType) { $.ajax({ type: "POST", url: "/cameraManage/uploadAccessToken", data: { accessToken: accessToken, expireTime: expireTime, cameraType: cameraType }, dataType: "json", }); } /** * 將得到的攝像頭鏈接上傳至服務器保存 */ function uploadYs7CameraAddress(args) { args.id = 0; $.ajax({ type: "POST", url: "/cameraManage/uploadYs7CameraAddress", data: args, dataType: "json", }); }
之后前端調(diào)用攝像頭的接口只需要編寫如下代碼就可以了
getCameraAddress(cameraId, 0).then(data => { if (data == null || data == undefined) { //未綁定攝像頭的錯誤提示 ... return; } //獲得鏈接之后的正常操作流程 ... });
以上就是Promise改寫獲取螢石云直播地址接口示例的詳細內(nèi)容,更多關于Promise獲取直播地址接口的資料請關注腳本之家其它相關文章!
相關文章
微信小程序 數(shù)組中的push與concat的區(qū)別
這篇文章主要介紹了微信小程序 數(shù)組中的push與concat的區(qū)別的相關資料,需要的朋友可以參考下2017-01-01JavaScript?與?TypeScript之間的聯(lián)系
這篇文章主要介紹了?JavaScript?與?TypeScript之間的聯(lián)系,JavaScript,也稱為?JS,是一種符合?ECMAScript?規(guī)范的編程語言。這是一個高級別的、通常是即時編譯的、多范式的。TypeScript?是一種強類型、面向?qū)ο蟮木幾g語言,更多消息內(nèi)容,需要的朋友可以參考一下下面文章內(nèi)容2021-11-11微信小程序 常見問題總結(jié)(4058,40013)及解決辦法
這篇文章主要介紹了微信小程序 常見問題總結(jié)及解決辦法的相關資料,這里首先對微信小程序的結(jié)構(gòu)進行了介紹,然后對常見問題進行說明講解,需要的朋友可以參考下2017-01-01js二進制數(shù)據(jù)及其互相轉(zhuǎn)化實現(xiàn)詳解
這篇文章主要為大家介紹了js二進制數(shù)據(jù)及其互相轉(zhuǎn)化實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02