Как воспроизвести видео в консоли браузера?

внешний интерфейс JavaScript
Как воспроизвести видео в консоли браузера?

Как воспроизвести видео в консоли браузера?

Для достижения этой цели в основном используются следующие моменты:

  1. Как получить и разобрать видеопоток?
  2. Как воспроизвести динамический контент в консоли?
  3. Как воспроизвести цветной контент в консоли?
  4. Как связать видеопоток и консоль?

На самом деле окончательный код предельно прост, кратко пошагово расскажем о нем

Эффект

Адрес теста:с заголовком.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;

Как получить данные каждого кадра изображения? Создайте холст холста, вы можете нарисовать текущее содержимое видео на холсте, а затем использовать метод холста, чтобы получить пиксельные данные изображения.

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.log может выводить только текст.

Как в древние времена вы воспроизводили видео в терминале? Правильно, использование символов для покадровой отрисовки — это не динамическое видео.

Конечно, в инструменте разработчика Chrome, если вы вызываете console.clear() для очистки и перерисовки каждого кадра после рисования, опыт будет не очень хорошим, и мерцание будет серьезным, поэтому мы используем непрерывный вывод для рисования, когда вы оставайтесь в конце консоли, похоже, это динамический контент.

Как воспроизвести цветной контент в консоли?

console.log поддерживает некоторые функции css, вы можете указать простой стиль для выходной строки, самые основные поддерживают цвет фона, цвет шрифта, подчеркивание и т. д., и даже поддерживает фоновое изображение, отступы и другие функции, используя эти функции, можно даже картинки вставлять, но эти фичи имеют более-менее проблемы с совместимостью в консолях разных браузеров, а вот добиться окраски шрифта, или вывода цветных блоков (с цветами фона) большой проблемы не составляет.

мы используем здесь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("芋头")
);

Поверьте, я не объясняю, все в принципе понимают эти обычаи, очень простые и бесплатные, и поддерживают машинопись.

Здесь мы используем 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("╳");
    }
  }
}

окончательная логика

В итоге я преобразовал все значения пикселей каждого кадра в экземпляр цветов, записал в массив и, наконец, равномерно вызвал логгер для завершения рендеринга одного кадра.

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);

Большое объявление готово!

Релевантная информация:

Категории