js 实现录屏功能

前言

要想使用js实现一个录屏的功能，那就必须用到webRTC API 中的 navigator.mediaDevices API。那下面就来介绍一下navigator.mediaDevices 是来干嘛的！

navigator.mediaDevices简介

navigator.mediaDevices 是webRTC API 的一部分，它提供了一种访问用户设备的媒体输入输出方式。通过这个API，开发者可以轻松地获取到用户的摄像头、麦克风等媒体设备，并进行实时音视频数据的采集和处理。

navigator.mediaDevces的原理

当开发者调用navigator.mediaDevices的API时。浏览器会向用户请求权限，允许访问指定的媒体设备。一旦用户授权，浏览器就会返回一个stream对象，该对象包含了从媒体设备采集到的实时音视频数据。
上面介绍完了，那就来看看今天的主角了！
navigator.mediaDecices.getDisplayMedia()方法，用于获取用户的屏幕共享数据。

功能实现

1、创建一个button按钮节点

<button class="start-recording">开始录制</button>

2、监听节点点击，使用navigator.mediaDevices.getDisplayMedia()方法进行获取用户的摄像头。

let stream = null;

document.getElementsByClassName("start-recording")[0].addEventListener("click",startRecording);
function startRecording(){
//进行屏幕捕获
  stream = navigator.mediaDevices.getDisplayMedia({
    video:true,
  });
  
}

看下运行效果：

点击按钮会调用浏览器的摄像头，可以在这里进行选择录制哪个屏幕。

3、接下来就来创建一个MediaRecorder对象的实例，进行处理stream对象。

let stream = null;
let mediaRecorder = null;
document.getElementsByClassName("start-recording")[0].addEventListener("click",startRecording);
function startRecording(){
//进行屏幕捕获
  stream = navigator.mediaDevices.getDisplayMedia({
    video:true,
  });
//创建MediaRecorder 实例
  mediaRecorder = new MediaRecorder(stream,{mimeType:"video/webm"})
  console.log(mediaRecorder);
  mediaRecorder.start();
}

运行打印mediaRecorder实例 这里会报错，排查打印发现stream一直在pending状态，故需要加一个await,下面是优化后的代码。

let stream = null;
let mediaRecorder = null;
document.getElementsByClassName("start-recording")[0].addEventListener("click",startRecording);
async function startRecording(){
//进行屏幕捕获
  stream =await navigator.mediaDevices.getDisplayMedia({
    video:true,
  });
//创建MediaRecorder 实例
  mediaRecorder = new MediaRecorder(stream,{mimeType:"video/webm"})
  console.log(mediaRecorder);
  mediaRecorder.start();
}

4、监听停止录播的回调，这里进行视频数据处理

let chunks = [];
//监听录播结束后的回调
mediaRecorder.ondataavailable = (e) => {
  if (e.data.size > 0) {
     chunks.push(e.data);
  }
};

5、接下来使用Blob进行视频格式转换。

先创建一个video标签用于播放视频

<video class="video-recording" style="display: none;" controls autoplay></video>

进行转换

let videoRecording = document.getElementsByClassName("video-recording")[0];
blob = new Blob(chunks,{type:"video/mp4"});
let videourl = URL.createObjectURL(blob);
videoRecording.src = videourl;
videoRecording.style.display="block";

看下现在的效果如何：

在这里可以看到出现了一个正在播放的视频，这个正式刚才录制的视频！！！

6、添加一个停止录屏功能

从之前的视频中我们可以看到它自动带有一个停止录屏的功能按钮，但是我现在想不使用它就能进行停止录屏的操作，下面就来就行操作：
创建一个停止录屏的标签

<button class="stop-recording">停止录屏</button>

通过调用getTracks()方法，进行关闭流

document.getElementsByClassName("stop-recording")[0].addEventListener("click",stopRecording);

function stopRecording(){
  mediastream.stop();
  //getVideoTracks（） 视频流
  //getTracks() 媒体流
  //在这里进行关闭流
  stream.getTracks().forEach(element => {
    element.stop();
  });
}

7、下载视频

其实进行在这里，简单的录屏功能已经完成了，但是我想把录制的视频下载下来呢，又该怎么实现，下面来进行操作一下吧。

<button class="download-recording">下载视频</button>

document.getElementsByClassName("download-recording")[0].addEventListener("click",downloadRecording);

    function downloadRecording(){
        //在浏览器上方弹出个弹框
        let filename = window.prompt("File name", "screen_recording");
        if(filename){
            let a = document.createElement("a");
            a.href = URL.createObjectURL(blob);
            a.download = `${filename}.mp4`;
            a.click();
            //revokeObjectURL 用于释放 URL.createObjectURL创建对象的URL 让浏览器知道无需保持对文件的引用
            URL.revokeObjectURL(a.href);
        }
    }

点击下载可以看到会弹出一个输入框，可以在这里进行修改文件名称：

下载的视频文件位置可以在浏览器中查看！

总结

在这里可以看到一个可以进行开启录屏、结束录屏、下载视频的简单功能已经实现了。
初来咋到，希望能对各位有所帮助......