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

Javascript是一种标准技术，用于维护网页的交互性。不仅在网络交互中，而且在媒体录制选项中。是的，当然，这篇文章是关于 Javascript 的媒体记录能力，如标题所示。

使用 JavaScript 创建屏幕录像机（包括麦克风音频）

getDisplayMedia：用于捕获用户的显示。当我们调用此函数时，系统会提示用户选择应捕获的部分。如果它被用户拒绝，您可能会遇到 NotAllowedError。但如果用户允许，它会返回一个解析为 MediaStream 对象的承诺。这个函数可以通过 navigator 对象来访问。

句法：

• 约束：

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

如果需要，视频的 mediaSource 设置为屏幕，录制系统声音设置为 true。如果不需要录制系统音频，您也可以将其设置为 false。

navigator.mediaDevices.getDisplayMedia(constraints)

这里的参数约束被称为选项，用于以开发人员的首选模式捕获用户显示，您可以在约束部分中查看约束的使用。

getUserMedia：在我们的例子中，它用于接收来自麦克风的音频，但它可以用于访问麦克风、网络摄像头等，尽管 getDisplayMedia() 和 getUserMedia() 将提示用户许可并返回一个承诺，即解析为 MediaStream 对象。而这些功能都可以通过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

  

    
  
    
    Screen Recording with client 
          side javascript

  

    
        
    
    
        OUTPUT
        
  
        Start Recording
        Stop Recording
        Download
    
    

这里使用一个类名为 .recording 的视频标签来显示捕获的视频。我们已将其静音，这样做的原因是在录制麦克风音频时避免不必要的声音。我们还添加了一个自动播放属性，它可以帮助我们播放视频，而无需像实时屏幕录像机那样进行任何用户交互。类名为 .output 的视频标签用于显示视频的录制输出，为用户提供一种控制它的方式，在浏览器提供的默认控件的帮助下下载视频。

现在，类名为 .start- btn和.stop-btn的按钮用于在您在 script.js 文件中看到的 javascript 帮助下单击它时开始和停止录制。

脚本.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 文件，是的，现在您可以将录制的视频分享给您的朋友、家人、社交媒体等。