当前位置: 首页 > news >正文

uniapp H5 对接 声网,截图

文章目录

  • 安装依赖
  • 创建容器
    • 容器样式
  • javascript代码
    • ImageDataToBlob 方法
  • 控制控制台LOG输出

安装依赖

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

创建容器

<template><view class="videoValue " id="videoValue"><u-toast ref="uToast"></u-toast><view @click="screenshot()">截图</view></view>
</template>

容器样式

Hbuilder X 默认支持 less 语法

<style lang="less" scoped>.videoValue {width: 100%;height: 100%;}
</style>

javascript代码

  • 导入 agora-rtc-sdk-ng
  • 创建声网视频实例 AgoraRTC.createClient
<script>import AgoraRTC from 'agora-rtc-sdk-ng';import {wuRenJiApi} from '@/api/wu-ren-ji.js'// 机场直播声网const client = AgoraRTC.createClient({codec: 'vp9',// codec 设置支持 "vp8" (VP8)、"h264"(H.264) 具体差别自行研究mode: 'live', // "rtc"(通信场景) 和 "live"(直播场景)mediaType: 'video',});let userClient;// 当远端用户成功发布音视频轨道之后,SDK 会触发 user-published 事件。// 这个事件携带两个参数:远端用户对象 (user) 和远端发布的媒体类型 (mediaType)。// 此时,你可以调用 AgoraRTCClient.subscribe 发起订阅。client.on('user-published', async (user, mediaType) => {await client.subscribe(user, mediaType)if (mediaType === 'video') {await user.videoTrack.play('videoValue');userClient = user.videoTrack // 获取当前渲染的视频帧数据}});export default {data() {return {snObj: null,videoUser: null,shootErrorCount: 0, // 拍摄错误次数screenShotCount: 30,screenShotTimer: null}},mounted() {let snObj = uni.getStorageSync('snObj')// snObj 主要包含1个关键参数 deviceSn/**{"createName": null,"createDatetime": "2024-10-30 10:57:36","updateName": null,"deviceSn": "7CTxxxxxx1",}*/this.snObj = snObjthis.playVideo()},methods: {playVideo() {this.openJiChangZhiBo()},// 机场async openJiChangZhiBo() {let option = uni.getStorageSync('option')// option 包含3个关键参数 deviceSn/**{"token":"++/a1oP903NnBxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxACwS3Nn","appId": "fcb7ca994xxxxxxxxxxxxxxx08b","channel": "7Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-0"}*/await this.startDockerLive(1) // 连接设备if (option.appId && option.channel && option.token) {// 这一步可有可无,(离开频道),一般用于在切换页面的时候,// 也就是路由改变离开频道不会导致视频一直在播放,从而减少消耗费用await this.leave(); // // 获得token渲染直播画面 连接声网实例视频const uid = await client.join(option.appId,option.channel,option.token,null // 设置null 或者不设置 自动分配数字 UID);} else {console.error('option', option);}},// 控制机场直播 0断开 1连接async startDockerLive(op = 0) {try {const data = await api.startLive({dockSN: this.snObj.deviceSn,op: op,}).catch(err => {throw new Error('控制机场直播 断开/连接抛异常' + err)});if (op === 1) {return data;}} catch (error) {console.error(error);}},async level() {await client.leave();},// 截图async screenshot() {try {if (this.shootErrorCount >= 5) {// uview框架this.$refs.uToast.show({message: `拍摄错误超过5次,请等待${this.screenShotCount}s后重试`})this.createInteVal()return}this.$refs.uToast.show({loading: true,message: '拍摄中...',type: "loading",duration: 1000 * 10})const resImg = await userClient.getCurrentFrameData()const blobData = await ImageDataToBlob(resImg) // 自行写个js文件吧代码粘过去引入// 创建一个 FileReader 对象const reader = new FileReader();// 定义读取完成后的回调reader.onloadend = async () => {// 获取转换后的 Base64 编码数据 // 这里已经是base64了,在浏览器可以直接打开看,// 但是因为url限制,无法看全,可以直接存到服务器,// 然后范围服务器的图片地址,或者是转File文件流传输到服务器const base64String = reader.result;let fileUrl = await this.uploadFile(base64String) // 这里我是把文件上传到服务器const data = await api.screenshot({fileName: fileUrl,deviceSn: this.snObj.deviceSn,}).catch(err => {this.shootErrorCount += 1this.$refs.uToast.show({message: "拍摄上传抛异常,原因:" + JSON.stringify(err),duration: 1000 * 3})throw new Error('上传抛异常' + JSON.stringify(err));})if (data.code === 200) {this.$refs.uToast.show({message: "拍摄成功,请前往我的相册查看",position: "center",duration: 1000 * 1.5})} else {this.$refs.uToast.show({message: "拍摄失败,原因:" + JSON.stringify(data.msg),duration: 1000 * 3})this.shootErrorCount += 1}};reader.readAsDataURL(blobData)} catch (e) {this.shootErrorCount += 1this.$refs.uToast.show({message: "拍摄失败,原因:" + JSON.stringify(data.msg),duration: 1000 * 3})console.error(e)}},clearInterval() {if (this.screenShotTimer) {return}this.screenShotCount -= 1this.screenShotTimer = setInterval(() => {if (this.screenShotCount > 0) {this.screenShotCount -= 1} else {clearInterval(this.screenShotTimer)this.screenShotTimer = nullthis.shootErrorCount = 0}}, 1000)}},}
</script>

