为了实现这一目标，这些要点主要涉及以下要点：
实际上，最后一个代码非常简单，让我们逐步谈论它。
测试地址：https：//yu-tou.github.io/colors-web/dist/camera.html
在这里，我们使用计算机摄像头捕获视频流，然后获取视频流的每个帧的图像数据作为下一步。
如何获取每个帧的数据？创建一个可以在画布上绘制视频当前内容的帆布帆布，然后通过帆布方法获取图像的像素数据。
我们已经可以获取视频的每个帧的图像内容，并继续下一步。如果您需要在控制台中完成视频，则需要逐帧和一个帧绘制内容，但这似乎是不现实的。Console.log只能输出输出文本。
回想起古代，您是如何在终端播放视频的？这是正确的，绘制一个字符一帧的框架，这不是一个可以连接的动态视频。
当然，如果在Chrome Dev工具中绘制每个帧，则在绘制每个帧后清楚地绘制了Console.Clear（）。体验不是很好，闪烁将非常严重，因此我们使用连续的输出来绘制。当您在控制台末端停留在控制台末端时，看起来像是动态的内容。
Console.Log支持一些CSS功能，这些功能可以为输出字符串指定简单样式，最基本的支持背景颜色，字体颜色，下线线等，甚至支持背景图像，填充和其他功能。在不同的浏览器的控制台中或多或少兼容，但是要获得字体着色或输出颜色块（带有背景色），问题并不大。
我们在这里使用它将颜色内容输出到控制台。
这是一个非常方便的库，可用于快速在控制台中输出颜色内容，并支持许多特征。您不需要自己理解。您可以直接使用相应的方法。
喜欢：
我相信我没有解释，每个人基本上都理解这些用法，这些用法非常简单和免费，并且支持打字稿。
我们在这里，使用颜色-WEB输出色彩块：
最后，我将每个帧的所有像素值转换为颜色的实例。将其记录到数组后，最终可以均匀地调用记录器以完成渲染框架。
contecolors = [];
for（让i = 0; i <height; i ++）{
for（令J = 0; J <width; J ++）{
如果（i * width + j <data.length）{
const color =`rgb（$ {data [（i * width + j） * 4 + 0]}，$ {data [（i * width + j） * 4 + 1]}，$ {
数据[（i * width + j） * 4 + 2]
}）;
FrameColors.push（
颜色 （）
.bg（颜色）
。彩色（颜色）
。
。日志 （”）”）
）；
}
}
}
// draw，color（）仅准备数据结构，记录器是真实输出
记录器（... FrameColors）;
相关信息：