0:前言最近公司做的一个项目需求是实现多人视频会议聊天，查阅资料，决定使用HTML5新支持的WebRtc来作为视频通讯。客户端使用支持HTML5浏览器即可，如chrome，服务器段需要提供两个主要的服务功能，一个是信令服务器(SignalingServer)，一个是NAT穿透服务器(ICEServer)。信令服务器使用websocket来实现业务上的功能，如呼叫，加入会议，挂断等等，NAT穿透服务器使用chrome内置的constpeerConnectionConfig={iceServers:[{url:'stun:stun.l.google.com:19302'}]};1:... 在上一节中，我们把RTCPeerConnection双方的sdp和ice互换以后，音视频的通道就建立起来了，但是上一节是在一个程序中的，这种程序在现实中，并没有用处。通常的应用是这样的一个场景，一个端进行视频的推送，另一端进行视频的接收。幸好的是双方的sdp和ice都是字符串形式的，我们可以通过websockets把对方的sdp和ice先发到服务器上，然后进行互换。关于websockets的服务端，我们这里采用的是python，关于python的使用如果是新手，可以参考别的教程，这是使用的版本是3.8。asyncdefsend_chat(websocket):"""Receiveand... 有了前面的准备，离视频会议的建设又进了一层了。我们现在准备好了音视频流的数据。双方的视频数据需要交给对方，对方就能看到相关的数据，达到了视频会议的效果。假设我们是一个视频会议的发起人，我们当然先要知道，我们想跟谁进行视频通话，对方需要把相关的环境数据，比如我用的是什么视频编码啊，我们通信的协议是什么？我们把这些数据信息取了个名字叫sdp。互相交换了环境数据后，被叫端需要把数据的地址准备好，这些数据协议我们成为ice，当数据准备完成以后，被叫端把ice发给发起端，发起端通过这个ice就能够连上被叫端了。简单的总结，互换两种信息，环境描述数据和数据地址。这两种叫为sdp和ice。下面的例子为了简单... 前面两篇文章，分别用了不同的api获取到了摄像头和桌面应用的数据。在一些设备中，流媒体插件比较多，比如有些设备有多个的摄像头，多个的音频输入或输出口，我们需要把这些设备都枚举出来，在会议直播的时候，能够顺利的切换这些音视频设备。webrtc中，同样提供了api，我们可以很方便的就把这些设备枚举出来，同样的采用js的形式，枚举出navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);在gotDevices函数下，打印出设备信息。[{"deviceId":"default","kind":"... 在会议系统中，我们有时不仅仅需要摄像头的数据，在一些场景下，需要演示桌面上的程序，同样的webrtc也提供了这个功能，而且都可以从浏览器上直接获取。前面中，我们通过getUserMedia就可以获取摄像头和麦克风的数据，在webrtc中，获取桌面或者指定某个程序，通过getDisplayMedia可以得到。main.js#获取显示桌面数据的videoconstvideo=document.querySelector('video');#getUserMedia参数，这里只获取视频constconstraints={audio:false,video:true};... Webrtc互联网发展到现在的这个程度，经过了三个时代，第一个是文字时代，第二个是图片时代，现在到了第三个时代，视频流的时代。得益于移动互联网的发展，现在基本上是每个人一台手机了。而移动互联网的发展中，有一项技术更是突飞猛进的进步。那就是音视频的技术。在生活中我们可以拿上手机随时随的的找人视频聊天；在工作中，我们可以在视频会议中，讨论我们的工作；这些用到的底层的技术都是音视频的技术。而音视频的技术太广了，在十几年前，我们都不知道怎么从哪里学起，音视频的资料更是非常的稀少。能够掌握到一点音视频的处理，都可以成为牛人。但是现在不一样了，随着开源代码的发展，我们在入门音视频的道路上，会更好走。在音视... Vue3的变化官网地址：https://v3.cn.vuejs.org/guide/migration/introduction.html一、对比vue2的变化1.优点vue3支持vue2的大多数特性，实现对vue2的兼容vue3对比vue2具有明显的性能提升打包大小减少41%初次渲染快55%，更新快133%内存使用减少54%更好的支持TypeScript使用Proxy代替defineProperty实现响应式数据2.性能提升的原因静态标记vue2从根节点开始对虚拟dom进行全量对比（每个节点不论写死的还是动态的都会一层一层比较）vue3新增了静态标记与上次虚拟dom对比的时候，只对比带有pa... 不知道有没有这样的兄弟，学习Vite的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手Vite有所帮助。话不多说，开干！css.preprocessorOptions传递给CSS预处理器的配置选项，这些配置会传递到预处理器的执行参数中去。例如，在scss中定义一个全局变量：//vite.config.jsimport{defineConfig}from'vite'//使用defineConfig工具函数获取类型提示：exportdefaultdefineConfig({css... 观看之前请先熟悉promise的基本使用一、剖析promise由哪些东西组成在日常的使用中，我们可以知道，一个完整的promise应当包含成功、失败、进行中这三个状态，同时还有resolve，reject两个改变状态的成员函数。最后还会有一个then函数来接收promise的执行结果在了解了上述的内容之后，一个promise的雏形就出来了classmyPromise{constructor(executor){//默认状态为pendingthis.status='pending'//成功的默认值为undefinedthis.successVal=undefined//失败的默认值为... Vue通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法）实现数据劫持。下面简单记录一下，vue监听数据变化的原理letobj={name:'lnj'};classObserver{//只要将需要监听的那个对象传递给Observer这个类//这个类就可以快速的给传入的对象的所有属性都添加get/set方法constructor(data){this.observer(data)}observer(obj){if(obj&&typeofobj==='object'){//遍历取出传入对象的所有属性,给... 如果你是初学者，那么学习三维动画可能是一项比较困难的任务。但是，使用three.js这个强大的JavaScript库，可以让你轻松地制作出精美的三维动画。首先，我们需要导入three.js库，并创建场景、相机和渲染器。场景是三维空间中所有物体的容器，而相机则决定了我们所看到的视角。渲染器则负责将场景呈现在屏幕上。接下来，我们可以使用OrbitControls插件来控制相机的位置和视角，并使用GLTFLoader插件来加载三维模型文件。这里我们使用的是donuts.glb文件，它包含了一个甜甜圈的三维模型。为了让我们的场景更加逼真，我们还可以使用RGBELoader插件来加载环境贴图，并将它设置... 题目varfoo=function(){console.log("foo1")}foo()varfoo=function(){console.log("foo2")}foo()functionfoo(){console.log("foo1")}foo()functionfoo(){console.log("foo2")}foo()这里我会要求面试者从上到下依次说出执行结果。普遍多的面试者给出的答案是：foo1、foo2、foo1、foo2。虽然在我看来这是一道简单的面试题，但是也不至于这么简单吧😱~~~当然面试本来就是一个相互讨论的过程，那就和面试者沟通... indexedDB是一种底层API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该API使用索引实现对数据的高性能搜索。虽然WebStorage在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而IndexedDB提供了这种场景的解决方案。（1）IndexedDB：索引数据库，操作简便，目前主流浏览器正努力实现对indexDB的支持。WebSQLDatabase实际上已经被废弃，而HTML5的支持的本地存储实际上... /***这是前端浏览器indexDB工具类*可实现创建数据库增删改查操作*date20220626authorbylin*/exportclassdbActive{/***构造函数*@paramdbnametypestring数据库名称*@paramtbNametype[]表对象名称多个表数组*@paramfieldtypeobj表字段对象，直接传入新增数据的对象如{height:15},那么将height作为字段名*/constructor(dbname,tbName,field){this.db=null;//数据库对象this.tableName=tbNa... reduce函数可以根据需要进行累加、过滤、分组、映射等操作，是一个非常强大的数组方法。在数据处理时使用的非常频繁，很多复杂的逻辑如果用reduce去处理，都非常的简洁，在实际的开发工作过程中，积累了一些常见又超级好用的reduce技巧的代码片段，筛选了如下10个，以供大家参考reduce介绍reduce是数组的方法，可以对数组中的每个元素依次执行一个回调函数，从左到右依次累积计算出一个最终的值。其语法为：arr.reduce(callback(accumulator,currentValue[,index[,array]])[,initialValue])其中，callback是每个元素执行... 老实说我不喜欢用forEach，因为它导致的一些bug总是这么不经意，盘点我不喜欢的原因原因一：不支持处理异步函数先看一个例子：asyncfunctiontest(){letarr=[3,2,1]arr.forEach(asyncitem=>{constres=awaitmockSync(item)console.log(res)})console.log('end')}functionmockSync(x){returnnewPromise((resolve,reject)=>{setTimeout(()=>{resolve(x)},1000*x)... 一、useCallback的作用usecallback不是用来解决组件中有过多内部函数导致的性能问题：1.我们要知道，js创建一个函数的成本是非常小的，这点计算对于计算机来说是小case2.其实使用useCallback会产成额外的性能：对deps的判断3.其实每次组件重新渲染时，都无所谓避免重新创建内部函数，因为即使useCallback的deps没有变，它也会重新创建内部函数作为useCallback的实参那么，它的作用到底是什么？useCallback的作用其实是用来避免子组件不必要的reRender：首先，假如我们不使用useCallback，在父组件中创建了一个名为handleCli... 本文的目的，是为了让已经有Vue2开发经验的人，快速掌握Vue3的写法。因此，本篇假定你已经掌握Vue的核心内容，只为你介绍编写Vue3代码，需要了解的内容。一、Vue3里script的三种写法首先，Vue3新增了一个叫做组合式api的东西，英文名叫CompositionAPI。因此Vue3的script现在支持三种写法，1、最基本的Vue2写法<template><div>{{count}}</div><button@click=""> ... 就总体的来说：*_*+识别，IE专用的条件注释，对象的实际宽度不同，消除ul、ol等列表的缩进，透明，圆角，Select控件永远处于最上层，居中问题text-align、margin:auto，浮动后IE6解释外边距为实际边距的双倍加上display:inline，字体大小，空格大小。-----------------------------------------------------------------------------1.CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义!important可被FireFox和IE7识别*可... 
