1. 音视频基础 本文将给大家进行音视频基础的常规知识点的梳理。当然，短短的一篇文章并不能让大家立即变成音视频领域的专家，但这些知识点已经基本涵盖了音视频的入门知识。我们将按照下面的内容给大家 * 音视频的基本概念 * 音视频播放的流程 * 音视频编解码 * 音视频封装格式 * 音视频常见的传输协议 1.1 音视频基本概念 首先，我们需要先主了解下一些音视频常见的技术概念以及简单的原理。 1.1.1 采样率 采样，是指把物理信号转化为数字信号的过程。采样频率，定义了每秒从连续信号中提取并组成离散信号的采样个数，单位为赫兹(Hz)。形象来说，采样频率是指将模拟信号转换成数字信号时的采样频率，也就是单位时间内采样多少点。

注：本文需要有一定的 PWA 基础 1. 什么是 PWA？ 要知道一个东西是什么，我们通常可以从它的名字入手 因此我们看下 PWA 的全称是： Progressive Web App 回答 what 这种问题，重点在于名词，因此 PWA 是一个 APP，一个独立的、增强的、Web 实现的 APP 要达到这样的目的，PWA 提供了一系列的技术 > 标准，如下图所示： 以后我们的 web 站点可以像 app 一样，这难道不是一个令人兴奋的事情吗？ 所以 PWA 是值得我们前端开发者一直关注的技术！

背景 其实浏览器中的人脸识别 API 已经发布有一段时间了，从Chrome 70 版本以上就有了。其中包括了人脸，文本或 QR 码的识别，基本上覆盖了当前互联网应用的大部分场景。 随着云服务的发展，现在很多跟图像识别相关的服务基本都集成在了 云服务 之中，前端的使用场景其实还是相对来说比较偏弱，但是对于各种爱折腾的前端er来说，玩玩还是可以的，不然怎么能满足内心那盛开的好奇心呢。 SHAPE DETECTION API [HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/] 图形识别这种对系统资源和设备的计算能力要求颇高的功能，通常只有底层的原生 API 能驾驭，流行的框架主要是开源的Open CV和各大移动平台的图形识别服务，浏览器层面主要有三个 API： 在 Console 控制台输入以下 JavaScript代码，就能验证你的浏览器是否支持相应的 API 了： * window.BarcodeDetector * window.FaceDetector * window.TextDetector

原文链接： https://zhuanlan.zhihu.com/p/33230026 [https://zhuanlan.zhihu.com/p/33230026] 作者：撒网要见鱼 前言 见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 ----------超长文+多图预警，需要花费不少时间。---------- 如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。 ----------正文开始---------- 最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。 因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料， 从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍。 展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系， 重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识。

目前web前端采用的直播技术一般分为以下几类：rtp/rtcp、rtmp、http-flv、hls。下面介绍不同协议 RTP/RTCP RTP 全称Real-Time Transport Protocol，用于媒体数据传输，RTCP用于配合RTP传输一些控制信息。RTP协议默认是基于UDP协议传输数据的, 延迟低可以做到毫秒级别。RTP协议在视频监控、视频会议、IP电话上有广泛应用。 在web平台通过webRTC通过RTP/RTCP协议实现媒体实时通信，webRTC是google开源的一项技术，并推广为w3c标准的前端的媒体数据传输方案，使得web简单的支持端到端音视频通信，webRTC包括是音视频采集，编码，传输一套整体方案。对于web开发者媒体采集、编码和传输基本透明实现，只需要调用部分API即可实现端到端的通信，直播领域一般浏览器对端都是一台服务器。 目前主流浏览器最新版本都基本支持，但是不同的平台和浏览器支持情况不尽相同，所以一般都会有后面几种降级方案。 RTMP RTMP协议是Real Time Message

先说明下，当然本方法不是真的黑掉淘宝服务器，只是通过在电脑本地做一些手脚，让女朋友没法打开淘宝页面而已。 整个东西原理简单，就是在浏览器装一个插件，该插件可以检测当前浏览的网站，并且在相应页面插入一段自己定义的代码。 说下这个办法得以实施的需要满足的条件是： 1. 首先，你得有一个女朋友（笑脸） 2. 你有电脑的控制权，可以偷偷地装上插件 3. 电脑用的是 chrome 浏览器（其他国产的应该也可以，不过还没试过） 4. 你懂一点点前端知识 好，接下来就介绍整个办法最核心的插件，就是大名鼎鼎的 tampermonkey ，人称油猴。这个插件就是可以运行多个自己定制化脚本的插件，得益于这个插件，你可以检测当前浏览网页的 url ，然后插入相应的自己的脚本。网上有很多很好用的油猴脚本，基本上相当于装一个插件，就有了很多插件的能力。同时自己写脚本也很简单，本文就是通过制作简单的脚本来达到我们目的的。 首先第一步得安装油猴插件，本教程需要大家装的是 chrome 插件： Tampermonkey - Chrome 网上应用店

