blog
blog copied to clipboard
oyuyue
个人博客
 抖音相信大家都听说过，但是知道有 [Web 版抖音](https://www.douyin.com/) 的人可能要少一些，和 [TikTok](https://www.tiktok.com/) 一样抖音也有 Web 版本，可以让我们在浏览器中就可以刷短视频和观看抖音直播。抖音是如何实现在浏览器中直播的呢？本篇文章来解析抖音直播的技术原理。 ## 调试 首先点击 [https://live.douyin.com](https://live.douyin.com/) 进入抖音直播页面。  然后随便进入一个直播间并打开开发者工具，查看播放器相关 DOM 结构，如下图所示。  首先可以发现原来抖音也是使用的 [xgplayer](https://github.com/bytedance/xgplayer)，另外还可以发现 `video` 元素的 `src` 属性是 `blob:` 开头的视频地址，和我们平时用 `video` 元素播放的视频有点不一样，要了解为什么视频地址是 `blob:`...
 斗鱼直播相信大家都听说过，打开斗鱼官网就可以直接在浏览器中观看直播。那么斗鱼是如何实现浏览器视频直播的呢？本篇文章就来解析斗鱼是如何实现直播的，以及它是如何节省 80% 的 CDN 流量，要知道视频直播流量费并不便宜，斗鱼每个月光这些流量费都要支付几个亿，节省 CDN 流量就是省钱。 ## 直播技术方案 在实际去斗鱼直播间调试视频直播之前，我就猜它肯定是使用 HTTP-FLV 方案来实现视频直播，因为国内几乎所有直播平台都是使用 HTTP-FLV 方案。 但是去斗鱼直播间并没有找到 `.flv` 的网络请求，而是找到了 `.xs` 的网络请求，如下图所示。  不过 `.xs` 网络请求的响应的 `Content-Type` 是 `video/x-flv`，原来只是后缀不同，看来我猜的果真没错，斗鱼就是用的 HTTP-FLV。 ### HTTP+P2P...
上一篇文章，快速入门了 WebGL，但是对 WebGL 中的着色器比较陌生，这篇文章将详细讲解 WebGL1 中的着色器。 WebGL 基于 OpenGL，是 OpenGL 的子集。OpenGL 中的着色器是使用 GLSL 编写的，所以 WebGL 中也是使用 GLSL 编写着色器，WebGL1 中使用的 GLSL 1.00 版本。 GLSL（OpenGL Shading Language）是 OpenGL 着色器语言，是一个以 C 语言为基础的高阶着色语言。它可以提供开发者对渲染管线更多的控制，而无需使用汇编语言或硬件规格语言。 上一篇文章介绍了...
在一些前端开发场景中，可能会遇到使用 canvas 来渲染文本，例如 web 表格应用，就是用 canvas 来渲染文本，如果大家去检查飞书、谷歌、石墨、腾讯表格可以发现它们都是用 canvas 来实现的。 这篇文章就来讲解如何在 canvas 中渲染和排版富文本。在介绍之前可以先点击下面链接，体验下最终的效果。 https://codesandbox.io/s/canvas-rich-text-h601bj ## 自动换行 在平时基于 DOM 的文本开发时，我们并不关心文本的自动换行，因为浏览器已经自动帮我们自己处理了文本自动换行，如下图所示。  在 canvas 中只有两个 API `fillText` 和 `strokeText` 来绘制文本，它们并不能处理文本自动换行，渲染出来的文本都在一行，类似于 `white-space: nowrap`一样的效果。 ...
上篇文章介绍了 MSE 来播放流媒体，但是 WEB 视频开发并不只依靠 MSE。这篇文章就来介绍主流的两种协议 HLS 和 DASH，以及如何制作并使用支持这些协议开源的客户端库来播放视频。 ## HLS HLS (HTTP Live Streaming) 是苹果公司开发的流媒体传输协议，它使用 HTTP 来传输视频，可以防止被防火墙屏蔽。现在大部分视频网站都在使用，比如优酷、腾讯视频。 > 它的工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。  它会生成一个 `.m3u8` 文件，其中除了包含一些元数据，还记录被分割视频的存放位置。分割的视频是 `.ts` 结尾的文件，是 `MPEG-2 Transport...
如果检查主流视频网站的视频，就会发现网站的 `video` 元素的 `src` 属性都是 `blob` 开头的字符串。  为什么视频链接前面会有 `blob` 前缀？这是因为视频网站使用了这篇文章要讲的 MSE 来播放视频。 ## Media Source Extensions 虽然 `video` 很强大，但是还有很多功能 `video` 并不支持，比如直播，即时切换视频清晰度，动态更新音频语言等功能。 MSE（Media Source Extensions）就来解决这些问题，它是 W3C 的一种规范，如今大部分浏览器都支持。  它使用 `video`...
这是一个系列文章。本文章将介绍，如何制作一个简单的视频播放器。用少量关键的代码来实现视频播放器核心功能。 点击这个链接，在线预览最终视频播放器 [https://nplayer.js.org/](https://nplayer.js.org) 。 ## 介绍 以前想在网站放播放视频，就需要安装 `flash` 插件，但是 `flash` 占用系统资源高。而且它是 `Adobe` 一项封闭的商业应用，内置 `flash` 有可能引入相关的安全漏洞，苹果更是大力反对 `falsh`。 现在视频网站几乎都用 `html 5` 播放视频，它占用资源小更省电、省流量，是一项完全免费并且开放的新标准。无需安装任何插件直接使用 `video` 标签就行，而且它的兼容性也非常好，所有主流浏览器都支持。  ## video 标签 ```html 浏览器不支持 video 标签...
WebGL 是 Web 3D 渲染引擎的基础，它作为非常底层的 API，学习上手难度非常大，这是因为 WebGL 要求的背景知识比较多。而网上的教程一般没有过多介绍直接就介绍 API 开始渲染了，容易让人云里雾里，很容易被劝退，就算学到了 API 使用，也是只懂表面知识，没有了解背后的原理，很容易就忘记了。 《从 0 实现 3D 渲染引擎》系列教程将从最基本知识开始，渐进的讲解 WebGL 使用和 WebGL 背后原理还有必不可少的数学知识，真正的从 0 开始，只要了解 JS 就行，不需要要任何图形学或者数学基础。学完之后除了能够自己从 0 实现自己的 3D 渲染引擎还能熟悉 three.js...
如何画个球？好像 JS 和 CSS 并没有提供这个能力，当然也不可能为了画个球引入 Threejs。这篇文章将介绍 4 种画球的方法，每种方法都有不同的特点，生成球的数据可以使用任何方式渲染，可以在 canvas 中渲染，也可以使用 DOM 来渲染来实现一些博客里面的标签球效果。文章的最后将结合前面的知识，来画出更加复杂酷炫的 3D 形状。 > 点这个 [https://oyuyue.github.io/sphere/](https://oyuyue.github.io/sphere/) 进行在线预览。 ## 标准球 标准球也称为 `UV Sphere`，它是最常用的画球方法。要了解它首先来看下常见的地球平面图。  从这张图可以看到，经线是列，从东经 `180°` 到西经 `180°`，纬线是行从北纬 `90°` 到南纬...
有很多种方式可以描述旋转，但是使用欧拉角来描述是最容易让人理解的。这篇文章将会介绍欧拉角的基础知识、欧拉角的问题和如何去解决这些问题，当然还有欧拉角无法解决的万向节死锁问题，在最后还会介绍如何将欧拉角转换成矩阵，便于程序计算。 ## 坐标系 在介绍欧拉角之前，我们先来简单了解下坐标系。 我们知道在canvas 2d 中的画布坐标系是下图这个样子的。坐标原点在画布的左上角，X 轴正值向右，Y 轴正值向下。  WebGL 的坐标系和 canvas 2d 的不太一样，而且 WebGL 会比 canvas 2d 多一个 Z 轴。它的坐标系如下所示。  这个坐标系和数学中一样原点在中间，X 轴正值向右，Y 轴正值向上。而我们从正面看不见 Z 轴，得旋转下坐标系。 这里的 Z...