Экран записи MediareCorder с аудио в отдельных файлах WebM и воспроизведением последовательно идет не так, когда в видео ⇐ Javascript

[Anonymous]

Я хочу записать весь мой экран с аудио в Chrome с использованием MediareCorder и getDisplaymedia , и я хочу иметь несколько видеофайлов 2 секунды (каждые 2 секунды, 1 новый видеофайл (.webm))
И потому что мне нужен новый файл .webm каждые 2 секунды, у меня есть новый MediareCorder каждые 2 секунды, поэтому у меня есть список .webm видео (каждая по 2 секунды).
При записи, все в порядке! Я записываю несколько. Whebm Content (blob) каждые 2 секунды и храните их в массиве Blobs с именем Videos
Но я хочу воспроизвести эти видеопользу (каждая из них. Whebm Blob с собственным заголовком) в строке, как это один видеофайл. Поэтому я решил создать элемент видео и остановить запись и получить некоторые из них. Webm независимые капли, MediaSource , и первый вариант видео, который добавляет к своему источнику , и это добавление не будет работать до тех пор, пока не работает последнее видео. Но проблема в том, что в каждом записанном видео (мыши с мыши, воспроизводимое видео или ...), в противном случае воспроизведение переходит к статусу ожидания !!!!! Да !!!! Если в каком-либо из этих записанных видео не было никаких действий, как движение мыши, когда время достигает этого видео (видео без движения в нем), в нем заставляет игрока ожидания статус !!!!!!!
Вы можете запустить этот код и начать запись (выберите полный экран + аудио) и ждать 7-8 секунды, а затем нажимать, нажимают видео (каждый из них 2 секунды начинается на 2-й секунды). Элемент). Но если в ваших видео есть какое -либо движение, игрок играет все видео в последовательности просто отлично !!!!!!!!!!! < /p>




Title

.button { background: #e4e5e7; color: #030712; font-weight: bold; padding: 10px 20px; display: inline-block }




Start
Stop

Playback, once clicked on Stop

const eVideoPlayer = document.getElementById("video-player"),
mimeType = 'video/webm; codecs="vp8, opus"'

let videos = [], iv, stream1

function record(stream) {
const mediaRecorder = new MediaRecorder(stream, {
mimeType: mimeType,
videoBitsPerSecond: 60000000
})

let video

mediaRecorder.ondataavailable = async (ev) => {

console.log("data ready")
videos.push(ev.data)
}
setTimeout(() => mediaRecorder.stop(), 2000)
mediaRecorder.start()
}

function doStart() {
navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true
}).then(stream => {
stream1 = stream
iv = setInterval(() => record(stream), 2000)
})
}

async function doStop() {
clearInterval(iv)
stream1.getTracks().forEach(track => track.stop())

let sourceBuffer, mediaSource = new MediaSource()

eVideoPlayer.onwaiting = () => console.log("waiting")

let counter = 1
mediaSource.onsourceopen = async () => {
sourceBuffer = mediaSource.addSourceBuffer(mimeType)
sourceBuffer.mode = "sequence"
sourceBuffer.onupdateend = async () => {
if(eVideoPlayer.paused) {
eVideoPlayer.play()
}
if(counter < videos.length) {
sourceBuffer.appendBuffer(await videos[counter++].arrayBuffer())
}
}
sourceBuffer.appendBuffer(await videos[0].arrayBuffer())
}
eVideoPlayer.src = URL.createObjectURL(mediaSource)
}






Подробнее здесь: https://stackoverflow.com/questions/797 ... y-in-seque