Хорошо, из того, что я вижу, код на самом деле правильный и без каких-либо проблем, если вы помещаете все это в один файл HTML, вы можете добавить тег заголовка, а затем поместить CSS стилизация внутри тега вместо тега.
И добавьте сценарий JS внутри тега body в конце кода, и он должен запустить код.
У меня есть добавил код, который работает ниже, чтобы вы могли сравнить его со своим кодом и посмотреть, в чем разница:)
body {
font: 14px "Open Sans", "Arial", sans-serif;
}
video {
margin-top: 2px;
border: 1px solid black;
}
.button {
cursor: pointer;
display: block;
width: 160px;
border: 1px solid black;
font-size: 16px;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
color: white;
background-color: darkgreen;
text-decoration: none;
}
h2 {
margin-bottom: 4px;
}
.left {
margin-right: 10px;
float: left;
width: 160px;
padding: 0px;
}
.right {
margin-left: 10px;
float: left;
width: 160px;
padding: 0px;
}
.bottom {
clear: both;
padding-top: 10px;
}
Start
Preview
Stop
Recording
Download
let preview = document.getElementById ("preview"); пусть запись = document.getElementById ("запись"); пусть startButton = document.getElementById ("startButton"); let stopButton = document.getElementById ("stopButton"); пусть downloadButton = document.getElementById ("downloadButton"); пусть logElement = document.getElementById ("журнал"); пусть recordTimeMS = 5000; журнал функций (сообщение) {logElement.inner HTML + = сообщение + "\ п"; } функция ожидания (delayInMS) {вернуть новое обещание (resolve => setTimeout (resolve, delayInMS)); } функция startRecording (поток, lengthInMS) {let Recorder = new MediaRecorder (stream); пусть данные = []; рекордер.ondataavailable = событие => data.pu sh (event.data); рекордер.старт (); журнал (рекордер.состояние + «для» + (lengthInMS / 1000) + «секунды ...»); let stop = новое обещание ((разрешить, отклонить) => {рекордер.onstop = разрешить; рекордер.onerror = событие => отклонить (имя.события);}); пусть записано = ждать (lengthInMS) .then (() => Recorder.state == "запись" && recorder.stop ()); return Promise.all ([остановлен, записан]) .then (() => данные); } остановка функции (поток) {stream.getTracks (). forEach (track => track.stop ()); } startButton.addEventListener ("клик", function () {navigator.mediaDevices.getUserMedia ({video: true, audio: true}). then (stream => {preview.srcObject = stream; downloadButton.href = stream; preview. captureStream = preview.captureStream || preview.mozCaptureStream; вернуть новое обещание (resolve => preview.onplaying = resolve);}). then (() => startRecording (preview.captureStream (), recordTimeMS)) .then (loadedChunks = > {let recordBlob = new Blob (loadedChunks, {type: "video / webm"}); record.sr c = URL.createObjectURL (loadedBlob); downloadButton.href = record.src; downloadButton.download = "RecordedVideo. webm "; log (" Успешно записано "+ loadedBlob.size +" bytes of "+ loadedBlob.type +" media. ");}) .catch (log);}, false); stopButton.addEventListener (" click ", function () {stop (preview.srcObject);}, ложь);