Promise改寫獲取螢石云直播地址接口示例
改寫原因
通常情況下,螢石云的直播地址都是在服務(wù)端進(jìn)行獲取,然后存儲(chǔ)到數(shù)據(jù)庫中,但是螢石云官方默認(rèn)同一個(gè)ip最多只能使用5個(gè)appKey,否則會(huì)爆出appKey數(shù)量超出安全限制的錯(cuò)誤提示。
因此改為前端進(jìn)行api的調(diào)用,來分散ip和appKey之間的綁定(這一點(diǎn)對(duì)開發(fā)者而言其實(shí)意義并不是很大,應(yīng)為開發(fā)者的ip是固定的,測(cè)試過程中遲早也會(huì)超出數(shù)量限制)。
技術(shù)選擇
需求明確之后,有兩種方案可供選擇。
- ajax回調(diào)
- Promise異步編程解決方案
整個(gè)直播鏈接的獲取流程大致如下:

可想而知,如果單純用ajax進(jìn)行回調(diào),無疑會(huì)陷入回調(diào)地獄中,于是果斷選擇了Promise進(jìn)行改寫(進(jìn)步源于折騰)。
源碼
let serial, channelNo;
/**
* 向服務(wù)器查詢攝像頭直播鏈接
*
* @param cameraId 攝像頭id
* @param perspective 是否允許查看其他用戶的攝像頭
*
* 服務(wù)器首先查詢數(shù)據(jù)庫直播鏈接緩存
* ------如果數(shù)據(jù)庫有緩存,則服務(wù)器將直接返回cameraBean的信息
* ------如果沒有緩存,則查找當(dāng)前用戶的accessToken
* ------------如果數(shù)據(jù)庫保存有accessToken,則返回accessToken
* ------------數(shù)據(jù)庫沒有保存accessToken,則返回appKey/appSecret,由瀏覽器進(jìn)行下一步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)絡(luò)異常請(qǐng)稍后再試");
console.log("error");
}
});
}
)
}
/**
* 接收step1返回的結(jié)果,判斷結(jié)果類型
* ------如果是camera對(duì)象或者是accessToken,則直接攜帶該數(shù)據(jù)進(jìn)入step3
* ------如果是appKey/appSecret,則調(diào)用開放平臺(tái)接口,查詢accessToken,并上傳至服務(wù)器保存,進(jìn)行step3
*/
function step2(data) {
serial = data.serial;
channelNo = data.channelNo;
return new Promise(function (resolve, reject) {
if (data.camera || data.accessToken) {//服務(wù)器直接返回了攝像頭直播信息或accessToken
resolve(data);
} else if (data.appKey && data.appSecret) {//服務(wù)器返回了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)絡(luò)異常請(qǐng)稍后再試");
console.log(e);
}
});
}
});
}
/**
* 接收step2返回的數(shù)據(jù),camera或accessToken
* ------如果是camera對(duì)象,則直接返回
* ------如果是accessToken,則調(diào)用開放平臺(tái)接口,查詢直播鏈接,并上傳至服務(wù)器保存
*/
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)絡(luò)異常請(qǐng)稍后再試");
console.log(e);
}
});
});
}
/**
* 獲取攝像頭直播鏈接調(diào)用接口
* @param cameraId 攝像頭id
* @param perspective 是否允許當(dāng)前用戶查看其他用戶的攝像頭
*/
function getCameraAddress(cameraId, perspective) {
return step1(cameraId, perspective).then(step2).then(step3);
}
/**
* 將accessToken上傳至服務(wù)器保存
*/
function uploadAccessToken(accessToken, expireTime, cameraType) {
$.ajax({
type: "POST",
url: "/cameraManage/uploadAccessToken",
data: {
accessToken: accessToken,
expireTime: expireTime,
cameraType: cameraType
},
dataType: "json",
});
}
/**
* 將得到的攝像頭鏈接上傳至服務(wù)器保存
*/
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) {
//未綁定攝像頭的錯(cuò)誤提示
...
return;
}
//獲得鏈接之后的正常操作流程
...
});以上就是Promise改寫獲取螢石云直播地址接口示例的詳細(xì)內(nèi)容,更多關(guān)于Promise獲取直播地址接口的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js基礎(chǔ)語法與maven項(xiàng)目配置教程案例
本篇文章介紹了幾個(gè)javascript的基本語法和maven的配置教程。想學(xué)習(xí)javascript和maven的朋友們可以參考一下,希望能給你帶來幫助2021-07-07
jQuery幻燈片插件owlcarousel參數(shù)說明中文文檔
jQuery幻燈片插件owlcarousel是一個(gè)小巧強(qiáng)大兼容性強(qiáng)的幻燈片插件,兼容IE6以上所有瀏覽器,本文主要介紹了字的使用方法與中文參數(shù)與API說明2018-02-02
微信小程序 scroll-view組件實(shí)現(xiàn)列表頁實(shí)例代碼
這篇文章主要介紹了微信小程序 scroll-view組件實(shí)現(xiàn)列表頁實(shí)例代碼的相關(guān)資料,scroll-view組件介紹scroll-view是微信小程序提供的可滾動(dòng)視圖組件,其主要作用是可以用來做手機(jī)端經(jīng)常會(huì)看到的上拉加載 ,需要的朋友可以參考下2016-12-12
微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)
這篇文章主要介紹了微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)的相關(guān)資料,需要的朋友可以參考下2017-03-03
13個(gè)JavaScript 一行程序,讓你看起來就是個(gè)專家
JavaScript 可以做很多好玩的事, 從復(fù)雜的框架到處理API,有太多的東西需要學(xué)習(xí)。但是,它也能讓我們只用一行就能做一些了不起的事情。今天的文章小編就為大家介紹13 個(gè)JavaScript 行程序,需要的朋友可以參考下2021-08-08

