I have managed to record and download a video on the browser, It works well on the browser, no problem at all but when i try to see it on a video player (pot player) there is no track on it. Why?
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>
<a id="downloadLink" style="display: none;">Download Video</a>
<script>
let mediaRecorder;
let recordedChunks = [];
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
const video = document.getElementById('video');
video.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
recordedChunks = [];
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'recorded_video.webm';
downloadLink.style.display = 'block';
};
})
.catch((error) => {
if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
console.error('User denied camera access.');
} else {
console.error('Error accessing camera:', error);
}
});
document.getElementById('startRecording').addEventListener('click', () => {
recordedChunks = [];
mediaRecorder.start();
document.getElementById('startRecording').disabled = true;
document.getElementById('stopRecording').disabled = false;
});
document.getElementById('stopRecording').addEventListener('click', () => {
mediaRecorder.stop();
document.getElementById('startRecording').disabled = false;
document.getElementById('stopRecording').disabled = true;
});
</script>
</body>
Could help me improving the script?
Convert blob to MP4 file as pot player supports MP4 format.First you need to record video as MP4 and then to use it as MP4 video file
const blob = new Blob(recordedChunks, { type: "video/mp4" });
<video id="video" width="640" height="480" autoplay></video>
<div>
<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>
</div>
<a id="downloadLink" style="display: none">Download Video</a>
<video width="320" height="240" controls id="videoPlayer">
<source src="" type="video/mp4" />
<source src="" type="video/ogg" />
Your browser does not support the video tag.
</video>
<script>
let mediaRecorder;
let recordedChunks = [];
const videoPlayer = document.getElementById("videoPlayer");
var constraints = {
audio: true,
video: true,
};
navigator.mediaDevices
.getUserMedia(constraints)
.then((stream) => {
const video = document.getElementById("video");
video.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: "video/mp4" });
recordedChunks = [];
const newObjectUrl = URL.createObjectURL(blob);
videoPlayer.src = newObjectUrl;
videoPlayer.play();
const myFile = new File([blob], "demo.mp4", { type: "video/mp4" });
const downloadLink = document.getElementById("downloadLink");
downloadLink.href = URL.createObjectURL(myFile);
downloadLink.download = "recorded_video.mp4";
downloadLink.style.display = "block";
};
})
.catch((error) => {
if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
console.error("User denied camera access.");
} else {
console.error("Error accessing camera:", error);
}
});
document.getElementById("startRecording").addEventListener("click", () => {
recordedChunks = [];
mediaRecorder.start();
document.getElementById("startRecording").disabled = true;
document.getElementById("stopRecording").disabled = false;
});
document.getElementById("stopRecording").addEventListener("click", () => {
mediaRecorder.stop();
document.getElementById("startRecording").disabled = false;
document.getElementById("stopRecording").disabled = true;
});
</script>