Как заснять видео с экрана компьютера: Лучшие программы для записи видео с экрана компьютера

Дебютное введение

В этом видео рассказывается о создании базовой записи с помощью веб-камеры, записи экрана (захват всего экрана или выбранной области), планировании записи, просмотре ваших записей, эффектов и параметров вывода .

Запись с веб-камеры

Это видео покажет вам, как сделать запись с помощью веб-камеры.

Запишите экран компьютера

Это обучающее видео покажет вам, как записать видео с экрана вашего компьютера. Он показывает вам, как выбрать часть экрана или весь рабочий стол. Он также показывает вам, как изменить параметры записи указателя мыши, а также несколько других советов и приемов.

Экран записи с наложением веб-камеры

Запись звука с вашим видео

Расписание записи

Добавить подпись

Отображение курсора мыши в записях экрана

Цветовые и видеоэффекты

Водяной знак

Просмотр записей

Как записать видео из приложения в Windows 10

Знаете ли вы, что в Windows 10 есть утилита записи экрана под названием Xbox Game Bar? С его помощью вы можете записывать видео своих действий практически в любом приложении Windows на своем ноутбуке, независимо от того, хотите ли вы запечатлеть игровой процесс или создать учебное пособие для кого-то по использованию Microsoft Office.Чтобы вам было проще, мы обрисовали в общих чертах несколько простых шагов о том, как записать видео из приложения в Windows 10.

Инструмент записи видео является частью приложения Xbox, которое по умолчанию устанавливается в Windows 10. Xbox Game Bar недавно получил несколько крупных обновлений, чтобы сделать его более полезным, поэтому теперь вы можете делать скриншоты и даже создавать мемы.

Как записать видео из приложения в Windows 10

1. Откройте приложение, которое хотите записать. К сожалению, этот инструмент не может захватывать некоторые программы, такие как диспетчер файлов или весь рабочий стол, но он работает в обычных приложениях, будь то из Магазина Windows или настольных приложений.

2. Нажмите одновременно клавишу Windows и букву G , чтобы открыть диалоговое окно Game Bar.

3. Установите флажок «Да, это игра» , чтобы загрузить игровую панель. Это процедура, независимо от того, записываете ли вы игру или другое приложение.

4. Нажмите кнопку «Начать запись» (или Win + Alt + R), чтобы начать запись видео.

5. Остановите запись, щелкнув красную полосу записи , которая будет в верхнем правом углу окна программы.(Если он исчезнет, ​​нажмите Win + G еще раз, чтобы вернуть игровую панель.)

ПОДРОБНЕЕ: Как перейти на Windows 10 с Windows 7 или 8

Вот и все! Вы найдете свои записанные видео, которые являются файлами MP4, в папке «Видео» во вложенной папке с названием «Захваты». Вы также найдете их в приложении Xbox в меню Game DVR, где вы можете обрезать видео и поделиться им в Xbox live (если это игра).

Обратите внимание, что вы также можете использовать инструмент записи Xbox для создания снимков экрана.Вместо того, чтобы нажимать кнопку записи, щелкните значок камеры на игровой панели или Win + Alt + PrtScn.

Мы надеемся, что это помогло, и вы даже можете научить кого-нибудь записывать видео из приложения в Windows 10.

Производительность и производительность Windows 10

iMovie не позволяет делать снимки экрана, как это сделать?

Как сделать снимок экрана в iMovie? Считается, что iMovie не позволяет делать снимки экрана, но всегда есть выход из этой проблемы.По сути, это технология, используемая для копирования всего, что отображается на экране компьютера, а затем передачи на принтер или в другой файл. Искажения нет, поэтому iMovie предлагает полностью профессиональный вариант. Есть ли способ для сделать снимок экрана в iMovie ? Ниже приведены советы по созданию снимков экрана в iMovie.

Часть 1. Как сделать снимок экрана с помощью альтернативы iMovie на Mac (включая macOS 10.13 High Sierra)

Лучшее решение для захвата экрана — Filmora Video Editor

