How do I play a video in the Browser Console?

To achieve this goal, the following points are mainly involved:

How do I get and parse video streams?
How to play dynamic content in console?
How do I play color content in console?
How to connect video stream to Console?

In fact, the final code is extremely simple, so let’s go through it step by step

The effect

IO /colors-web/…

How do I get and parse video streams?

Here we use the computer camera to capture the video stream, and then obtain the image data of each frame of the video stream as the input for the next step.

// Capture the video stream from your computer's webcam
const mediaStream = await navigator.mediaDevices.getUserMedia({
  video: true.audio: true});// Create a video TAB
const video = document.createElement("video");
document.body.appendChild(video);

video.onloadedmetadata = function (e) {
  video.play(); // After the camera data is loaded, start playing
};
// video Labels play video streams
video.srcObject = mediaStream;
Copy the code

How to obtain the data of each frame of image? Create a canvas canvas, you can draw the current content of the video on the canvas, and then get the pixel data of the image through the method of 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;
// The imageData structure is tiled
Copy the code

How to play dynamic content in console?

If you want to console the video, you first need to be able to draw the video frame by frame, but this is not practical. Console. log can only output text.

Back in ancient times, how did you play video on a terminal? That’s right, draw a frame by frame with characters, and connect them together to make a dynamic video.

In chrome Dev Tool, if you call console.clear() after each frame is drawn, the experience will not be very good, and the flicker will be very serious, so we use continuous output to draw, when you stay at the end of the console, it will look like dynamic content.

How do I play color content in console?

Console. log supports some CSS features. You can specify simple styles for output strings, including background color, font color, underline, background-image, padding, etc. You can even insert images with these features. However, these features are more or less compatible with console in different browsers, but it is not a problem to implement font coloring, or output color blocks (with background colors).

We use colors-Web here to make it easier to output color content to the console.

This is a very convenient library that can quickly output color content to the console using chain calls, and supports many features that you don’t need to know about, just use the corresponding methods.

Such as:

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("Taro"));Copy the code

I don’t have to explain it, but you basically understand the usage, it’s very simple and free, and supports typescript.

In our case, we output the color block with 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("╳"); }}}Copy the code

The final logic

Finally, I converted all pixel values of each frame into an instance of Colors, recorded in the array, and finally called Logger to complete the rendering of a frame.

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("╳")); }}}// Draw, colors() is just preparing the data structure, logger is the real outputlogger(... frameColors);Copy the code

That’s it!

Related information:

colors-webCode address of:Github.com/yu-tou/colo…

How do I play a video in the Browser Console?