前段时间接触了一些音视频、web直播相关的东西，加上Flash的即将终结、WebRTCd的兴起、小程序的流行，这里总结了一点个人学习收获和大家分享。 WEB直播，你需要先知道这些 直播知识小科普 1. 一个典型的直播流程：录制->编码->网络传输（推流->服务器处理->CDN分发）->解码->播放 2. IPB：一种常用的视频压缩方案，用I帧表示关键帧，B帧表示前向差别帧，P帧表示双向差别帧 3. GOP (Group of Pictures)：GOP 越长（I帧之间的间隔越大），B 帧所占比例越高，编码的率失真性能越高。虽然B帧压缩率高，但解码时CPU压力会更大。 4. 音视频直播质量好坏的主要指标： 内容延时 、 卡顿（流畅度） 、 首帧时长 5. 音视频直播需要克服的主要问题：网络环境、多人连麦、主辅路、浏览器兼容性、CDN支持等 6. MSE (Media Source Extensions)：W3C 标准API，解决 HTML5 的流问题（HTML5 原生仅支持播放 mp4/webm

上一篇 WebRTC直播技术(一)-初探WebRTC( http://imweb.io/topic/5930541b7720c3b21fa5c303 ) 大概介绍了WebRTC的基础知识以及sdp交互的过程。这篇文章主要讲解WebRTC连接建立的过程。 首先要掌握WebRTC连接建立过程，需要掌握几个知识点： NAT, ICE, STUN, TURN, DTLS等。如果之前有接触过P2P相关技术的同学可能就会比较容易理解。WebRTC是一个基于浏览器与浏览器之间的实时音视频通话方案，那么有于公网ip地址有限的问题，用户的浏览器常常位于NAT后，那么建立连接就涉及到了打洞技术。 NAT 由于当前使用的IPV4地址的长度限制只有32位，大多数终端都没有一个可以在互联网上可见的唯一IPV4地址。NAT是作为一种解决IPv4地址短缺以避免保留IP地址困难的方案，在IP数据包通过路由器或防火墙时重写来源IP地址或目的IP地址。 STUN

前言 编码，是每个程序员绕不开的话题。对于前端工程师而言，字符更是会直观地展示在界面上。 提起文字，大部分人的脑中，都会定式为规整排列的字符。但是林子大了什么鸟都有，世界上可是存在着6800+种文字，难免会飞出来一些诡异的鸟… 而号称“万国码”的Unicode，在实现编码与展示的时候，也会不会遇到一些奇葩的事情呢？ 事实上，可能你早已见识过了： -------------------------------------------------------------------------------- x̙͈̝͍͕̙̄͛̽̆͌́̕͟g̘̣̠̝̟̤̥̼̼̽͑͋̈̑̒͟͞q̛̤̦̝̘͎͋̔̋͌͒̆̋̚͡f̵̢̙͇̮̠̋̀͌̅̉̃̔͜͜͠͡r̢̜̩͙̭̲͓͈̈̀͑̆͋̚͢͜m̷̛͙̝̣̲̭͍͉̊̓̾̈̋̿̚͢͟͠s̷̡̩͔̮͈̜̊̽͂̆̈́̃̓͋̏ 热҈的҈字҈都҈出҈汗҈了҈

距离我们抛弃 IE6、7 已经两年多了，我们就一直眼巴巴的想着什么时候可以抛弃 IE8，然后就在上个月，我们决定开始抛弃 IE8 了，原因是我们的 IE8 用户已经掉到了 1% 以下。 当然本着用户体验至上，总得给这些用户一个提示吧。最直接的当然是直接判断 userAgent 中有无“MSIE 8”字段，但是毕竟“talk is cheap”，原生的 IE 肯定是没问题的，不过对于那些爱恨交织的国产双核浏览器，我实在是不清楚。于是简单测试了几个，如下图：

1.WEBRTC简介 WebRTC是一个开源的项目，可以提供浏览器，手机应用之间实时通信能力。 同时，这一功能已经内置于现代浏览器中，所以它可以做到无须借助第三方软件或插件便可以在开发网络中传输高质量音视频流。 * 主要JavaScript API * MediaStream 音视频流对象 * RTCPeerConnection 端对端音视频连接对象 * RTCDataChannel 端对端数据通道对象 * 适用设备 * Firefox，Opera，Chrome浏览器支持并默认启用了WebRTC功能，并且能够实现互相通信 * IE浏览器直到11版本还未支持WebRTC，但是Edge15版本已经开始支持WebRTC，最新浏览器支持可以查看 Can I use * 原生安卓和ios应用均已支持 2.建立连接过程 2.1 概述 首先我们可以分析一下，建立连接需要哪些条件： 1.我们需要知道对方浏览器的网络地址才能连接到它，需要获取到对方的IP地址和端口号

命令行运行HEADLESS CHROME CHROME 安装（需要带梯子） * 下载地址 [https://www.chromium.org/getting-involved/dev-channel] * 几个版本的比较 * Chromium 不是Chrome，但Chrome的内容基本来源于Chromium，这个是开源的版本，小时级别的更新 * Canary 是试验版，翻译过来就是金丝雀，金丝雀对瓦斯等毒气很敏感，浓度稍高就会停止鸣叫甚至挂掉，金丝雀是瓦斯等毒气检测的土办法，这个场景在《寻龙诀》中黄渤的操作中也能看到。哈哈 扯远了，这个是daily build 版本。 * Dev 是开发版，weekly build版本 * Beta 是测试版，monthly build版本 * Stable 是稳定版，不定期更新，一般也是一个月左右一次 * 更新频率 Chromium > Chrome Canary > Chrome Dev > Chrome Beta > Chrome Stable