Не смотрите дальше! Filmora Video Editor — лучшее решение для захвата экрана на Mac (macOS 10.13 High Sierra в комплекте) и Windows. Это настоятельно рекомендуемая альтернатива iMovie с выдающимися функциями, включая разнообразные инструменты редактирования, цветокоррекцию, анимированные заголовки, эффект PIP, снятие лица, переход и захват экрана. Пошаговое руководство пользователя для Filmora Video Editor упростит вам задачу даже в качестве нового пользователя. Он удобен для любого человека с базовыми знаниями для создания снимков экрана.

Основные характеристики Filmora Video Editor:

• Также доступны различные специальные эффекты, включая разделенный экран, зеленый экран и функции противодействия.
• Он имеет более 300 видеоэффектов, которые позволяют вам проявлять больше творчества, используя темы о любви, Интернете и домашних животных.
• Великолепные анимированные заголовки могут сделать ваше видео потрясающим и особенным.
• Он включает расширенные возможности редактирования для пользователей Mac с обратным воспроизведением, стабилизатором видео и функциями панорамирования и масштабирования.

Как сделать снимок экрана с помощью альтернативы iMovie

Шаг 1.Импортируйте видео в редактор Filmora Video Editor

С помощью Filmora Video Editor легко сделать снимок экрана. Сначала запустите видеоредактор и перетащите видео в основной интерфейс программы.

Шаг 2. Обнаружение сцены

В «Медиа-библиотеке» щелкните видео правой кнопкой мыши и выберите опцию «Обнаружение сцены», и видео будет автоматически добавлено на временную шкалу с подробными кадрами. Вы можете выбрать любой экран, который вам нужен для редактирования.

Шаг 3. Сделайте снимок экрана

Теперь в окне «Предварительный просмотр» щелкните значок «Камера», чтобы сделать снимок экрана с видео. Тогда вы успешно сделали снимок экрана на видео.

Альтернативное решение сделать снимок экрана на видео

Кроме того, на клавиатуре вы найдете клавишу экрана печати, которая сокращенно называется «PrtScn SysRq». Из-за разных производителей, вы найдете сокращенное обозначение клавиш по-разному, но это не должно быть проблемой.

Чтобы сделать снимок экрана, вам нужно будет удерживать клавишу «Alt», а затем нажать «PrtScn SysRq». Завершите процедуру, сохранив снимок экрана на свой компьютер. Вы можете сделать снимок всего экрана или его части в зависимости от ваших предпочтений.

Часть 2. Поддерживает ли iMovie снимок экрана?

Кто бы ни сказал вам, что iMovie не поддерживает захват экрана, должно быть, сказал вам самую большую ложь в современном мире. Эта программа хорошо позволяет делать снимки экрана и обычно предлагает одни из лучших возможностей, чем многие другие программы.Вы можете узнать, как сделайте снимок экрана в iMovie со следующего изображения.

См. Подробное пошаговое руководство по созданию снимков экрана в iMovie.

Шаг 1. По правде говоря, iMovie полностью поддерживает снимок экрана, только если люди видят его по-другому. Возможно, вы слышали, как люди говорят, что iMovie всегда неоднозначен, и все это по их опыту. Это связано с тем, что некоторые важные вещи остаются неясными, но вы можете сделать снимок экрана в iMovie, и все будет исправлено.Качество будет высоким, и вы испытаете что-то необычное.

Шаг 2. Другая серьезная проблема iMovie в том, что касается захвата экрана, — это формат файла. Если вы решите этот вопрос, у вас не возникнет проблем со снимками экрана в iMovie и их последующим использованием. Вы должны убедиться, что формат, используемый для сохранения ваших снимков экрана, совместим и имеет высокое качество.

К сожалению, многие люди используют неподдерживаемые форматы и разочаровываются.Это проблема собственного пристрастия, которую вы не должны терпеть. Внимательно изучите все форматы файлов, поддерживаемые iMovie, и сохраните в них снимки экрана, чтобы избежать подобных разочарований. В противном случае вы всегда будете жаловаться, что iMovie не поддерживает захват экрана, но поддерживает.

Шаг 3. В других случаях захват экрана в iMovie может завершиться ошибкой из-за нестандартного размера снимков экрана, который можно легко решить. Идеальные скриншоты не должны быть слишком большими или слишком маленькими, а должны быть среднего размера.Внесите некоторые изменения в размер файла и его масштабирование, что не только улучшит его качество, но и улучшит качество скриншотов. Прежде всего, необходимо правильно настроить iMovie, что является предпосылкой для успешного захвата экрана.