ImageDataToBlob 方法

// Uint8ClampedArray 转blob
export function ImageDataToBlob(imageData) {let w = imageData.width;let h = imageData.height;let canvas = document.createElement('canvas');canvas.width = w;canvas.height = h;let ctx = canvas.getContext('2d');ctx.putImageData(imageData, 0, 0);return new Promise((resolve) => {canvas.toBlob(resolve);});
};

控制控制台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

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

相关文章:

uniapp H5 对接 声网,截图

文章目录 安装依赖创建容器容器样式 javascript代码ImageDataToBlob 方法 控制控制台LOG输出 安装依赖 版本"agora-rtc-sdk-ng": "^4.22.0", 创建容器 <template><view class"videoValue " id"videoValue"><u-toast…...

家谱管理系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库…...

【LeetCode】200、岛屿数量

【LeetCode】200、岛屿数量 文章目录 一、并查集1.1 并查集1.2 多语言解法 二、洪水填充 DFS2.1 洪水填充 DFS 一、并查集 1.1 并查集 // go var sets int var father [90000]intfunc numIslands(grid [][]byte) int {n, m : len(grid), len(grid[0])build(grid, n, m)for i …...

idea报错:There is not enough memory to perform the requested operation.

文章目录 一、问题描述二、先解决三、后原因&#xff08;了解&#xff09; 一、问题描述 就是在使用 IDEA 写代码时&#xff0c;IDEA 可能会弹一个窗&#xff0c;大概提示你目前使用的 IDEA 内存不足&#xff0c;其实就是提醒你 JVM 的内存不够了&#xff0c;需要重新分配。弹…...

python ai ReAct 代理(ReAct Agent)

ReAct 代理&#xff08;ReAct Agent&#xff09;是一种结合了推理&#xff08;Reasoning&#xff09;和行动&#xff08;Action&#xff09;的智能代理框架&#xff0c;旨在通过交互式的方式解决复杂任务。ReAct 的核心思想是让代理在完成任务时&#xff0c;能够动态地推理下一…...

HTML入门教程|| HTML 基本标签(2)

HTML 列表 HTML列表 HTML 无序列表 ul 元素表示无序列表。 ul 元素中的项目使用 li 元素表示。 元素没有在HTML5中定义任何属性&#xff0c;并且您使用CSS控制列表的显示。 HTML5中的 type 和 compact 属性已过时。 您可以在以下代码中查看正在使用的 ul 元素。 <!D…...

MySQL root用户密码忘记怎么办(Reset root account password)

在使用MySQL数据库的的过程中&#xff0c;不可避免的会出现忘记密码的现象。普通用户的密码如果忘记&#xff0c;可以用更高权限的用户&#xff08;例如root&#xff09;进行重置。但是如果root用户的密码忘记了&#xff0c;由于root用户本身就是最高权限&#xff0c;那这个方法…...

groovy:多线程 简单示例

在Groovy中&#xff0c;多线程编程与Java非常相似&#xff0c;因为Groovy运行在Java虚拟机&#xff08;JVM&#xff09;上&#xff0c;并且可以利用Java的所有并发工具。以下是一些在Groovy中实现多线程编程的方法&#xff1a; class MyThread extends Thread {Overridevoid…...

SOME/IP 协议详解——序列化

