Почему mediaRecorder работает некорректно?

Question

[historydev]

Здравствуйте. Пытаюсь записывать вебку, запись работает, но невероятно криво:
1.Размер и длина видео не соответствует той, которая должна быть (на 300+ секунд - 2-12 метров, 1-2 минуты, больше 1:30 за тесты не получал)
2. Видео нельзя перемотать почему-то
3. Видео похоже на повреждённое т.к. онлайн проигрыватели его не пускают, стандартный шиндовс проигрыватель запускает

Вот так я пробую:

localMediaStream.current = await navigator.mediaDevices.getUserMedia({
				audio: audio,
				video: video
			}).then(stream => {

				console.log(stream);

				const mediaRecorder = {
					current: null
				};

				mediaRecorder.current = new MediaRecorder(stream);

				console.log(mediaRecorder.current);

				mediaRecorder.current.start();
				let audioChunks = [];
				mediaRecorder.current.addEventListener('dataavailable',function(event) {
					audioChunks.push(event.data);
				});

				useWebRTC.prototype.stopRecording = () => mediaRecorder.current.stop();

				let counter = 0;
				const interval = setInterval(() => console.log(`Timer: ${counter++}`), 1000);

				mediaRecorder.current.addEventListener('stop', () => {
					const audioBlob = new Blob(audioChunks, {
						type: "video/webm"
					});

					const date = new Date();
					const dataDate = `${date.getDate()}-${date.getMonth()+1}-${date.getFullYear()}__${date.toLocaleTimeString().replaceAll(':', '-')}`;

					const file = new File([audioBlob], `userID:${fromId}|${dataDate}.mp4`, { type: 'video/mp4' });

					const fd = new FormData();
					fd.append('video', file);

					fetch('/video/writeVideo', {
						method: 'POST',
						body: fd
					}).then(data => {
						console.log(data);
					}).catch(console.log).finally(() => {
						audioChunks = [];
						clearInterval(interval);
					});

				});

				return stream
			});

Подскажите пожалуйста, что может быть не так? Спасибо.

Answer 1

[Okujava-script]

Хочу ещё другой код предложить:

<center>
<button id="startButton"> запись </button>
<button id="stopButton"> стоп </button><br /><br />
<video id="preview" width="320" height="240" style="border-style: solid" autoplay muted></video>
<video id="recording" width="320" height="240" controls hidden></video><br /><br />
<a id="downloadButton" hidden>скачать</a>
</center>
<script>
function startRecording(stream, lengthInMS) {
	let recorder = new MediaRecorder(stream);
	let data = [];
	recorder.ondataavailable = event => data.push(event.data);
	recorder.start();
	let stopped = new Promise((resolve, reject) => {
		recorder.onstop = resolve;
		recorder.onerror = event => reject(event.name);
	});
	return Promise.all([stopped, new Promise(resolve => setTimeout(resolve, lengthInMS)).then(() => recorder.state == "съёмка" && recorder.stop())]).then(() => data);
}
startButton.addEventListener("click", function() {
	navigator.mediaDevices.getUserMedia({
		video: true,
		audio: true
	}).then(stream => {
		preview.srcObject = stream;
		preview.captureStream = preview.captureStream;
		return new Promise(resolve => preview.onplaying = resolve);
	}).then(() => startRecording(preview.captureStream(), 5000)).then (recordedChunks => {
		recording.hidden = false;
		preview.hidden = true;
		recording.src = downloadButton.href = URL.createObjectURL(new Blob(recordedChunks, { type: "video/webm" }));
		recording.play();
		downloadButton.hidden = false;
		downloadButton.download = "RecordedVideo.webm";
	});
}, false);
stopButton.addEventListener("click", function() {preview.srcObject.getTracks().forEach(track => track.stop())}, false);
recording.onended = () => recording.currentTime = 0;
</script>

Перематывается, воспроизводится в MPC-HC, время записи не ограничивается.