.net 中的记录器屏幕

Question

我有网站豁免系统，当用户打开网站记录会话并将视频保存到 wwwroot 时，当完成会话结束视频时，我想要在 JavaScript 或 C# 中

项目：asp mvc 核心

完成后结束录制并保存在wwwroot中

Answer 1

您可以尝试以下代码来捕获屏幕并保存视频：

视图（index.cshtml）：

<button onclick="startRecording()">Start Recording</button>
<button onclick="stopRecording()">Stop Recording</button>
<script>
    let mediaRecorder;
    let recordedBlobs = [];

    function startRecording() {
        recordedBlobs = [];
        navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.ondataavailable = (event) => {
                if (event.data && event.data.size > 0) {
                    recordedBlobs.push(event.data);
                }
            };
            mediaRecorder.start();
        }).catch((err) => {
            console.error("Error accessing display media: ", err);
        });
    }

    function stopRecording() {
        mediaRecorder.stop();
        const blob = new Blob(recordedBlobs, { type: 'video/webm' });
        uploadVideo(blob);
    }

    function uploadVideo(blob) {
        const formData = new FormData();
        formData.append('video', blob, 'session_recording.webm');

        fetch('/api/upload', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(err => console.error(err));
    }
</script>

上传控制器：

[Route("api/[controller]")]
 [ApiController]
 public class UploadController : Controller
 {
     [HttpPost]
     public async Task<IActionResult> Post()
     {
         var video = Request.Form.Files["video"];
         if (video != null && video.Length > 0)
         {
             var filePath = Path.Combine("wwwroot", "uploads", video.FileName);

             Directory.CreateDirectory(Path.GetDirectoryName(filePath));

             using (var stream = new FileStream(filePath, FileMode.Create))
             {
                 await video.CopyToAsync(stream);
             }

             return Ok(new { message = "Video uploaded successfully" });
         }

         return BadRequest(new { message = "No video file found" });
     }
 }