uniapp H5 对接 声网，截图

安装依靠

• 版本"agora-rtc-sdk-ng": "^4.22.0",
  

创建容器

1. <template>
2.         <view class="videoValue " id="videoValue">
3.                 <u-toast ref="uToast"></u-toast>
4.                 <view @click="screenshot()">
5.                         截图
6.                 </view>
7.         </view>
8. </template>

复制代码

容器样式

   Hbuilder X 默认支持 less 语法

1. <style lang="less" scoped>
2.         .videoValue {
3.                 width: 100%;
4.                 height: 100%;
5.         }
6. </style>

复制代码

javascript代码

• 导入 agora-rtc-sdk-ng
  
• 创建声网视频实例 AgoraRTC.createClient
  

1. <script>
2.         import AgoraRTC from 'agora-rtc-sdk-ng';
3.         import {
4.                 wuRenJiApi
5.         } from '@/api/wu-ren-ji.js'
6.         // 机场直播声网
7.         const client = AgoraRTC.createClient({
8.                 codec: 'vp9',// codec 设置支持 "vp8" (VP8)、"h264"（H.264） 具体差别自行研究
9.                 mode: 'live', // "rtc"（通信场景） 和 "live"（直播场景）
10.                 mediaType: 'video',
11.         });
12.        
13.         let userClient;
14.         // 当远端用户成功发布音视频轨道之后，SDK 会触发 user-published 事件。
15.         // 这个事件携带两个参数：远端用户对象 (user) 和远端发布的媒体类型 (mediaType)。
16.         // 此时，你可以调用 AgoraRTCClient.subscribe 发起订阅。
17.         client.on('user-published', async (user, mediaType) => {
18.                 await client.subscribe(user, mediaType)
19.                 if (mediaType === 'video') {
20.                         await user.videoTrack.play('videoValue');
21.                         userClient = user.videoTrack // 获取当前渲染的视频帧数据
22.                 }
23.         });
25.         export default {
26.                 data() {
27.                         return {
28.                                 snObj: null,
29.                                 videoUser: null,
30.                                 shootErrorCount: 0, // 拍摄错误次数
31.                                 screenShotCount: 30,
32.                                 screenShotTimer: null
33.                         }
34.                 },
35.                 mounted() {
36.                         let snObj = uni.getStorageSync('snObj')
37.                         // snObj 主要包含1个关键参数 deviceSn
38.                         /**
39.                                 {
40.                                     "createName": null,
41.                                     "createDatetime": "2024-10-30 10:57:36",
42.                                     "updateName": null,
43.                                     "deviceSn": "7CTxxxxxx1",
44.                                 }
45.                         */
46.                        
47.                         this.snObj = snObj
48.                         this.playVideo()
49.                 },
50.                 methods: {
51.                         playVideo() {
52.                                 this.openJiChangZhiBo()
53.                         },
55.                         // 机场
56.                         async openJiChangZhiBo() {
57.                                 let option = uni.getStorageSync('option')
58.                                 // option 包含3个关键参数 deviceSn
59.                         /**
60.                                 {
61.                                     "token":"++/a1oP903NnBxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxACwS3Nn",
62.                                     "appId": "fcb7ca994xxxxxxxxxxxxxxx08b",
63.                                     "channel": "7Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-0"
64.                                 }
65.                         */
66.                                 await this.startDockerLive(1) // 连接设备
67.                                 if (option.appId && option.channel && option.token) {
68.                                         // 这一步可有可无，（离开频道），一般用于在切换页面的时候，
69.                                         // 也就是路由改变离开频道不会导致视频一直在播放，从而减少消耗费用
70.                                         await this.leave();
71.                                         // // 获得token渲染直播画面 连接声网实例视频
72.                                         const uid = await client.join(
73.                                                 option.appId,
74.                                                 option.channel,
75.                                                 option.token,
76.                                                 null // 设置null 或者不设置 自动分配数字 UID
77.                                         );
78.                                 } else {
79.                                         console.error('option', option);
80.                                 }
81.                         },
82.                         // 控制机场直播 0断开 1连接
83.                         async startDockerLive(op = 0) {
84.                                 try {
85.                                         const data = await api.startLive({
86.                                                 dockSN: this.snObj.deviceSn,
87.                                                 op: op,
88.                                         }).catch(err => {
89.                                                 throw new Error('控制机场直播 断开/连接抛异常' + err)
90.                                         });
91.                                         if (op === 1) {
92.                                                 return data;
93.                                         }
95.                                 } catch (error) {
96.                                         console.error(error);
97.                                 }
98.                         },
99.                         async level() {
100.                                 await client.leave();
101.                         },
102.                         // 截图
103.                         async screenshot() {
104.                                 try {
105.                                         if (this.shootErrorCount >= 5) {
106.                                         // uview框架
107.                                                 this.$refs.uToast.show({
108.                                                         message: `拍摄错误超过5次,请等待${this.screenShotCount}s后重试`
109.                                                 })
110.                                                 this.createInteVal()
111.                                                 return
112.                                         }
113.                                         this.$refs.uToast.show({
114.                                                 loading: true,
115.                                                 message: '拍摄中...',
116.                                                 type: "loading",
117.                                                 duration: 1000 * 10
118.                                         })
119.                                         const resImg = await userClient.getCurrentFrameData()
120.                                         const blobData = await ImageDataToBlob(resImg) // 自行写个js文件吧代码粘过去引入
122.                                         // 创建一个 FileReader 对象
123.                                         const reader = new FileReader();
124.                                         // 定义读取完成后的回调
125.                                         reader.onloadend = async () => {
126.                                                 // 获取转换后的 Base64 编码数据
127.                                                 // 这里已经是base64了，在浏览器可以直接打开看，
128.                                                 // 但是因为url限制，无法看全，可以直接存到服务器，
129.                                                 // 然后范围服务器的图片地址，或者是转File文件流传输到服务器
130.                                                 const base64String = reader.result;
131.                                                 let fileUrl = await this.uploadFile(base64String) // 这里我是把文件上传到服务器
132.                                                 const data = await api.screenshot({
133.                                                         fileName: fileUrl,
134.                                                         deviceSn: this.snObj.deviceSn,
135.                                                 }).catch(err => {
136.                                                         this.shootErrorCount += 1
137.                                                         this.$refs.uToast.show({
138.                                                                 message: "拍摄上传抛异常,原因:" + JSON.stringify(err),
139.                                                                 duration: 1000 * 3
140.                                                         })
141.                                                         throw new Error('上传抛异常' + JSON.stringify(err));
142.                                                 })
143.                                                 if (data.code === 200) {
144.                                                         this.$refs.uToast.show({
145.                                                                 message: "拍摄成功,请前往我的相册查看",
146.                                                                 position: "center",
147.                                                                 duration: 1000 * 1.5
148.                                                         })
149.                                                 } else {
150.                                                         this.$refs.uToast.show({
151.                                                                 message: "拍摄失败,原因:" + JSON.stringify(data.msg),
152.                                                                 duration: 1000 * 3
153.                                                         })
154.                                                         this.shootErrorCount += 1
155.                                                 }
156.                                         };
157.                                         reader.readAsDataURL(blobData)
158.                                 } catch (e) {
159.                                         this.shootErrorCount += 1
160.                                         this.$refs.uToast.show({
161.                                                 message: "拍摄失败,原因:" + JSON.stringify(data.msg),
162.                                                 duration: 1000 * 3
163.                                         })
164.                                         console.error(e)
165.                                 }
166.                         },
167.                         clearInterval() {
168.                                 if (this.screenShotTimer) {
169.                                         return
170.                                 }
171.                                 this.screenShotCount -= 1
172.                                 this.screenShotTimer = setInterval(() => {
173.                                         if (this.screenShotCount > 0) {
174.                                                 this.screenShotCount -= 1
175.                                         } else {
176.                                                 clearInterval(this.screenShotTimer)
177.                                                 this.screenShotTimer = null
178.                                                 this.shootErrorCount = 0
179.                                         }
180.                                 }, 1000)
181.                         }
182.                 },
183.         }
184. </script>

