JavaScript 进行屏幕录制和麦克风音频录制

Javascript 是一种用于网页交互的标准技术。它不仅用于网页交互，还可以用于媒体录制选项。当然，本文主要介绍JavaScript作为媒体录制工具的能力。

使用JavaScript创建一个屏幕录制器（包括麦克风音频）

getDisplayMedia： 用于捕获用户的屏幕。当调用此函数时，用户将被提示选择要捕获的部分。如果用户拒绝选择，可能会出现NotAllowedError错误。但如果用户同意选择，它将返回一个解析为MediaStream对象的Promise。此函数可以通过navigator对象访问。

语法：

constraints：

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

视频的 mediaSource 被设置为屏幕，并且如果需要的话， recording system sound 被设置为 true。如果没有必要录制系统音频，也可以将其设置为 false。

navigator.mediaDevices.getDisplayMedia(constraints)

在这里，参数约束被称为选项，用来捕获开发者首选模式下的用户显示，你可以在约束部分看到约束的用法。

getUserMedia： 它用于接收我们的麦克风音频，但它也可以用于访问麦克风、摄像头等等，通过getDisplayMedia()和getUserMedia()，它们会提示用户授权，并返回一个解析为MediaStream对象的Promise。这些函数可以通过navigator对象访问。

语法：

约束：

{video:false,audio:true}

如果需要录制网络摄像头，则设置录制视频为True，在我们的情况下是False。如果需要录制麦克风音频，则设置录制麦克风音频为True。

navigator.mediaDevices.getUserMedia(constraints)

在这里，参数限制被称为选项，用于以开发者首选模式捕捉用户显示，您可以在约束部分中看到约束的用法。

MediaRecorder 构造函数： 用于记录由 getDisplayMedia() 和 getUserMedia() 函数提供的 MediaStream。

参数：

由 getUserMedia 和 getDisplayMedia 提供的 MediaStream
语法：

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 的视频标签来显示捕获的视频。我们已经将其静音的原因是在录制麦克风音频时避免不必要的声音。我们还添加了一个 autoplay 属性，它帮助我们无需用户交互就可以播放视频，就像实时屏幕录制一样。带有类名 .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 
        }; 
    });

输出：

JavaScript 进行屏幕录制和麦克风音频录制

您可以录制整个屏幕，或者录制您打开的特定应用程序，或特定的 Chrome 标签页。在这里，我们将约束对象音频属性设置为： {video:{mediaSource:”screen”}, audio:true} 设置为 true，以便在提示中有一个选项可以 共享系统音频 ，如果需要录制系统音频，您可以勾选复选框，然后点击共享按钮开始捕捉屏幕。在我们的情况下，我们选择捕捉整个屏幕。

现在，您可以通过视频标签显示实时动态的捕获屏幕。您可以看到，用于显示记录的输出的视频标签为空，因为我们没有开始录制。点击开始录制按钮，它将开始录制您的屏幕和麦克风/系统音频在后台。现在，您只需做自己需要的一切。例如：玩游戏，解释编程教程等等，当您需要停止时，点击停止录制按钮。点击停止按钮后，您将能够在输出视频标签中看到记录的输出。

现在，您可以使用浏览器的默认控件播放记录的输出。您还可以给用户提供下载视频的选项，以便在没有下载选项的浏览器中下载视频。

注意： 在停止录制后点击下载链接。

现在，您会看到下载了一个 output.mp4 文件，是的，您现在可以将您录制的视频分享给您的朋友、家人、社交媒体等。