Видеоурок: Как сделать снимок экрана в iMovie

Это пошаговое видео-руководство поможет вам сделать снимок экрана за несколько кликов.

My Screen Recorder Pro — Захват экрана ПК и создание демонстраций

Откройте для себя новую эру инноваций в области видео с помощью My Screen Recorder Pro.Профессиональный инструмент для захвата экрана видео, который позволяет легко и просто записывать, редактировать и публиковать видео прямо в Интернете.

Запишите любое приложение, работающее на вашем ПК с Windows, включая звук. С помощью микрофона ПК вы можете добавить свое собственное звуковое сопровождение, демонстрируя, как пользоваться веб-сайтом, объясняя концепцию продукта или демонстрируя указатели игрового процесса. My Screen Recorder Pro предлагает полный набор инструментов для улучшения качества записи видео:

• Записывайте звук динамика и микрофона одновременно с записями экрана
• Создание эффекта «картинка в картинке» для захвата видео с экрана мобильного устройства и веб-камеры
• Увеличение-уменьшение во время записи экрана для увеличения области вокруг курсора.
• Используйте отслеживание мыши для создания более профессиональной видеозаписи
• Запись пользовательского региона и многое другое

My Screen Recorder Pro не только захватывает экран вашего ПК, но и наше программное обеспечение для записи даже позволяет удаленно транслировать и записывать экран вашего мобильного телефона в высоком качестве.

Благодаря нашему интуитивно понятному и удобному интерфейсу вы можете легко:

• Создание обучающих видео
• Сделать презентации
• Продемонстрируйте пошаговые инструкции
• Поделиться советами по игре и указателями
• Показать отзывы о продукте
• Наблюдать или записывать любую активность на экране

My Screen Recorder Pro обеспечивает мгновенный вывод видео с ваших экранных записей в форматы AVI, WMV и WebM.При записи активности вашего ПК в формате WMV воспроизводите видео на любом ПК с Windows, что упрощает распространение. Вы даже можете создавать файлы WebM, предназначенные для максимальной совместимости с HTML5.

Вы хотите распространить записанную презентацию на CD или DVD? Вы можете создавать самовоспроизводящиеся исполняемые видеофайлы из записей экрана. Объедините несколько записей в один самовоспроизводящийся пакет для упрощения распространения CD и DVD.

Благодаря автоматическому управлению записью, основанному на обнаружении движения или при входе в систему, My Screen Recorder Pro может даже безопасно контролировать ваш экран в скрытом режиме, когда вы находитесь далеко от компьютера. При этом приложение будет работать в фоновом режиме без значков на панели задач Windows. Никто не узнает, что на вашем компьютере запущено программное обеспечение для записи видео.

Благодаря быстрому доступу ко всем записанным вами записям и высококачественному воспроизведению, наше программное обеспечение упрощает мгновенную загрузку готовых видеороликов в учетные записи FTP.Настройки автоматической загрузки позволяют легко вести учет всех загрузок.

Обзор функций:

Использование API захвата экрана — веб-API

  async function startCapture (displayMediaOptions) {
  пусть captureStream = null;

  пытаться {
    captureStream = ждать навигатора.mediaDevices.getDisplayMedia (displayMediaOptions);
  } catch (err) {
    console.error ("Ошибка:" + ошибка);
  }
  return captureStream;
}  

Вы можете написать этот код либо с помощью асинхронной функции и оператора await , как показано выше, либо с помощью Promise напрямую, как показано ниже.

  function startCapture (displayMediaOptions) {
 пусть captureStream = null;

 вернуть навигатор.mediaDevices.getDisplayMedia (displayMediaOptions)
    .catch (err => {console.error ("Ошибка:" + err); return null;});
}  

В любом случае пользовательский агент отвечает, представляя пользовательский интерфейс, предлагающий пользователю выбрать область экрана для совместного использования. Обе эти реализации startCapture () возвращают MediaStream , содержащий захваченные изображения дисплея.

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

Затем вы можете использовать захваченный поток captureStream для всего, что принимает поток в качестве входных данных. В приведенных ниже примерах показано несколько способов использования потока.

Видимые и логические поверхности отображения

