我有网站豁免系统,当用户打开网站记录会话并将视频保存到 wwwroot 时,当完成会话结束视频时,我想要在 JavaScript 或 C# 中
项目:asp mvc 核心
完成后结束录制并保存在wwwroot中
您可以尝试以下代码来捕获屏幕并保存视频:
视图(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" });
}
}