复制代码

ImageDataToBlob 方法

1. // Uint8ClampedArray 转blob
2. export function ImageDataToBlob(imageData) {
3.         let w = imageData.width;
4.         let h = imageData.height;
5.         let canvas = document.createElement('canvas');
6.         canvas.width = w;
7.         canvas.height = h;
8.         let ctx = canvas.getContext('2d');
9.         ctx.putImageData(imageData, 0, 0);
10.         return new Promise((resolve) => {
11.                 canvas.toBlob(resolve);
12.         });
13. };

复制代码

控制控制台LOG输出

   AgoraRTC.setLogLevel(Number)
SDK 日记输出级别。按照输出日记最全到最少分列：
  

• 0: DEBUG。输出所有的 SDK 日记。
  
• 1: INFO。输出 INFO、WARNING 和 ERROR 级别的日记。
  
• 2: WARNING。输出 WARNING 和 ERROR 级别的日记。
  
• 3: ERROR。输出 ERROR 级别的日记。
  
• 4: NONE。不输出日记。
  比方，假如你输入代码 AgoraRTC.setLogLevel(2);，就可以只看到WARNING 和 ERROR 级别的日记信息。
  

   创建实例之前设置log

1. <script>
2.                 AgoraRTC.setLogLevel(2)
3.                 // 航线直播声网
4.                 const client = AgoraRTC.createClient({
5.                         codec: 'vp9',
6.                         mode: 'live',
7.                 });
8. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。