Для целей API захвата экрана поверхность отображения . — это любой объект контента, который может быть выбран API для целей совместного использования.Совместно используемые поверхности включают в себя содержимое вкладки браузера, всего окна, всех приложений окна, объединенных в одну поверхность, и монитора (или группы мониторов, объединенных в одну поверхность).

Есть два типа поверхности дисплея. Видимая поверхность отображения — это поверхность, полностью видимая на экране, такая как самое переднее окно или вкладка, или весь экран.

Поверхность логического дисплея — это поверхность, которая частично или полностью закрыта либо из-за того, что она частично перекрывается другим объектом, либо полностью скрыта или находится вне экрана.Как они обрабатываются API захвата экрана, варьируется. Как правило, браузер предоставляет изображение, которое каким-то образом скрывает скрытую часть логической поверхности отображения, например, путем размытия или замены цветом или узором. Это делается из соображений безопасности, поскольку контент, который не может быть виден пользователем, может содержать данные, которыми он не хочет делиться.

Агент пользователя может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это.В этом случае пользовательский агент может включать скрытое содержимое, либо путем получения текущего содержимого скрытой части окна, либо путем представления наиболее недавно видимого содержимого, если текущее содержимое недоступно.

Параметры и ограничения

Объект ограничений, переданный в getDisplayMedia () , является объектом DisplayMediaStreamConstraints , который используется для настройки результирующего потока.

Примечание: В отличие от большинства случаев использования ограничений в медиа-API, здесь он используется исключительно для определения конфигурации потока, а , а не , для фильтрации доступных вариантов.

В MediaTrackConstraints (а также в MediaTrackSupportedConstraints и MediaTrackSettings ) добавлены три новых ограничения для настройки потока захвата экрана:

курсор

Указывает, захватывать ли курсор мыши или нет, и если да, то делать это постоянно или только во время движения мыши. Возможные значения:

всегда

Курсор мыши всегда должен фиксироваться в сгенерированном потоке.

движение

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

никогда

Курсор никогда не должен быть виден в сгенерированном потоке.

logicalSurface

Логическое значение, которое, если true , указывает, что захват должен включать закадровые области источника, если таковые имеются.

Ни одно из ограничений никоим образом не применяется до тех пор, пока не будет выбран контент для захвата. Ограничения изменяют то, что вы видите в результирующем потоке.

Например, если вы укажете ограничение ширины для видео, оно будет применено путем масштабирования видео после того, как пользователь выберет область для совместного использования. Он не устанавливает ограничения на размер самого источника.

Примечание. Ограничения никогда не приводят к изменению списка источников, доступных для захвата с помощью API общего доступа к экрану.Это гарантирует, что веб-приложения не могут заставить пользователя делиться определенным контентом, ограничивая исходный список до тех пор, пока не останется только один элемент.

Пока действует захват изображения, машина, которая предоставляет общий доступ к содержимому экрана, будет отображать некоторую форму индикатора, чтобы пользователь знал, что происходит совместное использование.

Примечание: По соображениям конфиденциальности и безопасности источники совместного использования экрана не могут быть перечислены с помощью enumerateDevices () . В связи с этим событие devicechange никогда не отправляется, если есть изменения в источниках, доступных для getDisplayMedia () .

Захват общего аудио

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

Перед запуском проекта, который потребует совместного использования аудио, обязательно проверьте совместимость браузера в MediaDevices.getDisplayMedia () , чтобы узнать, есть ли у браузеров, с которыми вы хотите совместимость, поддержку звука в захваченных потоках экрана.

Чтобы запросить совместное использование экрана с включенным звуком, параметры, переданные в getDisplayMedia () , могут выглядеть следующим образом:

  const gdmOptions = {
  видео: правда,
  аудио: правда
}
  

Это дает пользователю полную свободу выбирать все, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно дополнительно уточнить, указав дополнительную информацию для каждого из аудио и видео :

  const gdmOptions = {
  видео: {
    курсор: "всегда"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: правда,
    sampleRate: 44100
  }
}
  

В этом примере курсор всегда будет виден в захвате, а звуковая дорожка в идеале должна иметь включенные функции шумоподавления и эхоподавления, а также идеальную частоту дискретизации звука 44.1 кГц.

