До сих пор я успешно запрограммировал скрипт узла на расширенном Udoo x86 plus, который захватывает поток RTSP IP-камеры, подключенной через Ethernet. Я использую ffmpeg для транскодирования потока в 5-секундные файлы mp4. Как только файлы появляются в папке, они загружаются / синхронизируются с моим AWS S3 Bucket. Затем у меня есть Node-сервер, который ПОЛУЧАЕТ самый последний созданный файл mp4 из корзины S3 и запускает его через расширение mediasource и, наконец, в виде HTML-тега HTML.
Видео воспроизводится в браузере, но не синхронно. Похоже, что буферизация не происходит. одно видео воспроизводит потом другое и так далее. Видео пропускается повсюду.
Буду очень признателен за любые указания по поводу этой ошибки.
export function startlivestream() {
const videoElement = document.getElementById("my-video");
const myMediaSource = new MediaSource();
const url = URL.createObjectURL(myMediaSource);
videoElement.src = url;
myMediaSource.addEventListener("sourceopen", sourceOpen);
}
function sourceOpen() {
if (window.MediaSource.isTypeSupported(
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
)
)
{
console.log("YES");
}
// 1. add source buffers
const mediaCodec = 'video/mp4; codecs="avc1.4D601F"';
var mediasource = this;
const videoSourceBuffer = mediasource.addSourceBuffer(mediaCodec);
// 2. download and add our audio/video to the SourceBuffers
function checkVideo(url) {
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
if (arrayBuffer) {
videoSourceBuffer.addEventListener("updateend", function(_) {
mediasource.endOfStream();
document.getElementById("my-video").play();
});
videoSourceBuffer.appendBuffer(arrayBuffer);
}
};
oReq.send(null);
}
setInterval(function() {
checkVideo("http://localhost:8080");
}, 5000);
Мои теги ffmpeg:
const startRecording = () => {
const args = [
"-rtsp_transport",
"tcp",
"-i",
inputURL,
"-f",
"segment",
"-segment_time",
"5",
"-segment_format",
"mp4",
"-segment_format_options",
"movflags=frag_keyframe+empty_moov+default_base_moof",
"-segment_time",
"5",
"-segment_list_type",
"m3u8",
"-c:v",
"copy",
"-strftime",
"1",
`${path.join(savePath, "test-%Y-%m-%dT%H-%M-%S.mp4")}`
];
Из того, что я узнал о расширениях Mediasource, они позволяют захватывать несколько видеофайлов и позволяют клиенту буферизовать их так, чтобы это выглядело как одно более длинное видео. Проще говоря.