запись getUserMedia не останавливается после ожидания на примере mdn - PullRequest
0 голосов
/ 30 апреля 2018

В этом примере используются обещания на mdn захватывать / записывать видеопоток на лету, работать нормально, пока вы не нажмете кнопку «Остановить запись», тогда все будет корректно остановлено, также аудио / видео оборудование, которое будет отключено в браузере: но если вы разрешите По истечении времени счетчика, не нажимая кнопку «Стоп», вы увидите, что пример не закроет аудио / видео, которое останется открытым, как при записи (и аппаратный результат все еще задействован): https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element (рабочий пример находится внизу той же страницы или на codepen или jsfiddle, как указано) Как это должно быть закрыто, когда время ожидания истекло, без необходимости нажимать кнопку Стоп? Кто-нибудь знает, возможно ли это?

1 Ответ

0 голосов
/ 30 апреля 2018

Это очень возможно. Это код, который я придумал, теперь все остановлено, даже если нет нажатия на кнопку «Стоп»: в случае нажатия происходит симуляция. Спасибо этому рефералу https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Полученный (и работающий нормально) код выглядит примерно так (завершите, чтобы скопировать / вставить как HTML-файл для проверки):

<code><!DOCTYPE html>
<html>
    <head>

        <style type="text/css">
            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;
}
        </style>

    </head>
    <body>

            <p>Click the "Start" button to begin video recording for a few seconds. You can stop
   the video by clicking the creatively-named "Stop" button. The "Download"
   button will download the received data (although it's in a raw, unwrapped form
   that isn't very useful).
</p>
<br>
 <div class="left">
  <div id="startButton" class="button">
    Start
  </div>
  <h2>Preview</h2>
  <video id="preview" width="160" height="120" autoplay muted></video>
</div>
 <div class="right">
  <div id="stopButton" class="button">
    Stop
  </div>
  <h2>Recording</h2>
  <video id="recording" width="160" height="120" controls></video>
  <a id="downloadButton" class="button">
    Download
  </a>
</div>
 <div class="bottom">
  <pre id="log">
let preview = document.getElementById ("preview"); let recording = document.getElementById («запись»); let startButton = document.getElementById ("startButton"); let stopButton = document.getElementById ("stopButton"); let downloadButton = document.getElementById ("downloadButton"); let logElement = document.getElementById ("log"); let recordingTimeMS = 3000; журнал функций (msg) { logElement.innerHTML + = msg + "\ n"; } функция wait (delayInMS) { вернуть новое обещание (resol => setTimeout (resol, delayInMS)); } function startRecording (stream, lengthInMS) { let рекордер = новый MediaRecorder (поток); let data = []; recordder.ondataavailable = event => data.push (event.data); recorder.start (); log (Recorder.state + "для" + (lengthInMS / 1000) + "секунд ..."); recorder.addEventListener ('dataavailable', функция (событие) { console.log (recorder.state); w3simulateClick (stopButton, 'click'); }); пусть остановлено = новое обещание ((разрешить, отклонить) => { Recorder.onstop = разрешение; recorder.onerror = event => reject (event.name); }); пусть записано = ждать (lengthInMS) .then ( () => Recorder.state == "Запись" && Recorder.stop () ) вернуть Promise.all ([ остановился, записанный ]) .then (() => data); } остановка функции (поток) { stream.getTracks (). forEach (track => track.stop ()); } startButton.addEventListener ("click", function () { navigator.mediaDevices.getUserMedia ({ видео: правда, аудио: правда }). then (stream => { preview.srcObject = stream; downloadButton.href = stream; preview.captureStream = preview.captureStream || preview.mozCaptureStream; вернуть новое обещание (resol => preview.onplaying = resol); }). then (() => startRecording (preview.captureStream (), recordingTimeMS)) .then (recordsChunks => { let recordsBlob = new Blob (recordsChunks, {type: "video / webm"}); recording.src = URL.createObjectURL (recordsBlob); downloadButton.href = recording.src; downloadButton.download = "RecordedVideo.webm"; log ("Успешно записано" + записаноBlob.size + "байт" + recordsBlob.type + "media."); }) .catch (журнал); }, ложный); stopButton.addEventListener ("click", function () { остановки (preview.srcObject); }, ложный); function w3simulateClick (el) { var event = new MouseEvent ('click', { вид: окно, пузыри: правда, отменяемый: правда }); // var cb = document.getElementById ('checkbox'); var отменен = el.dispatchEvent (событие); если (отменено) { // Обработчик с именем protectDefault. предупреждение ( "отменен"); } еще { // Ни один из обработчиков не вызвал protectDefault. оповещение («не отменено»); } }

ура всем классным людям!

...