ASP.NET Core MVC项目：实现网站会话录屏并保存至wwwroot

前端JavaScript录屏逻辑 #

利用浏览器原生MediaRecorder API实现屏幕捕获，页面加载时启动录制，会话结束（页面关闭/刷新）时停止并上传视频至后端。

let mediaRecorder;
let recordedChunks = [];

// 页面加载完成后启动录屏
window.addEventListener('load', async () => {
    try {
        // 请求屏幕录制权限，指定捕获浏览器窗口
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: { displaySurface: 'browser' },
            audio: false // 需要录制音频可改为true
        });
        
        // 初始化MediaRecorder，指定输出格式为WebM
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        
        // 收集录制的视频片段
        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };
        
        // 录制停止后上传视频到后端接口
        mediaRecorder.onstop = async () => {
            const videoBlob = new Blob(recordedChunks, { type: 'video/webm' });
            const formData = new FormData();
            formData.append('screenRecording', videoBlob, `session-${Date.now()}.webm`);
            
            await fetch('/ScreenRecording/Save', {
                method: 'POST',
                body: formData
            });
            
            recordedChunks = [];
        };
        
        // 开始录制，每1秒生成一个片段（可调整）
        mediaRecorder.start(1000);
    } catch (error) {
        console.error('录屏启动失败:', error);
    }
});

// 页面卸载时触发停止录制
window.addEventListener('beforeunload', () => {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
    }
});

后端C#文件接收与存储 #

创建MVC控制器处理前端上传的视频文件，将其保存至wwwroot/recordings目录（代码中会自动生成该目录）。

using Microsoft.AspNetCore.Mvc;
using System.IO;

namespace YourProjectNamespace.Controllers
{
    public class ScreenRecordingController : Controller
    {
        private readonly IWebHostEnvironment _webHostEnv;

        public ScreenRecordingController(IWebHostEnvironment webHostEnv)
        {
            _webHostEnv = webHostEnv;
        }

        [HttpPost]
        public async Task<IActionResult> Save(IFormFile screenRecording)
        {
            if (screenRecording == null || screenRecording.Length == 0)
            {
                return BadRequest("未获取到有效录制文件");
            }

            // 构建保存路径
            var saveDir = Path.Combine(_webHostEnv.WebRootPath, "recordings");
            if (!Directory.Exists(saveDir))
            {
                Directory.CreateDirectory(saveDir);
            }

            var filePath = Path.Combine(saveDir, screenRecording.FileName);
            
            // 写入文件到wwwroot目录
            using (var fileStream = new FileStream(filePath, FileMode.Create))
            {
                await screenRecording.CopyToAsync(fileStream);
            }

            return Ok("录制文件保存成功");
        }
    }
}

核心注意事项 #

• 浏览器权限：用户必须手动授予屏幕录制权限，生产环境需部署HTTPS（localhost不受限制）。
• 异常场景处理：beforeunload事件无法覆盖浏览器崩溃等极端情况，可结合后端心跳机制标记会话结束。
• 存储管理：WebM格式文件体积较小，但长期存储需定期清理或迁移至云存储。
• 格式兼容性：WebM在主流浏览器中支持良好，如需MP4格式需借助第三方编码库处理。

内容的提问来源于stack exchange，提问作者Moheman Aldulimy