ceshi.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <!-- <view></view> -->
  3. <!-- <view :style="{width: '100%', height: '100%'}" id="view">
  4. <video id="preview" style=" width: 100%;" autoplay="autoplay" :src="url"></video>
  5. </view> -->
  6. <view>
  7. <!-- <iframe :src="url" width="100%" height="400" style="background-color: #000000;" id="cameraTest" allowfullscreen /> -->
  8. <view style="width: 100%;text-align: center;">
  9. <h1>仓库门口</h1>
  10. </view>
  11. <video :src="url" style="width: 100%;"></video>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. id: '',
  19. url: '',
  20. access_token: ''
  21. }
  22. },
  23. onLoad(option) {
  24. // this.url = ""
  25. uni.request({
  26. url: 'https://open.hikyun.com/artemis/oauth/token/v2',
  27. method: 'POST',
  28. data: {
  29. accessKey: "16365122785078383",
  30. secretKey: "ctZiCTxLpKLdSKjjKkWa",
  31. productCode: "1636609606025604",
  32. projectId: "1321376925660208"
  33. },
  34. success: (res) => {
  35. this.access_token = res.data.data.access_token
  36. uni.request({
  37. // url: 'https://open.hikyun.com/artemis/api/eits/v1/global/live/video/preview',
  38. url: 'https://open.hikyun.com/artemis/api/eits/v1/global/live/address/get/by/deviceSerial', //视频流获取
  39. method: 'POST',
  40. header: {
  41. "access_token": res.data.data.access_token,
  42. },
  43. data: {
  44. "toolBar": 0,
  45. "deviceSerial": "G26011245",
  46. "channelNo": 1,
  47. "videoLevel": 1,
  48. "audio": 1,
  49. "autoPlay": 1,
  50. "protocol":3, //流播放协议,1-ezopen、2-hls、3-rtmp、4-flv,默认为1
  51. "projectId": 1321376925660208,
  52. "supportH265":1 //是否要求视频为H265编码格式默认1
  53. },
  54. success: (res) => {
  55. console.log(res)
  56. // this.url = res.data.data.previewUrl
  57. this.url = res.data.data.url
  58. }
  59. });
  60. }
  61. });
  62. // this.url = 'rtmp://ns8.indexforce.com/home/mystream'
  63. // this.getUrl(option.id);
  64. // uni.setNavigationBarTitle({
  65. // title:option.title
  66. // })
  67. },
  68. methods: {
  69. getUrl(id) {
  70. var paramA = {
  71. action: 'app/shipinbofang/searchUrl',
  72. noid: id,
  73. actiondesc: '根据监控id生成预览url'
  74. };
  75. this.$request
  76. .post(paramA.action, paramA)
  77. .then(data => {
  78. if (data.success) {
  79. this.url = data.url;
  80. }
  81. })
  82. },
  83. }
  84. }
  85. </script>
  86. <!-- <template>
  87. <view>
  88. <view class="content">
  89. <image class="logo" src="/static/logo.png"></image>
  90. <view class="text-area">
  91. <button type="default" @click="hkPreview">实时视频预览</button>
  92. <button type="default" @click="hkFullPreview">直接全屏预览</button>
  93. </view>
  94. </view>
  95. </view>
  96. </template>
  97. ```javascript
  98. <script>
  99. //导入本地插件
  100. const hk = uni.requireNativePlugin('hk-preview');
  101. export default {
  102. data() {
  103. return {
  104. src:'rtmp://ns8.indexforce.com/home/mystream',
  105. title: 'Hello',
  106. url:'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
  107. }
  108. },
  109. onLoad() {
  110. },
  111. created() {
  112. },
  113. methods: {
  114. hkPreview() {
  115. //有云台设备,显示操作云台菜单
  116. //ip地址,用户名,密码,端口号,通道号
  117. hk.startActivity("http://zijun.qdcandor.com","admin","Zhongdian12#$","80","1")
  118. },
  119. hkFullPreview() {
  120. //无云台设备直接全屏播放
  121. //ip地址,用户名,密码,端口号,通道号
  122. hk.startFullActivity("http://zijun.qdcandor.com","admin","Zhongdian12#$","7101","1")
  123. }
  124. }
  125. }
  126. </script> -->