Блин, создайте функцию записи экрана с помощью JS

внешний интерфейс

Автор: Локендер Сингх Переводчик: Front-end Xiaozhi Источник: разработчик

Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.

Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.

Мы набираем, годовой оклад: 250 000-600 000 + бонус, если вы заинтересованы, вы можете нажать на меня для деталей.

Студия OBS — это круто, но JavaScript еще круче, теперь давайте создадим собственную функцию записи экрана на JavaScript.

Сначала создайте файл HTML, содержащий кнопку записи и тег воспроизведения со следующим содержимым:

<!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>

затем создайтеindex.js, слушайте нажатия кнопок:

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", function () {
  console.log("hello");
});

Открываем html файл в браузере, нажимаем кнопку, мы можем увидеть распечатанный в консолиhello.

011.png

Теперь удалите отпечаток и замените его следующим:

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  });
});

Теперь нажмите кнопку, и появится окно выбора экрана:

012.png

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

Теперь вы можете подумать, что выбор экрана, а затем нажатие кнопки «Поделиться» запускает запись. Нет, это сложнее, чем мы думали. мы собираемся использовать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()
})

Теперь, когда мы нажмем кнопку «Остановить обмен», надеюсь, в нашем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()
})

Теперь самая основная функция записи идеальна, давайте попробуем! !

~Конец, я человек, который пойдет домой и установит уличную палатку после выхода на пенсию.Увидимся в следующем выпуске!

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

оригинал:Dev.to/0Book VO0/Rakuten…

общаться с

Статья продолжает обновлять еженедельно, вы можете искать Wechat ** [Big Move World]Сначала прочитай, ответь[Благополучие] **Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.

Категории