Захват звука всегда необязателен, и даже когда веб-контент запрашивает поток как со звуком, так и с видео, возвращаемый MediaStream может по-прежнему содержать только одну видеодорожку без звука.

Примечание: Некоторые свойства широко не реализованы и могут не использоваться движком. Например, курсор имеет ограниченную поддержку.

Использование захваченного потока

Обещание , возвращаемое функцией getDisplayMedia () преобразуется в MediaStream , который содержит по крайней мере один видеопоток, который содержит экран или область экрана и который настраивается или фильтруется на основе ограничений, указанных при getDisplayMedia () назывался.

Безопасность

Как это всегда бывает при совместном использовании контента по сети, важно учитывать последствия совместного использования экрана для конфиденциальности и безопасности.

Потенциальные риски

Проблемы конфиденциальности и безопасности, связанные с совместным использованием экрана, обычно не слишком серьезны, но они существуют. Самая большая потенциальная проблема — это пользователи, непреднамеренно делясь контентом, которым не хотели делиться.

Например, нарушения конфиденциальности и / или безопасности могут легко произойти, если пользователь совместно использует свой экран и видимое фоновое окно содержит личную информацию, или если его менеджер паролей виден в общем потоке.Этот эффект может быть усилен при захвате логических поверхностей отображения, которые могут содержать контент, о котором пользователь вообще не знает, не говоря уже о том, чтобы видеть.

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

Разрешение захвата отображаемого содержимого

Перед началом потоковой передачи захваченного содержимого экрана пользовательский агент попросит пользователя подтвердить запрос на совместное использование и выбрать контент для совместного использования.

Примеры

Простой снимок экрана

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

JavaScript

Для этой работы не так уж много кода, и если вы знакомы с использованием getUserMedia () для захвата видео с камеры, вы найдете getDisplayMedia () очень знакомым .

Настройка

Во-первых, некоторые константы настраиваются для ссылки на элементы на странице, к которым нам потребуется доступ: , в который будет транслироваться захваченное содержимое экрана, поле, в которое будет выводиться записанный вывод, и кнопки запуска и остановки, которые будут включать и выключать захват изображения экрана.

Объект displayMediaOptions содержит MediaStreamConstraints для передачи в getDisplayMedia () ; здесь для свойства курсора установлено значение , всегда , что указывает на то, что курсор мыши всегда должен быть включен в захваченный носитель.

Примечание: Некоторые свойства широко не реализованы и могут не использоваться движком. Например, курсор имеет ограниченную поддержку.

Наконец, установлены прослушиватели событий для обнаружения нажатий пользователем кнопок запуска и остановки.

  const videoElem = document.getElementById ("видео");
const logElem = document.getElementById ("журнал");
const startElem = document.getElementById ("начало");
const stopElem = document.getElementById («стоп»);



var displayMediaOptions = {
  видео: {
    курсор: "всегда"
  },
  аудио: ложь
};


startElem.addEventListener ("клик", function (evt) {
  startCapture ();
}, ложный);

stopElem.addEventListener ("щелчок", функция (evt) {
  stopCapture ();
}, ложный);  

Содержимое журнала

