Запись экрана с микрофонным звуком с использованием JavaScript

Опубликовано: 11 Августа, 2022

Javascript — это стандартная технология, которая используется для обеспечения интерактивности веб-страницы. Не только в веб-взаимодействии, но и с опциями записи мультимедиа. Да, конечно, эта статья о возможности записи мультимедиа в Javascript в соответствии с заголовком.

Создание средства записи экрана с помощью JavaScript (включая звук с микрофона)

getDisplayMedia: используется для захвата экрана пользователя. Когда мы вызываем эту функцию, пользователю предлагается выбрать часть, которая должна быть захвачена. Если он отклонен пользователем, вы можете столкнуться с ошибкой NotAllowedError. Но если это разрешено пользователем, он возвращает обещание, которое преобразуется в объект MediaStream. Доступ к этой функции можно получить через объект навигатора.

Синтаксис:

ограничения:

{video: {mediaSource:"screen"}, audio: true}

Для mediaSource видео установлено значение screen, а для системного звука записи установлено значение true, если это необходимо. Вы также можете установить значение false, если нет необходимости записывать системный звук.

navigator.mediaDevices.getDisplayMedia(constraints)

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

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

Синтаксис:

ограничения:

{video:false,audio:true}

Запись видео устанавливается в true, если есть необходимость записи веб-камеры, в нашем случае false. И для записи звука с микрофона установлено значение true, если есть необходимость записать микрофон.

navigator.mediaDevices.getUserMedia(constraints)

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

Конструктор MediaRecorder: используется для записи MediaStream, предоставляемого функциями getDisplayMedia() и getUserMedia().

Параметры:

MediaStream, предоставляемый getUserMedia и getDisplayMedia

Синтаксис:

let recorder = new MediaRecorder(combine);

Конструктор MediaStream: используется для хранения нескольких аудио- и видеодорожек. Но в нашем случае мы используем это, чтобы объединить наш звук и захваченное видео, которое содержит движения экрана пользователя, в один медиапоток, чтобы мы могли одновременно записывать и дисплей, и микрофон.

Синтаксис:

// Multiple tracks can be added to the MediaStream
// object in an array format
let combine  = new MediaStream([tracks])

Пример:

index.html

<html>
  
<head>
    <meta charset="UTF-8" />
  
    <link rel="stylesheet" type="text/css" 
          href="styles.css" />
    <title>Screen Recording with client 
          side javascript</title>
</head>
  
<body>
    <div style="float: left">
        <video class="recording" autoplay muted width="500px" 
               height="500px"></video>
    </div>
    <div>
        <h1>OUTPUT</h1>
        <video class="output" autoplay controls width="500px" 
               height="500px"></video>
  
        <button class="start-btn">Start Recording</button>
        <button class="stop-btn">Stop Recording</button>
        <a href="#" download="output.mp4" 
           class="download-anc">Download</a>
    </div>
    <script src="script.js"></script>
</body>

Здесь тег видео с именем класса .recording используется для отображения захваченного видео. И мы отключили его, и причина в том, чтобы избежать нежелательного звука во время записи звука с микрофона. И мы также добавили атрибут автозапуска, который помогает нам воспроизводить видео без какого-либо взаимодействия с пользователем, например, в режиме записи экрана в реальном времени. Тег видео с именем класса .output используется для отображения записанного вывода видео, предоставляя пользователю возможность управлять им, загружать видео с помощью элементов управления по умолчанию, предоставляемых браузерами.

Теперь кнопки с именем класса .start-btn и .stop-btn используются для запуска и остановки записи при нажатии на нее с помощью javascript, что вы увидите в файле script.js.

script.js

var video = document.querySelector(".recording");
var output = document.querySelector(".output");
var start = document.querySelector(".start-btn");
var stop = document.querySelector(".stop-btn");
var anc = document.querySelector(".download-anc")
var data = [];
  
// In order record the screen with system audio
var recording = navigator.mediaDevices.getDisplayMedia({
    video: {
        mediaSource: "screen",
    },
    audio: true,
})
    .then(async (e) => {
  
        // For recording the mic audio
        let audio = await navigator.mediaDevices.getUserMedia({ 
            audio: true, video: false })
  
        // Assign the recorded mediastream to the src object 
        video.srcObject = e;
  
        // Combine both video/audio stream with MediaStream object
        let combine = new MediaStream(
            [...e.getTracks(), ...audio.getTracks()])
  
        /* Record the captured mediastream
           with MediaRecorder constructor */
        let recorder = new MediaRecorder(combine);
  
        start.addEventListener("click", (e) => {
  
            // Starts the recording when clicked
            recorder.start();
            alert("recording started")
  
            // For a fresh start
            data = []
        });
  
        stop.addEventListener("click", (e) => {
  
            // Stops the recording  
            recorder.stop();
            alert("recording stopped")
        });
  
        /* Push the recorded data to data array 
          when data available */
        recorder.ondataavailable = (e) => {
            data.push(e.data);
        };
  
        recorder.onstop = () => {
  
            /* Convert the recorded audio to 
               blob type mp4 media */
            let blobData = new Blob(data, { type: "video/mp4" });
  
            // Convert the blob data to a url
            let url = URL.createObjectURL(blobData)
  
            // Assign the url to the output video tag and anchor 
            output.src = url
            anc.href = url
        };
    });

Выход:

Вы можете записать весь экран или конкретное приложение, открытое вами, или определенную вкладку Chrome. Здесь мы установили ограничения для свойства аудио объекта {video:{mediaSource:"screen"}, audio: true} , для которого задано значение true, чтобы у нас была возможность поделиться системным звуком в подсказке, если есть необходимость записать системный звук, вы можете поставить галочку и теперь нажмите кнопку «Поделиться», чтобы начать захват экрана, в нашем случае мы выбрали захват всего экрана.

Теперь вы можете видеть захваченный экран, отображаемый тегом видео с движениями в реальном времени. Здесь вы можете видеть, что тег видео, который используется для отображения записанного вывода, пуст, потому что мы не начали запись. После нажатия кнопки «Начать запись» должна начаться запись экрана и звука микрофона/системы в фоновом режиме. Теперь просто делайте то, что вам нужно. Например: играйте в свои игры, объясняйте свои учебные пособия по программированию и т. д. и нажмите кнопку остановки записи, когда вам нужно остановиться. После нажатия кнопки остановки вы сможете увидеть записанный вывод в теге выходного видео.

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

Примечание. Щелкните ссылку для скачивания после остановки записи.

Теперь вы сможете увидеть, что файл output.mp4 загружен, и да, теперь вы можете поделиться записанным видео с друзьями, семьей, в социальных сетях и т. д.

JavaScript HTML

Запись экрана с микрофонным звуком с использованием JavaScript

index.html

script.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