文章目录 0. 概述1.基本数据序列化2.字符串序列化2.1 字符串通用规则2.2 固定长度字符串规则2.3 动态长度字符串规则 3.结构体序列化4. 带有标识符和可选成员的结构化数据类型5. 数组5.1 固定长度数组5.2 动态长度数组5.3 Enumeration&#xff08;枚举&#xff09;5.4 Bitfield…...

三、GIT与Github推送(上传)和克隆(下载)

GIT与Github推送&#xff08;上传&#xff09;和克隆&#xff08;下载&#xff09; 一、配置好SSH二、在Github创建仓库三、git克隆&#xff08;下载&#xff09;文件四、git推送&#xff08;上传&#xff09;文件到远程仓库 一、配置好SSH Git与Github上传和下载时需要使用到…...

18.2、网络安全评测技术与攻击

目录 网络安全测评技术与工具网络安全测评质量管理和标准 网络安全测评技术与工具 漏洞扫描技术可以用于测评&#xff0c;测评你安不安全&#xff0c;也可以用来风险评估安不安全&#xff0c;风险大不大 漏洞扫描包含网络安全漏洞扫描、主机安全漏洞扫描&#xff0c;还有数据…...

在 ArcGIS Pro/GeoScene Pro 中设计专题地图的符号系统

原始 按颜色对面进行符号化 打开符号系统 选择主符号系统 选择字段及其计算方式 更改临界值</...

CSS2笔记

一、CSS基础 1.CSS简介 2.CSS的编写位置 2.1 行内样式 2.2 内部样式 2.3 外部样式 3.样式表的优先级 4.CSS语法规范 5.CSS代码风格 二、CSS选择器 1.CSS基本选择器 通配选择器元素选择器类选择器id选择器 1.1 通配选择器 1.2 元素选择器 1.3 类选择器 1.4 ID选择器 1.5 基…...

移动端如何实现上拉加载

一、理解上拉加载的原理 上拉加载是一种在移动端很常见的交互方式&#xff0c;其原理是当用户在页面上向上滑动&#xff08;即滚动条接近底部&#xff09;时&#xff0c;触发一个加载更多数据的操作。这通常涉及到对滚动事件的监听以及判断滚动位置是否达到了触发加载的阈值。…...

【mysql】linux安装mysql客户端

参考文章&#xff1a; MySQL系列之如何在Linux只安装客户端 linux下安装mysql客户端client MySQL Community Downloads 查看linux版本方法&#xff1a; lsb_release -a cat /proc/version下载文件&#xff1a; rpm -ivh mysql-community-*可以删除错误的包&#xff1a; RP…...

YOLOv5部署到web端(flask+js简单易懂)

文章目录 前言最终实现效果图后端实现 主界面检测函数检测结果显示 前端实现 主界面(index.html&#xff09;显示图片界面 总结 前言 最近&#xff0c;老板让写一个程序把yolov5检测模型部署到web端&#xff0c;在网页直接进行目标检测。经过1个星期的努力&#xff0c;终于实…...

【机器学习】深度学习(DNN)

文章目录 1. 神经网络结构2. 训练步骤3. 反向传播4. 为什么深&#xff0c;而不是宽&#xff08;模块化&#xff09;5. 初始化参数能否全为0&#xff1f; 1. 神经网络结构 输入层隐藏层&#xff1a;用于特征转换输出层&#xff1a;用于分类技巧&#xff1a;将网络中的参数写成矩…...

12.30-1-5学习周报

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 文章链接摘要Abstract一、方法介绍1.HAT-CIR2.Horde3.DWGRNet 二、实验总结 文章链接 https://arxiv.org/pdf/2405.04101 摘要 本博客介绍了论文《Continual lea…...

【MySQL】数据操作

数据操作 一、INSERT1、介绍2、语法3、语法介绍4、注意事项5、示例 二、插入否则更新1、介绍2、语法3、语法介绍4、示例 三、ROW_COUNT1、介绍2、示例 四、REPLACE1、介绍2、语法3、示例 五、UPDATE1、介绍2、语法3、示例 六、DELETE1、介绍2、语法3、语法介绍 七、TRUNCATE1、…...

python数据分析:使用pandas库读取和编辑Excel表

使用 Pandas&#xff0c;我们可以轻松地读取和写入Excel 文件&#xff0c;之前文章我们介绍了其他多种方法。 使用前确保已经安装pandas和 openpyxl库&#xff08;默认使用该库处理Excel文件&#xff09;。没有安装的可以使用pip命令安装&#xff1a; pip install pandas ope…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...