Создаем приложение для записи с экрана на JS

От /

OBS studio — это, конечно, круто, но давайте создадим собственную программу для записи с экрана. И используем для этого JavaScript.

Наш инструмент не буде ограничиваться записью экрана браузера. Да, вы правильно прочитали. Хотя JavaScript запускается в браузере, мы можем его использовать не только для записи активной вкладки. Наш инструмент сможет записывать любую вкладку или даже весь экран. Итак, приступим!

Для начала нам нужно создать HTML-файл. В нем у нас будет кнопка для включения записи и элемент video для проигрывания записанного видео.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <video class="video" width="600px" controls></video>
    <button class="record-btn">record</button>

    <script src="./index.js"></script>
  </body>
</html>

Также нам понадобится 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
  });
});

Если вы нажмете на кнопку сейчас, то увидите это всплывающее окно.

Возможно, вы думаете, что если выбрать «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()
})

Вуаля! Мы получили рабочее приложение для записи видео с экрана.

Перевод статьи «Lets create a screen recorder with JS».

От редакции Techrocks. Также рекомендуем статью «Создаем сайт-портфолио с responsive-дизайном».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Похожие записи

1 комментарий к “Создаем приложение для записи с экрана на JS”

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх