前端基础
HTML+CSS+JavaScript
M&Q
这个作者很懒,什么都没留下…
展开
-
WebRTC学习总结(4):多人视频通话的实现思路
在1v1视频通话中,虽然有发起人和接收人的概念,但是消息的发送和接受是“没有对象”的,也就是,通过服务器转发的message中没有指明接受消息的对象,这在房间里最多容纳两个人的前提下不会产生问题,但是在多人通话的过程中,就失效了。对于我来说,我采取的措施是在offer、answer和candidate消息中加入新的属性,也就是“callee”, 即呼叫人,举个例子:function handleIceCandidate(event) { //将本地的candidate发送给对方 cons原创 2020-06-08 16:20:37 · 1100 阅读 · 2 评论 -
WebRTC学习总结(3):从1v1视频通话的实现说一说RTCPeerConnection的建立
RTCPeerConnection 接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建,保持,监控,关闭连接的方法的实现。一对一视频对话的时候,连接过程如下所示:这个过程是不是看起来还挺清晰的?但是这只是表述了媒体信息交换的过程,别忘了还有网络信息~接下来我们就先好好捋一捋PC建立的过程吧!A打开本地视频流,创建PeerConnection对象,将本地音视频流封装成MediaStream添加到PeerConnection中;A通过CreateOffer创建offer信息,原创 2020-06-08 15:35:09 · 1078 阅读 · 0 评论 -
WebRTC学习总结(2):Nodejs和socket.io搭建信令服务器
信令服务器webRTC采用的是“端对端”对等连接,在信息通路形成之后,可以没有服务器参与,但是信息通路的搭建不能没有信令服务器。信令服务器主要用于交换以下信息:会话控制信息:比如加入房间,离开房间,禁言,错误等信息。媒体信息:中转通过SDP来表示的offer,answer信息,如如各自的音视频解码方式,带宽等。网络信息:通过信令服务器“发现”参与P2P连接的两个webRTC客户端。首先将由一端将网络相关信息传到信令服务器,服务器帮它交换到对端,对端拿到你的信息后,若在同一局域网内,直接通过P2P原创 2020-06-03 16:06:11 · 1158 阅读 · 1 评论 -
WebRTC学习总结(1):本地视频的获取和录制
WebRTC学习总结(1):本地视频的获取和录制简单介绍1. 本地视频的播放2. 视频录制简单介绍WebRTC ( Real-Time Communications)是一个可以在 Web 应用程序中实现音频、视频和数据的实时通信的开源项目,它封装了很多音视频的采集、处理功能,比如音视频流的编解码、降噪和回声消除等。通过WebRTC,我们可以方便地获取优化后的媒体流,将其输入到本地或转发给其他对等端。WebRTC设计的初衷是为了在无插件的条件下实现两个浏览器之间**点对点(peer to peer,P2原创 2020-06-03 11:05:13 · 2401 阅读 · 0 评论 -
【报错】(webRTC):navigator.mediaDevices undefined
最近做了一个通过webRTC实现在线视频功能的网页,在自己的电脑上用localhost打开两个网页是可以的,但是设置了一个简单的HTTP请求的NodeJS服务器之后,在局域网中用ip地址访问就不行了,浏览器会弹出 navigator.mediaDevices undefined 的错误。网上搜了蛮多的,终于找到了原因:通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境:localhost 域 开启了 HTTPS 的域 使用 f原创 2020-05-11 16:27:32 · 6289 阅读 · 2 评论 -
【报错】(Javascript):Cannot set property 'onclick' of null
这个错误呢,很明显,就是找不到设置“onclick”属性的对象,有两个解决思路:1. 改变JS文件的加载位置原因:当js文件放在head里面时,如果绑定了onclick或者onmouseover事件,就会出现如上图类似的错误,是因为浏览器的加载你写的html文档的顺序是从上往下,加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到onclick绑定的按钮节点,于是报错。解决办法:第一,把js文件放在底部加载;第二,使用window.onload=function(){}包裹js内容。原创 2020-05-11 16:03:32 · 926 阅读 · 0 评论 -
【JavaScript】4.初识 jQuery
本来这一篇要写JavaScript的事件处理的,但是内容好多啊,这一套那一套的,看得有点晕……查资料的时候发现好些东西大家都是用 jQuery 实现的,据说挺好上手的,那我就先看看 jQuery,之后和JS对照着学吧。jQuery是一个JavaScript函数库,它和JS的联系与区别是:JavaScript是用于Web客户端开发的脚本语言,Ajax是基于JS语言,主要组合JS、CSS、X...原创 2020-04-23 11:23:11 · 509 阅读 · 0 评论 -
【JavaScript】3.创建函数
DOM的树状结构 节点:元素节点、文本节点、属性节点 节点关系:同级、父子级等等 获取节点:querySelector、querySelectorAll等等 节点操作:增删改查 事件绑定:事件流和事件委托应该了解一下...原创 2020-04-17 15:37:07 · 357 阅读 · 0 评论 -
【JavaScript】2.复杂数据类型:数组和对象
三、对象对象是一个非常重要的概念,一定要灵活掌握:对象:属性的无序集合,当属性值为函数的时候,我们叫这个函数为对象的方法。 数组:元素的有序集合。了解数组的常用方法 日期对象:获取年月日时分秒 数学对象:获取随机数 了解其他对象:正则表达式、包装对象,其实函数也是对象,不过这些简单了解一下就行。作者:李吉阳链接:https://zhuanlan.zhihu.com/p/...原创 2020-04-17 11:41:09 · 604 阅读 · 0 评论 -
【JavaScript】1. 变量声明与控制结构
JavaScript web 开发人员必须学习的 3 门语言中的一门:HTML定义了网页的内容 CSS描述了网页的布局 JavaScript网页的行为本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑...原创 2020-04-16 19:42:42 · 370 阅读 · 0 评论 -
【HTML+CSS】5.简单代码分析
通过之前的内容学习了HTML和CSS基础知识之后,我们就可以上手写一些”徒有其表“的网页了~在这个过程中,我们可以参考别人的网页设计和代码,多多学习总结。下面是一个登陆界面的代码,来自黑子Kuroko,网页制作:一个简易美观的登录界面。我把其中的HTML和CSS代码写了比较详细的注释,感受一下效果。HTML部分:CSS部分:/*主体部分*/body { back...原创 2020-04-15 19:05:11 · 589 阅读 · 0 评论 -
【HTML+CSS】4.CSS排版:文字样式和文本属性
经过漫长的上一篇,这篇内容总体来说内容比较短,也比较简单,连目录都省了~1.CSS字体的属性CSS字体常用的功能如下表所示,都比较简单,就不展开说了:但还是有些需要注意的地方:CSS中的单位是必须要写的,因为它没有默认单位。font-size的单位可以是px(像素)、em(印刷单位)、%(百分比,相对周围的文字的大小)、in(英寸)、cm(厘米)、mm(毫米)、pt(点,1点...原创 2020-04-15 11:01:44 · 876 阅读 · 0 评论 -
【HTML+CSS】4.CSS布局:盒模型和定位
之前讲到,样式是CSS语法的最小单元,每一个样式都由选择器和声明(规则)两部分组成,而声明又由属性和属性值组成。上一篇讲了选择器,这里就开始进入“属性”部分了。要想灵活应用CSS设计出美观且多样的页面,就需要熟悉CSS的各类“属性”,CSS中包含超过100种属性,包括字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。作为初学者,我觉得我们应该循序渐进,先集中熟悉最常用...原创 2020-04-14 11:51:54 · 1827 阅读 · 0 评论 -
【HTML+CSS】3.CSS选择器
css样式表乍一看挺简单的,但是你随便下一个实例,哇,这都啥啊,点点划划的看不懂……还是继续学习吧!前面说过了,CSS 语法规则就是:选择器+声明。那我们就首先看看有哪些选择器吧。1 标签选择器标签选择器也称为元素选择器,是指直接使用HTML标签作为选择器名称。html {background-color: black;} /*整个文档添加黑色背景*/p {font-size...原创 2020-04-13 19:44:49 · 437 阅读 · 0 评论 -
【HTML+CSS】2. CSS基础整理
CSS 指层叠样式表 (CascadingStyleSheets)是为了解决内容与表现分离的问题CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。注释是用来解释...原创 2020-04-13 15:47:29 · 242 阅读 · 0 评论 -
【HTML+CSS】1. HTML基础整理
最近也是刚开始接触HTML和CSS的内容,小小整理一下。我们知道,HTML(HyperTextMarkupLanguage,超文本标记语言)是用来描述网页的一种语言,通过使用标记标签(markup tag)来描述网页。HTML 标签由尖括号包围,且通常成对出现。1. <!DOCTYPE> 声明首先,在HTML的开头,需要有一个声明<!DOCTYPE html&...原创 2020-04-12 17:43:02 · 256 阅读 · 0 评论