Чтобы упростить регистрацию ошибок и других проблем, в этом примере некоторые методы Console переопределяют для вывода их сообщений в блок

 , идентификатор которого -  log .


 
  console.log = msg => logElem.innerHTML + = `$ {msg} 
`;
console.error = msg => logElem.innerHTML + = ` $ {msg}  
`;
console.warn = msg => logElem.innerHTML + = ` $ {msg}  
`;
console.info = msg => logElem.innerHTML + = ` $ {msg}  
`;  
 Это позволяет нам использовать знакомые  console.log () ,  console.error ()  и т. Д. Для записи информации в окно журнала в документе.
 Начало захвата изображения 
 Метод  startCapture () , приведенный ниже, запускает захват  MediaStream , содержимое которого берется из выбранной пользователем области экрана.  startCapture ()  вызывается при нажатии кнопки «Начать захват».
  асинхронная функция startCapture () {
  logElem.innerHTML = "";

  пытаться {
    videoElem.srcObject = ждать навигатора.mediaDevices.getDisplayMedia (displayMediaOptions);
    dumpOptionsInfo ();
  } catch (err) {
    приставка.ошибка ("Ошибка:" + ошибка);
  }
}  
 После очистки содержимого журнала, чтобы избавиться от любого текста, оставшегося после предыдущей попытки подключения,  startCapture ()  вызывает  getDisplayMedia () , передавая ему объект ограничений, определенный параметром  displayMediaOptions . При использовании  await  следующая строка кода не выполняется до тех пор, пока не будет выполнено обещание  , возвращаемое функцией  getDisplayMedia () . После разрешения обещание возвращает  MediaStream , который будет передавать содержимое экрана, окна или другой области, выбранной пользователем.
 Поток подключается к элементу  путем сохранения возвращенного  MediaStream  в srcObject  элемента.
 Функция  dumpOptionsInfo () , которую мы сейчас рассмотрим, выгружает информацию о потоке в журнал в образовательных целях.
 Если что-либо из этого не удается, предложение  catch ()  выводит сообщение об ошибке в поле журнала.
 Остановка захвата изображения 
 Метод  stopCapture ()  вызывается при нажатии кнопки «Остановить захват».Он останавливает поток, получая его список треков с помощью  MediaStream.getTracks () , а затем вызывает метод {domxref ("MediaStreamTrack.stop," stop () ")}} каждого трека. После этого  srcObject  устанавливается в  null , чтобы убедиться, что всем, кому интересно, понятно, что поток не подключен.
  function stopCapture (evt) {
  let track = videoElem.srcObject.getTracks ();

  track.forEach (track => track.stop ());
  videoElem.srcObject = null;
}  
 Выгрузка информации о конфигурации 
 В информационных целях показанный выше метод  startCapture ()  вызывает метод с именем  dumpOptions () , который выводит текущие настройки дорожки, а также ограничения, которые были наложены на поток при его создании.
  function dumpOptionsInfo () {
  const videoTrack = videoElem.srcObject.getVideoTracks () [0];

  console.info ("Настройки трека:");
  console.info (JSON.stringify (videoTrack.getSettings (), null, 2));
  console.info ("Ограничения отслеживания:");
  console.info (JSON.stringify (videoTrack.getConstraints (), null, 2));
}  
 Список дорожек получается путем вызова  getVideoTracks ()  на экране захвата  MediaStream . Действующие в настоящее время настройки получаются с помощью  getSettings () , а установленные ограничения - с помощью  getConstraints () 
 HTML 
 HTML начинается с простого вводного абзаца, а затем переходит к сути вещей.
  
 В этом примере показано содержимое выбранной части экрана.
Чтобы начать, нажмите кнопку «Начать захват». 

  Начать захват  & nbsp;  Остановить захват  

<автовоспроизведение видео> 



 Журнал: 


  
 Ключевые части HTML:
 A    с меткой «Начать захват», которая при нажатии вызывает функцию  startCapture () , чтобы запросить доступ и начать захват содержимого экрана.
 Вторая кнопка «Остановить захват», при нажатии которой вызывается  stopCapture ()  для прекращения захвата содержимого экрана.
 A , в которое передается записанное содержимое экрана.
 Блок 
 , в который записанный текст помещается перехваченным методом  Console . 
 
  
 CSS 
 

 
 В этом примере CSS является чисто косметическим. Видео имеет рамку, а его ширина установлена ​​так, чтобы занимать почти все доступное горизонтальное пространство ( ширина: 98% ). max-width  устанавливается равным  860 пикселей , чтобы установить абсолютный верхний предел размера видео, 

 
  error ,  warn  и  info Классы  используются для стилизации соответствующих типов вывода консоли. 

 
  #video {
  граница: 1px solid # 999;
  ширина: 98%;
  максимальная ширина: 860 пикселей;
}

.ошибка {
  красный цвет;
}

.warn {
  оранжевый цвет;
}

.Информация {
  цвет: темно-зеленый;
}  
 Результат 
 Конечный продукт выглядит так.Если ваш браузер поддерживает API захвата экрана, нажатие кнопки «Начать захват» представит интерфейс пользовательского агента для выбора экрана, окна или вкладки для публикации.
 Безопасность 
 Для работы при включенной политике функций вам потребуется разрешение  display-capture . Это можно сделать с помощью HTTP-заголовка  Feature-Policy  или - если вы используете API захвата экрана в