Пример кода HTML5 для воспроизведения видео RTSP

В настоящее время большинство веб-камер передают видеопотоки по протоколу RTSP, но HTML стандартно не поддерживает потоки RTSP. За исключением браузера Firefox, который может напрямую воспроизводить потоки RTSP, практически никакие другие браузеры не могут напрямую воспроизводить потоки RTSP. Приложения Electron основаны на ядре Chromium, поэтому они не могут напрямую воспроизводить потоки RTSP.

С помощью определенных инструментов потоки RTSP можно воспроизводить на веб-страницах. Метод, представленный в этой статье, может быть применен к традиционным веб-приложениям и приложениям Electron. Единственная разница состоит в том, что основной процесс приложения Electron используется в качестве сервера традиционного веб-приложения.

Поскольку это прямая трансляция, задержка должна быть небольшой. Когда камера отключается от сети, также должно отображаться определенное сообщение о событии. По этим двум пунктам мы сравним существующие решения по RTSP-воспроизведению, реализованные без покупки лицензии (на принципиальной стадии мы их пока анализировать не будем).

Я реализовал все четыре метода, и четвертый метод дает лучший общий эффект. Он занимает меньше портов, имеет низкую задержку, имеет высокую скорость рендеринга и легко обрабатывает автономные события.

flv.js — это браузер HTML5 с открытым исходным кодом от Bilibili. Если для воспроизведения видео используется расширение Media Source Extension, видео передается по протоколу HTTP-FLV или WebSocket-FLV, а формат видео должен быть форматом FLV.

Серверная часть написана с использованием фреймворка express + express-ws. Когда HTTP-запрос отправляется на указанный адрес, запускается программа потоковой передачи ffmpeg, поток RTSP напрямую инкапсулируется в видеопоток в формате FLV и отправляется в файл. указанный поток ответа WebSocket.

 импорт * как экспресс из экспресса; импорт * как экспрессWebSocket из экспресс-ws; импорт ffmpeg из fluent-ffmpeg; импорт webSocketStream из websocket-stream/stream; импорт WebSocket из websocket-stream; импорт * как http из http; функция localServer() { let app = express(); app.use(express.static(__dirname)); perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(экспресс-прослушивание)}function rtspRequestHandle(ws, req) { console.log(дескриптор запроса rtsp) ; const поток = webSocketStream(ws, {binary: true, браузерBufferTimeout: 1000000 }, { браузерBufferTimeout: 1000000 }); let url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); try { ffmpeg(url).addInputOption(-rtsp_transport); , tcp, -buffer_size, 102400) // Здесь можно добавить немного RTSP Оптимизированные параметры.on(start, function () { console.log(url, Stream start.); }) .on(codecData, function () { console.log(url, Stream codecData.) // Онлайн-обработка камеры} ) .on(error, function (err) { console.log(url, Произошла ошибка: , err.message); }) .on(end, function () { console.log(url, Stream end! // Обработка отключения камеры}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream); } catch (error) { console.log(error });

Чтобы сократить время загрузки, вы можете добавить в ffmpeg следующие параметры:

• Analysisuration может сократить время, необходимое для анализа потока кода.
• Я не совсем помню конкретную функцию max_delay, записанную в данных. Эффект не такой очевидный, как при анализе.

Конечно, эта реализация все еще относительно грубая. При наличии нескольких запросов на один и тот же адрес выходные данные ffmpeg следует увеличить вместо запуска нового потока процесса ffmpeg.

В примере используется платформа Vue для дизайна страниц.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>импортировать flvjs из flv.js; экспортировать по умолчанию { props: { rtsp: String, id : String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, mount () { if (flvjs.isSupported()) { let video = this.$refs.player; if (video) { this.player = flvjs.createPlayer({ type: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(video); this.player.load(); this.player.play(); } catch (error) { console.log(error } } }, beforeDestroy () { this.player.destory() }}; /script><style> .demo-video { максимальная ширина: 480 пикселей; максимальная высота: 360 пикселей </style>;

Страница Electron используется для отображения 7 камер Hikvison NVR, которые обеспечивают низкую задержку, низкую загрузку процессора и отсутствие искажений экрана. В целях конфиденциальности скриншоты здесь выкладывать не буду.

Таким же образом я просмотрел 9 локальных видеороликов 1080p «White Deer Plain», чтобы увидеть эффект.

Эффект воспроизведения очень хороший, нет никаких задержек или размытия, а загрузка процессора невелика.

Репозиторий примера кода: WhuRS-FGis/html5-rtsp Репозиторий примера кода:

Выше приведен пример кода для воспроизведения RTSP-видео в HTML5, представленный редактором. Надеюсь, он будет вам полезен. Если у вас есть вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!

Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!