Какой наиболее эффективный способ заканчиваться потоком MJPEG в браузере ⇐ Javascript

[Anonymous]

Мое приложение отображает группы потоков камер MP4 (.h264) (отображается рядом) очень эффективно. Это использует фрагментированные сегменты кормления MP4 в видео элемент. Это, однако, как и ожидалось, довольно дорого в браузере. Я ищу абсолютно наиболее эффективный способ реализации этой функциональности. Дочерний процесс) Я тяну поток MJPEG-RTSP с FFMPEG, приглушивая все каналы (данные/субтул, аудио), но сам поток MJPEG.
Выходные выводы проводятся в розетках в io Таким образом: < /p>
const IOptions = {
path: '/streams/' + cameraID
}
< /code>
и < /p>
Spawned.stdio[x].on('data', function (data) {

let frame = Buffer.from(data).toString('base64')

socket.emit('canvas', frame)
})
< /code>
Frontend Я в настоящее время создаю новые объекты изображения, которые будут нарисованы на Canvas: < /p>
let socket = io('/', { path: '/streams/camtitle' })
socket.on('canvas', function (data) {
try {
const canvas = document.getElementById('mjpegCanvas')
const context = canvas.getContext('2d')
const imageObj = new Image()
imageObj.src = "data:image/jpeg;base64," + data
imageObj.onload = function () {
context.height = imageObj.height
context.width = imageObj.width
context.drawImage(imageObj, 0, 0, context.width, context.height)
}
} catch (e) { console.log('Canvas Drawing Error:' + e) }
})
< /code>
Это приводит к изменению нагрузки ядра процессора от 8% до 29% на VGA (640 x 480, низкие кадры), и пользователи будут ожидать, что смогут кормить гораздо более высокие разрешения и кадры. JavaScript, возможно, также связанный с сбором мусора. < /P>
Есть ли лучший способ обработки или даже повторного использования объектов изображения? < /P>
Я видел другие случаи На Stackoverflow, который реализует MJPEG через теги изображения, с источником, указывающим на поток MJPEG, как это: < /p>

[img]http://[some ip]:[port]/mjpg[/img]
< /code>
Другие просто просто укажите источник изображения на маршрут, заканчивающийся. Полем Это также превосходит мое понимание того, как это должно работать на самом деле, не проходя JPG или, по крайней мере, разделяя данные соответствующим граничным кадром. Что мне здесь не хватает? Я хотел бы сравнить этот метод для сравнения. < /P>
Я дополнительно реализую тестовую сторону сервера дифференцирующей функции, которая уменьшает работу, отправляя только кадры с определенной мерой изменений пикселя. Будет интересно посмотреть, насколько дорого это будет. Ванильный JavaScript без библиотек и модульсов предпочтительнее, но также будут рассмотрены другие параметры. < /P>
Решение также может предложить изменения на сервере. Это все просто экспериментально на этом этапе.

Подробнее здесь: https://stackoverflow.com/questions/794 ... in-browser