0 背景

目前在业务场景中，用户上传视频，等待视频上传成功后，后台会跑截帧服务，最后返回图片作为推荐封面，展示给用户。这个方案需要等待视频上传后，后台读取视频，再跑截帧任务，用户等待时间比较长。

因此，考虑前端来做截帧，在开始上传视频的同时生成推荐封面，提升用户体验。

0 背景

从小学开始，我就很喜欢玩4399上的宠物连连看flash小游戏。

然而，因为flash的安全性等问题，很多浏览器都不再支持flash。比如chrome，自 2021 年起，在任何版本的 Chrome 中，Flash 内容（包括音频和视频）都将无法再正常播放，并且从v88起完全移除Flash插件的相关代码。

前言

这篇文章主要记录直播DEMO的实现，主要通过RTMP推流，通过HTTP-FLV拉流，并在页面中播放。

前言

这篇文章主要记录拉流后，在播放端解码和渲染等相关知识。

前言

这篇文章主要记录在采集端推流，在拉流端拉流所使用的流媒体传输协议，以及在服务器端进行转码、安全检测和CDN分发等相关知识。

前言

笔者打算从零开始学习视频直播的知识，借此记录下学习路线。
首先，一个完整的直播流程主要包括：

1. 数据的采集和编码（在采集端采集、滤镜等处理、编码）
2. 推流、拉流和服务端处理（推流、拉流用到的流媒体传输协议，在服务器端进行转码、安全检测、CDN分发）
3. 播放端播放（拉流后播放端解码和渲染）

这篇文章主要记录在推流端视频的采集、滤镜等处理、编码相关的知识。

1 架构模式概述

1.1 分层

大型网站架构中，采用分层架构，将网站软件系统在横向方面切分，分为应用层、服务层、数据层。这对之后网站支持高并发，向分布式方向发展至关重要。

• 应用层：具体业务和视图展示。（前端）
• 服务层：为应用层提供服务支持。（后端）
• 数据层：提供数据存储访问服务。
  阅读全文 »

1 介绍

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

useEffect是React hooks中可以让你在函数组件中执行副作用操作的Effect Hook。

在React hooks刚出来的时候我也记录过一篇关于认识 react Hooks的。在使用的过程中，经常遇到useEffect重复调用的问题，因此借此文总结下。

1 模块实现

步骤：