乐趣区

关于console:如何在浏览器-console-控制台中播放视频

jiezi

如何在浏览器 console 控制台中播放视频？
要实现这个指标，次要波及到这几个点：

如何获取和解析视频流？
如何在 console 里播放动静内容？
如何在 console 里播放黑白内容？
如何连贯视频流和 console？
事实上最初的代码极其简略，咱们就一步一步简略讲一下

成果

测试地址：yu-tou.github.io/colors-web/…

如何获取和解析视频流？
这里咱们用电脑摄像头捕捉视频流，而后获取视频流每一帧的图像数据，作为下一步的输出。

// 捕获电脑摄像头的视频流
const mediaStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
// 创立一个 video 标签
const video = document.createElement(“video”);
document.body.appendChild(video);

video.onloadedmetadata = function (e) {
video.play(); // 等摄像头数据加载实现后，开始播放
};
// video 标签播放视频流
video.srcObject = mediaStream;
复制代码
如何获取每一帧图像的数据？创立一个 canvas 画布，能够将 video 以后的内容绘制到画布上，而后通过 canvas 的办法即可拿到图像的像素数据。

const ctx = canvas.getContext(“2d”);
canvas.width = width;
canvas.height = height;

ctx.drawImage(video, 0, 0, width, height);
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
// imageData 的构造是平铺的，须要本人去学习下
复制代码
如何在 console 里播放动静内容？
视频每帧的图像内容咱们曾经能够拿到了，持续下一步，如果须要在 console 中实现播放视频，首先须要可能一帧一帧绘制内容，然而这个如同是不太事实的，console.log 只能输入文本。

回忆远古时代，在终端里大家怎么播放视频的？没错，用字符画一帧一帧绘制，连起来不就是动静的视频了。

当然 chrome dev tool 里如果每一帧绘制后都调用 console.clear() 清空重绘，体验不是很好，闪动会很重大，所以咱们采纳继续输入的形式绘制，当你停留在 console 的最初的时候，看起来也算是动静内容了。

如何在 console 里播放黑白内容？
console.log 反对局部 css 个性，能够为输入的字符串指定简略的款式，最根本的反对背景色、字体色彩、下划线等，甚至反对 background-image、padding 等个性，利用这些个性，甚至能够插入图片，然而这些个性在不同浏览器的 console 中或多或少有些兼容问题，不过要实现字体着色，或者输入色块（用背景色），问题不大。

咱们在此应用 colors-web 来更不便地输入黑白内容到控制台。

这是一个十分不便的库，能够应用链式调用在控制台疾速输入黑白内容，并且反对诸多个性，无需本人去理解，间接应用对应的办法即可。

如：

import {logger, colors} from “colors-web”;
logger(
colors().red().fontsize(48).fontfamily(“SignPainter”).log(“hello”),
colors().white.redBg(“hello”).linethrough(),
“world”,
colors().white.padding(2, 5).underline().lightgrey(“ 芋头 ”)
);
复制代码
置信我不解释，大家也根本了解这些用法，非常简单和自在，而且反对 typescript。

咱们这里，用 colors-web 输入色块：

for (let i = 0; i < height; i++) {
for (let j = 0; j < width; j++) {

if (i * width + j < data.length) {const color = `rgb(${data[(i * width + j) * 4 + 0]},${data[(i * width + j) * 4 + 1]},${data[(i * width + j) * 4 + 2]
  })`;
  colors()
    .bg(color)
    .color(color)
    .fontfamily(/Chrome/.test(navigator.userAgent) ? "Courier" : "")
    .log("╳");
}

}
}
复制代码
最终逻辑
最终我将每一帧所有的像素值都转换成一个 colors 的实例，记录到数组之后，最终对立调用 logger 即可实现一帧的渲染。

const frameColors = [];
for (let i = 0; i < height; i++) {
for (let j = 0; j < width; j++) {

if (i * width + j < data.length) {const color = `rgb(${data[(i * width + j) * 4 + 0]},${data[(i * width + j) * 4 + 1]},${data[(i * width + j) * 4 + 2]
  })`;
  frameColors.push(colors()
      .bg(color)
      .color(color)
      .fontfamily(/Chrome/.test(navigator.userAgent) ? "Courier" : "")
      .log("╳")
  );
}

}
}
// 绘制，colors() 只是在筹备数据结构，logger 才是真正的输入
logger(…frameColors);
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: https://gitee.com/ZhongBangKe… 不胜感激！

退出移动版