经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Omi » 查看文章
Promise改写获取萤石云直播地址接口示例
来源:jb51  时间:2022/8/1 15:09:08  对本文有异议

改写原因

通常情况下,萤石云的直播地址都是在服务端进行获取,然后存储到数据库中,但是萤石云官方默认同一个ip最多只能使用5个appKey,否则会爆出appKey数量超出安全限制的错误提示。

因此改为前端进行api的调用,来分散ip和appKey之间的绑定(这一点对开发者而言其实意义并不是很大,应为开发者的ip是固定的,测试过程中迟早也会超出数量限制)。

技术选择

需求明确之后,有两种方案可供选择。

  • ajax回调
  • Promise异步编程解决方案

整个直播链接的获取流程大致如下:

可想而知,如果单纯用ajax进行回调,无疑会陷入回调地狱中,于是果断选择了Promise进行改写(进步源于折腾)。

源码

  1. let serial, channelNo;
  2. /**
  3. * 向服务器查询摄像头直播链接
  4. *
  5. * @param cameraId 摄像头id
  6. * @param perspective 是否允许查看其他用户的摄像头
  7. *
  8. * 服务器首先查询数据库直播链接缓存
  9. * ------如果数据库有缓存,则服务器将直接返回cameraBean的信息
  10. * ------如果没有缓存,则查找当前用户的accessToken
  11. * ------------如果数据库保存有accessToken,则返回accessToken
  12. * ------------数据库没有保存accessToken,则返回appKey/appSecret,由浏览器进行下一步accessToken的获取
  13. */
  14. function step1(cameraId, perspective) {
  15. return new Promise(function (resolve, reject) {
  16. $.ajax({
  17. type: "GET",
  18. url: "/cameraManage/getCameraAddress?id=" + cameraId + "&perspective=" + perspective,
  19. success: function (data) {
  20. if (data.state == 'success') {
  21. resolve(data.data);
  22. } else {
  23. layer.msg(data.msg);
  24. console.log(data.msg);
  25. }
  26. },
  27. error: function (e) {
  28. layer.msg("网络异常请稍后再试");
  29. console.log("error");
  30. }
  31. });
  32. }
  33. )
  34. }
  35. /**
  36. * 接收step1返回的结果,判断结果类型
  37. * ------如果是camera对象或者是accessToken,则直接携带该数据进入step3
  38. * ------如果是appKey/appSecret,则调用开放平台接口,查询accessToken,并上传至服务器保存,进行step3
  39. */
  40. function step2(data) {
  41. serial = data.serial;
  42. channelNo = data.channelNo;
  43. return new Promise(function (resolve, reject) {
  44. if (data.camera || data.accessToken) {//服务器直接返回了摄像头直播信息或accessToken
  45. resolve(data);
  46. } else if (data.appKey && data.appSecret) {//服务器返回了appKey && appSecret
  47. $.ajax({
  48. type: "POST",
  49. url: "https://open.ys7.com/api/lapp/token/get",
  50. data: {
  51. appKey: data.appKey,
  52. appSecret: data.appSecret
  53. },
  54. dataType: "json",
  55. success: function (data) {
  56. let tokenData = data.data;
  57. if (data.code == "200" && tokenData) {
  58. resolve(tokenData);
  59. uploadAccessToken(tokenData.accessToken, tokenData.expireTime, 1);
  60. }
  61. },
  62. error: function (e) {
  63. layer.msg("网络异常请稍后再试");
  64. console.log(e);
  65. }
  66. });
  67. }
  68. });
  69. }
  70. /**
  71. * 接收step2返回的数据,camera或accessToken
  72. * ------如果是camera对象,则直接返回
  73. * ------如果是accessToken,则调用开放平台接口,查询直播链接,并上传至服务器保存
  74. */
  75. function step3(data) {
  76. if (data.camera) {
  77. // console.log("上一步直接返回了camera");
  78. return data.camera;
  79. }
  80. return new Promise((resolve, reject) => {
  81. $.ajax({
  82. type: "POST",
  83. url: "https://open.ys7.com/api/lapp/live/video/list",
  84. data: {
  85. accessToken: data.accessToken,
  86. },
  87. dataType: "json",
  88. success: function (data) {
  89. let addressData = data.data;
  90. if (data.code != '200' || !addressData) {
  91. layer.msg("直播链接获取失败");
  92. console.log("直播链接获取失败");
  93. return;
  94. }
  95. for (let i = 0; i < addressData.length; i++) {
  96. if (addressData[i].deviceSerial == serial && addressData[i].channelNo == channelNo) {
  97. let argObject = {
  98. serial: addressData[i].deviceSerial,
  99. channelNo: addressData[i].channelNo,
  100. flv: addressData[i].flvAddress,
  101. flvHd: addressData[i].hdFlvAddress,
  102. hls: addressData[i].liveAddress,
  103. hlsHd: addressData[i].hdAddress,
  104. rtmp: addressData[i].rtmp,
  105. rtmpHd: addressData[i].rtmpHd
  106. };
  107. // console.log("获取了直播链接");
  108. // console.log(argObject);
  109. resolve(argObject);
  110. uploadYs7CameraAddress(argObject);
  111. break;
  112. }
  113. }
  114. },
  115. error: function (e) {
  116. layer.msg("网络异常请稍后再试");
  117. console.log(e);
  118. }
  119. });
  120. });
  121. }
  122. /**
  123. * 获取摄像头直播链接调用接口
  124. * @param cameraId 摄像头id
  125. * @param perspective 是否允许当前用户查看其他用户的摄像头
  126. */
  127. function getCameraAddress(cameraId, perspective) {
  128. return step1(cameraId, perspective).then(step2).then(step3);
  129. }
  130. /**
  131. * 将accessToken上传至服务器保存
  132. */
  133. function uploadAccessToken(accessToken, expireTime, cameraType) {
  134. $.ajax({
  135. type: "POST",
  136. url: "/cameraManage/uploadAccessToken",
  137. data: {
  138. accessToken: accessToken,
  139. expireTime: expireTime,
  140. cameraType: cameraType
  141. },
  142. dataType: "json",
  143. });
  144. }
  145. /**
  146. * 将得到的摄像头链接上传至服务器保存
  147. */
  148. function uploadYs7CameraAddress(args) {
  149. args.id = 0;
  150. $.ajax({
  151. type: "POST",
  152. url: "/cameraManage/uploadYs7CameraAddress",
  153. data: args,
  154. dataType: "json",
  155. });
  156. }

之后前端调用摄像头的接口只需要编写如下代码就可以了

  1. getCameraAddress(cameraId, 0).then(data => {
  2. if (data == null || data == undefined) {
  3. //未绑定摄像头的错误提示
  4. ...
  5. return;
  6. }
  7. //获得链接之后的正常操作流程
  8. ...
  9. });

以上就是Promise改写获取萤石云直播地址接口示例的详细内容,更多关于Promise获取直播地址接口的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号