我已经设法在浏览器上录制和下载视频，它在浏览器上运行良好，完全没有问题，但是当我尝试在视频播放器（播放器）上查看它时，上面没有轨道。为什么？
<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>
可以帮助我改进脚本吗？
将blob转换为MP4文件，因为pot播放器支持MP4格式。首先您需要将视频录制为MP4，然后将其用作MP4视频文件
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="movie.mp4" type="video/mp4" />
<source src="movie.ogg" 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>