首頁 > 軟體

Promise改寫獲取螢石雲直播地址介面範例

2022-08-01 18:05:35

改寫原因

通常情況下,螢石雲的直播地址都是在伺服器端進行獲取,然後儲存到資料庫中,但是螢石雲官方預設同一個ip最多隻能使用5個appKey,否則會爆出appKey數量超出安全限制的錯誤提示。

因此改為前端進行api的呼叫,來分散ip和appKey之間的繫結(這一點對開發者而言其實意義並不是很大,應為開發者的ip是固定的,測試過程中遲早也會超出數量限制)。

技術選擇

需求明確之後,有兩種方案可供選擇。

  • ajax回撥
  • Promise非同步程式設計解決方案

整個直播連結的獲取流程大致如下:

可想而知,如果單純用ajax進行回撥,無疑會陷入回撥地獄中,於是果斷選擇了Promise進行改寫(進步源於折騰)。

原始碼

let serial, channelNo;
/**
 * 向伺服器查詢攝像頭直播連結
 *
 * @param cameraId 攝像頭id
 * @param perspective 是否允許檢視其他使用者的攝像頭
 *
 * 伺服器首先查詢資料庫直播連結快取
 * ------如果資料庫有快取,則伺服器將直接返回cameraBean的資訊
 * ------如果沒有快取,則查詢當前使用者的accessToken
 * ------------如果資料庫儲存有accessToken,則返回accessToken
 * ------------資料庫沒有儲存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("網路異常請稍後再試");
                    console.log("error");
                }
            });
        }
    )
}
/**
 * 接收step1返回的結果,判斷結果型別
 * ------如果是camera物件或者是accessToken,則直接攜帶該資料進入step3
 * ------如果是appKey/appSecret,則呼叫開放平臺介面,查詢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("網路異常請稍後再試");
                    console.log(e);
                }
            });
        }
    });
}
/**
 * 接收step2返回的資料,camera或accessToken
 * ------如果是camera物件,則直接返回
 * ------如果是accessToken,則呼叫開放平臺介面,查詢直播連結,並上傳至伺服器儲存
 */
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("網路異常請稍後再試");
                console.log(e);
            }
        });
    });
}
/**
 * 獲取攝像頭直播連結呼叫介面
 * @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",
    });
}

之後前端呼叫攝像頭的介面只需要編寫如下程式碼就可以了

getCameraAddress(cameraId, 0).then(data => {
    if (data == null || data == undefined) {
        //未繫結攝像頭的錯誤提示
        ...
        return;
    }
    //獲得連結之後的正常操作流程
   ...
});

以上就是Promise改寫獲取螢石雲直播地址介面範例的詳細內容,更多關於Promise獲取直播地址介面的資料請關注it145.com其它相關文章!


IT145.com E-mail:sddin#qq.com