Next.js 构建屏幕录制器

随着对教程、演示和演讲等各种活动中 捕捉屏幕活动 的需求不断增长，需要快速高效的解决方案来开发 屏幕录制 的Web应用程序。本文旨在通过 Next.js 来解决这一需求，Next.js是一个流行的开源Web开发React框架，可以加速使用 服务端渲染功能 ，还可以 增强SEO 。

安装Next.js的步骤

步骤1： 安装NodeJS。根据您的系统，选择以下链接安装Node.js，Windows或Linux。

步骤2： 现在在桌面上为您的项目创建一个文件夹，通过代码编辑器导航到该文件夹，并在终端上运行以下命令。

npm init -y  
npx create-next-app@latest  
    or  
yarn create next-app ****

项目结构

Next.js 构建屏幕录制器

方法

ScreenRecorder组件是一个默认导出的 功能性组件 。
网站的 UI 上有 两个按钮 和一个包含屏幕录制的视频帧。这些按钮的任务是触发一个事件。当用户点击开始录制按钮时，将调用startRecording函数，并在点击停止录制按钮时调用stopRecording函数。
在这里，只要点击开始录制按钮，就会获取 屏幕的视频流 。流会存储在 块数组 中。
在客户端点击停止录制按钮后，屏幕视频流会停止。然后创建一个 Blob ，它是一个 视频流的字节集合 ，用于以 URL 的形式存储视频。屏幕录制显示在 视频帧 中，用户可以右键点击并将其保存到 磁盘位置 中以查看或下载。

示例： 在这个示例中，我们将构建一个屏幕录制器。首先，我们需要创建一个 屏幕录制器组件 。

pages/index.js

'use client'
import React, { useRef, useState } from 'react'; 
const ScreenRecorder = () => { 
  
    /* Create a reference to the video element,  
    which helps in storing continous video stream  
    irespective of multiple renders. */
    const screenRecording = useRef(null); 
  
    const [Recorder, setRecorder] = useState(null); 
    const [displayMedia, setDisplayMedia] = useState(null); 
    const startScreenRecording = async () => { 
        const stream = await navigator.mediaDevices.getDisplayMedia({ 
            audio: true, video: true
        }); 
        const recorder = new MediaRecorder(stream); 
        setRecorder(recorder); 
        setDisplayMedia(stream.getVideoTracks()[0]); 
        const screenRecordingChunks = []; 
        recorder.ondataavailable = (e) => { 
            if (e.data.size > 0) { 
                screenRecordingChunks.push(e.data); 
            } 
        } 
        recorder.onstop = () => { 
            //onstop event of media recorder  
            const blob = new Blob(screenRecordingChunks, 
                { type: 'video/webm' }); 
            const url = URL.createObjectURL(blob); 
            screenRecording.current.src = url; 
            if (displayMedia) { 
                displayMedia.stop(); 
            } 
        } 
        //Start the recording. 
        recorder.start(); 
    } 
    // Style the Button 
    const ButtonStyle = { 
        backgroundColor: 'green', 
        color: 'white', 
        fontSize: '2em', 
    }; 
  
    return ( 
        <> 
            <button style={ButtonStyle} onClick={() =>  
                           startScreenRecording()}> 
                Start Recording 
            </button> 
            <button style={ButtonStyle} onClick={() =>  
                          { Recorder && Recorder.stop() }}> 
                Stop Recording 
            </button> 
            <br /><br /><br /> 
            <video ref={screenRecording}  
                   height={300}  
                   width={600} controls /> 
        </> 
    ); 
}; 
export default ScreenRecorder;

运行步骤：