anyRTC的博客

上传的图片限制长宽相同；只能上传图片；图片大小限制 500k当前项目仅需要上传的图片信息上传： Upload 上传(element plus 组件)实现理论：通过组件 Upload 进行图片上传前校验方法判断是否需要裁剪、是否是图片、是否超过大小限制；裁剪后的图片限制大小；上传的图片信息暴漏出组件；组件调用img-url 默认预览的图片@img-upload 上传所需的最终图片裁剪时弹窗显示逻辑图片相关方法封装

vue3 + element plus 的项目。

查了好久，觉得使用 Ant Design Vue 中的 Tree树形控件因项目需求，节点的移动不通过拖拽移动，需要通过弹窗实现节点的移动，因此基于添加、删除实现。当前仅使用节点添加、删除、移动(删除+添加)以及懒加载。

/ 组件记录(默认) const virtualRecord = reactive({

今天的内容是`基于vue3实现自己的组件库`系列第二章,本文默认你会安装和创建vue3项目

web技术分享| 基于vue3实现自己的组件库第二章：Pagination组件

以上两种实现方式我们可以根据两个因素 来决定哪一种更加适合自己：节点数量 的多少、排布的密集度 。前者适合节点数量较少，排布比较稀松，例如，出租车轨迹回放，出租车行驶速度快，周期上报的时间也会相对较长。后者更加针对节点数量巨大、排布密集的路径，按秒记录位置的飞机行进轨迹，精细的地理边界等等。无论选择两种方式，我们都需要先收集到客户端上报的信息，这些信息可以自定义，通常我们会包含：经纬度、速度、逆编码之后的地理位置、方向、海拔 等基本地理信息，同时我们也可以加入一些自定义 的信息，例如：人员信息（头像昵称等）

`基于vue3实现自己的组件库`

Web 实现客户端录音或录像的流程大致分为：采集音频/视频开始录制并监听回调下载 Or 转码采集音频/视频浏览器兼容注意事项除 127.0.0.1、localhost URL 以外，网站必须配置 SSL 证书，也就是网站需要 https 环境需要音频/视频输入媒体设备，例如：麦克风、摄像头，包含内置。开始采集利用 navigator.mediaDevices 对象的 getUserMedia 方法采集音频和视频媒体流。// 老的浏览器可能根本没有实现 mediaDevice

HTMLsrc 与 source的区别source标签可以写多个，并指定type ,兼容不同浏览器解码支持。但src只能写一个source标签的type属性的属性值有video/ogg，video/mp4，video/webm<video id="leftVideo" controls loop muted> <source src="./xxx.mp4" type="video/mp4"/></video><video id="rightV

创建vue构造函数function Vue(option) { this.$option = option;}挂载方法Vue.prototype.$mount = function(element) { const rootNode = document.getElementById(element); if (rootNode) { this.$rootNode = rootNode; } else { throw new Erro

什么是呼叫邀请 SDK？微信的音视频呼叫想必大家都用过吧，它就是呼叫邀请在社交场景的表现形式之一，同时呼叫邀请还被运用到很多场景：娱乐场景：PK 连麦、抢麦教培场景：举手发言企业服务：类企业微信金融服务：远程面签、保险定损更多：应急指挥调度、健康医疗呼叫邀请需要具备以下功能：一套完善的呼叫邀请流程音频&视频通讯能力自由灵活，方便业务逻辑拓展开放的媒体控制权限（管理自己的媒体输入设备等）一个在线体验的 Demo这里有一个简单基础的 DEMO，请点击体验。快速实现.

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会

监听开始事件EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。d

白板通常会提供多种工具类型，每种工具的用途也各不相同，例如下表：工具名称用途框选工具框选其他图形涂鸦工具涂鸦橡皮擦工具擦除画笔痕迹或者图形激光笔工具激光笔直线工具绘制直线箭头工具绘制箭头矩形工具绘制矩形椭圆工具绘制椭圆文本工具插入文本正因此白板除了要判断当前画笔的工具类型的同时，还要对该工具类型在白板上的表现形式进行区分和处理，这个工作会面临着许多的条件判断，所以我们会借助一些算法来辅助我们判断是否满足条件，根据.

最近做白板项目，最重要的工具栏模块在网上搜了搜都没找到想要的，狠下心自己原生封装一个。最终效果展示：使用白板 SDK使用 anyRTC 的白板SDK项目地址：https://demos.anyrtc.io/whiteboard-next-demo/如有需要，可前往 anyRTC 官网咨询客服下载源码原理封装一个白板工具栏，通过传入容器id，工具相关配置，白板实例，自动生成对应的左侧白板工具栏容器创建<div id="ToolBarWhiteBoard"></div&gt

设置CSS3 filter(滤镜) 属性filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；invert(%) 反转输入图像。值定义转换的比例。100%

要回那些还给老师的数学函数。从初中数学开始，我们就开始接触各种算法公式：三角函数、勾股定理、正弦定理……，再到高等数字的微积分、线性代数。当我成为了一名程序员，我发现我几乎用不到，难道我写的是低等代码？那我岂不是低等程序员了？幸运的是，最近要开发一个白板 SDK，从无足无措到查阅文档，重拾物理动画、三角函数、还有向量、矩阵变换等等，于是值得深思的是，作为程序员，如何让代码更加高效，应该是我们不断思考的问题，同样是实现一个功能，不同的实现方式，直接影响到运行速度，间接影响到用户体验。好在人类所知的数..

要实现音频可视化，实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext。AudioContext接口表示由链接在一起的音频模块构建的音频处理图，每个模块由一个AudioNode表示。音频上下文控制它包含的节点的创建和音频处理或解码的执行。在做任何其他操作之前，您需要创建一个AudioContext对象，因为所有事情都是在上下文中发生的。建议创建一个AudioContext对象并复用它，而不是每次初始化一个新的AudioContext对象，并且可以对多个不

了解 LRU 之前，我们应该了解一下缓存，大家都知道计算机具有缓存内存，可以临时存储最常用的数据，当缓存数据超过一定大小时，系统会进行回收，以便释放出空间来缓存新的数据，但从系统中检索数据的成本比较高。缓存要求：固定大小：缓存需要有一些限制来限制内存使用。快速访问：缓存插入和查找操作应该很快，最好是 O(1) 时间。在达到内存限制的情况下替换条目：缓存应该具有有效的算法来在内存已满时驱逐条目如果提供一个缓存替换算法来辅助管理，按照设定的内存大小，删除最少使用的数据，在系统回收之前主动释放出空间

前言屏幕共享在工作中是非常实用的功能，比如开会时分享ppt，数据图表等，老师也可以分享自己的屏幕，实现线上教学，那么屏幕共享是如何实现的呢，今天就跟随笔者一起研究一下吧！获取button元素const startButton = document.getElementById('startButton');检测浏览器是否支持mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

在开始打造我们自己的实时聊天系统之前，我们需要先思考????几个问题：用户体量大概多少？如何扩容？用户分布的区域？如何保证消息（低延时、必）送达？做过 IM 或信令的小伙伴都知道，实时传输对服务端有着颇高的要求。就以社交 APP 为例，每秒种要处理成百上千甚至更多的文字和图片的传输；弱网丢包的情况要保证消息的完整性的同时还要确保消息已送达；这其中的技术原理和解决方案不是一个 WebSocket 所能涵盖的。就消息必达而言，系统除了要有择优链路能力以外，还要具备多活链路。比如：一旦有一条链路出现

前言大家好，笔者以往发布过很多关于WebRTC的知识，和很多基于anyRTC WebSDK开发的音视频通讯示例，收获了很多开发人员的一致好评，在以往的示例中笔者是基于Vue框架进行编写，后台有小伙伴私信笔者，希望笔者出一个基于React框架的音视频示例，笔者在收到私信的第一时间就开始着手编写，现在把它发布出来供大家参考。开发准备在开始写代码之前还需要做一些准备工作，如果你之前没有使用过 anyRTC Web SDK 这里还需要花几分钟时间准备一下， 详见：开发前期准备创建React程序全局安装

大家好，我是初冬，一直想研究一下人工智能，但是一直再观望，上一期我写来一篇《一篇前端图像处理秘籍》，想着趁热打铁，于是卯足干劲，就有了前端换脸的想法，那就写一个换脸的 Demo 吧，因此就有以下图片中的 DEMO。今天我们就以这个 DEMO 来看看，如何利用 tfjs + canvas 实现前端换脸。技术分析前端换脸（易容术）前提就是获取到人脸的范围，但是目前也就只有 AI 能够起到关键性的作用，因为关键在于人脸的识别以及计算五官的位置和大小，从而可以满足我们天马行空的需求，怎么样才能让它跟灭霸打响

音视频的录制音视频的分为服务端录制和客户端录制，下面主要讲的是利用webrtc进行客户端录制的方式。因为WebRTC 录制音视频流之后，最终是通过 Blob 对象将数据保存成多媒体文件的，Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。要从

在短视频和直播带货霸占了流量铁王座的当下，产品之间的竞争十分激烈，在抖音短视频问世以来，随其后效仿的产品也不计其数。产品要想脱引而出，仅靠画质和流畅度是很难取胜的，不仅要节省流量开支同时还要保证画质的超高清，与其同时还要有丰富的、标新立异的玩法来吸引用户。随着 AI 技术的成熟，场景也变得丰富、多样了起来，比如：修复老电影、换脸特效、2K 升 4k、体育赛事 、特效 app。但是无论产品需求怎么变，最终还是得在图像处理上下功夫，那么今天我们就从简单的图片处理入门，由浅入深的去探索视频处理，接触更多的音视

流程简介通过MediaDevices.getUserMedia()获取音频和视频轨道。通过createOffer()启动与远程对等方的新 WebRTC 连接。用信令通信上传错误并控制启动或关闭会话。互换媒体和客户端信息初始化操作元素const startButton = document.getElementById('startButton');const callButton = document.getElementById('callButton');const