Ниже приведен учебник о том, как мы можем использовать Screen Record API в javascript.
Во-первых, мы создадим файл index.html во вновь созданном проекте.
Screen capture api Demo
Click the «Start» button to begin video recording. You can stop the video by clicking the creatively-named «Stop» button. The «Download» button will download the received data
Preview
Start Recording Stop Recording
Recording
Download
Пишем программу для записи экрана на Python
Всем привет! Сегодня я расскажу и покажу как сделать программу для записи экрана на Python.
И так что нам понадобится:
*Python — версия 3.6+
*Скачать библиотеки — pyautogui, numpy, cv2
*И конечно же желание
Первым делом нам надо импортировать данные библиотеки:
Далее нам нужно задать размеры экрана, которые вы можете найти в настройках (по стандарту это 1920×1080), определить кодек а затем всё объединить и сделать объект записи:
Как в 1 клик записать видео с экрана на Windows 10/11
20.0 — это самое оптимальное число фпс, но вы можете его изменить главное не теряйте точку
Дальше нам надо сделать бесконечный цикл, поскольку наша запись будет основываться на склейки большого кол-ва кадров. В этом цикле мы будем делать скриншот, преобразовывать пиксели в правильный массив, конвертировать цвета из BGR (Blue, Green, Red) в RGB (Red, Green, Blue) и только в конце будем писать кадр. Помимо этого нам нужен резервный выключатель предположим если пользователь нажмёт на кнопку q, то мы закончим наш цикл, так же можно просто закрыть программу(но это слишком просто <3). В целом цикл выглядит так:
Источник: dzen.ru
Создаем приложение для записи с экрана на JS
OBS studio — это, конечно, круто, но давайте создадим собственную программу для записи с экрана. И используем для этого JavaScript.
Наш инструмент не буде ограничиваться записью экрана браузера. Да, вы правильно прочитали. Хотя JavaScript запускается в браузере, мы можем его использовать не только для записи активной вкладки. Наш инструмент сможет записывать любую вкладку или даже весь экран. Итак, приступим!
Для начала нам нужно создать HTML-файл. В нем у нас будет кнопка для включения записи и элемент video для проигрывания записанного видео.
Parcel Sandbox record
Также нам понадобится JS-файл. Назовем его index.js.
let btn = document.querySelector(«.record-btn»); btn.addEventListener(«click», function () < console.log(«hello»); >);
Итак, если мы сейчас откроем это в браузере и нажмем кнопку, мы должны увидеть hello в консоли.
А теперь давайте вместо использования console.log получим поток с экрана пользователя.
let btn = document.querySelector(«.record-btn»); btn.addEventListener(«click», async function () < let stream = await navigator.mediaDevices.getDisplayMedia(< video: true >); >);
Если вы нажмете на кнопку сейчас, то увидите это всплывающее окно.
Пишем программу для записи видео с экрана на python (питон)
Возможно, вы думаете, что если выбрать «Window» или «Entire Screen» и нажать кнопку Share, то начнется запись. Но все несколько сложнее. Записывать видео нужно самостоятельно. Для этого мы используем MediaRecorder.
let btn = document.querySelector(«.record-btn») btn.addEventListener(«click», async function () < let stream = await navigator.mediaDevices.getDisplayMedia(< video: true >) //нужно для лучшей поддержки браузера const mime = MediaRecorder.isTypeSupported(«video/webm; codecs=vp9») ? «video/webm; codecs=vp9» : «video/webm» let mediaRecorder = new MediaRecorder(stream, < mimeType: mime >) //начинать запись нужно вручную mediaRecorder.start() >)
При записи экрана mediaRecorder будет передавать нам данные кусочками. Нам нужно сохранять их в переменную.
let btn = document.querySelector(«.record-btn») btn.addEventListener(«click», async function () < let stream = await navigator.mediaDevices.getDisplayMedia(< video: true >) //нужно для лучшей поддержки браузера const mime = MediaRecorder.isTypeSupported(«video/webm; codecs=vp9») ? «video/webm; codecs=vp9» : «video/webm» let mediaRecorder = new MediaRecorder(stream, < mimeType: mime >) let chunks = [] mediaRecorder.addEventListener(‘dataavailable’, function(e) < chunks.push(e.data) >) //начинать запись нужно вручную mediaRecorder.start() >)
Теперь мы хотим, чтобы при нажатии кнопки Stop записанное видео начало проигрываться в нашем элементе video. Давайте сделаем это.
let btn = document.querySelector(«.record-btn») btn.addEventListener(«click», async function () < let stream = await navigator.mediaDevices.getDisplayMedia(< video: true >) //нужно для лучшей поддержки браузера const mime = MediaRecorder.isTypeSupported(«video/webm; codecs=vp9») ? «video/webm; codecs=vp9» : «video/webm» let mediaRecorder = new MediaRecorder(stream, < mimeType: mime >) let chunks = [] mediaRecorder.addEventListener(‘dataavailable’, function(e) < chunks.push(e.data) >) mediaRecorder.addEventListener(‘stop’, function()< let blob = new Blob(chunks, < type: chunks[0].type >) let video = document.querySelector(«.video») video.src = URL.createObjectURL(blob) >) //начинать запись нужно вручную mediaRecorder.start() >)
И финальный штрих. Пускай наше записанное видео загружается на компьютер автоматически.
let btn = document.querySelector(«.record-btn») btn.addEventListener(«click», async function () < let stream = await navigator.mediaDevices.getDisplayMedia(< video: true >) //нужно для лучшей поддержки браузера const mime = MediaRecorder.isTypeSupported(«video/webm; codecs=vp9») ? «video/webm; codecs=vp9» : «video/webm» let mediaRecorder = new MediaRecorder(stream, < mimeType: mime >) let chunks = [] mediaRecorder.addEventListener(‘dataavailable’, function(e) < chunks.push(e.data) >) mediaRecorder.addEventListener(‘stop’, function()< let blob = new Blob(chunks, < type: chunks[0].type >) let url = URL.createObjectURL(blob) let video = document.querySelector(«video») video.src = url let a = document.createElement(‘a’) a.href = url a.download = ‘video.webm’ a.click() >) //начинать запись нужно вручную mediaRecorder.start() >)
Вуаля! Мы получили рабочее приложение для записи видео с экрана.
От редакции Techrocks. Также рекомендуем статью «Создаем сайт-портфолио с responsive-дизайном».
Источник: techrocks.ru