I have website exemption system i want when user open website record session and save video to wwwroot and when finish session end video i want in JavaScript or c#
project : asp mvc core
when finish just end recording and save in wwwroot
You could try below code to capture screen and save the video:
view(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>
UploadController:
[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" });
}
}