Хобрук: Ваш путь к мастерству в программировании

Отображение прямой трансляции RTSP в веб-браузере с использованием java и Web Socket

Я хочу написать java-программу, которая декодирует прямой эфир RTSP, поступающий с IP-камеры, и отправляет его веб-клиенту HTML5 через веб-сокеты. Я могу сделать это, когда дело доходит до простого файла mp4 на моем компьютере. Мой код выглядит так:

ДЖАВА

@ServerEndpoint("/echo")
public class EchoEndPoint {

@OnMessage
public byte[] echo(String message) {
    File file = new File("/home/maher/devTools/video/testVideo.mp4");
    byte[] data = new byte[(int) file.length()];
    DataInputStream stream = null;
    try {
        stream = new DataInputStream(new FileInputStream(file));
    } catch (FileNotFoundException e1) {
        // TODO Auto-generated catch block
        e1.printStackTrace();
    }
    if (stream != null) {
        try {
            stream.readFully(data);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        try {
            stream.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    return data;
    }
  }

HTML

<!DOCTYPE html>
<html>
<head>
<title>Test streaming over WebSockets</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script language="javascript" type="text/javascript">
    var wsUri = "ws://localhost:7070/serverWs/echo";
    function init() {
        websocket = new WebSocket(wsUri);
        websocket.onmessage = function (evt) {
            readFile(evt.data);
        };
    }
    function readFile(fileData) {
        var video = document.getElementById('area');
        video.src = window.URL.createObjectURL(fileData);
    }
    function createObjectURL(file) {
        if (window.webkitURL) {
            return window.webkitURL.createObjectURL(file);
        } else if (window.URL && window.URL.createObjectURL) {
            return window.URL.createObjectURL(file);
        } else {
            return null;
        }
    }
    function startVideo() {
        var message = "startVideo";
        websocket.send(message);
    }
    window.addEventListener("load", init, false);
</script>
</head>


<body>
<h2 style="text-align: center;">Client WebSocket Echo</h2>
<div style="text-align: center;">
<input onclick="startVideo()" value="Start video" type="button">
</div>
<div>
<video id='area' controls="controls" autoplay></video>
</div>

</body>
</html>

Но когда дело доходит до URL-адреса прямой трансляции RTSP, я не могу найти способ декодировать поток и отправить его через WS, а затем отобразить этот поток на моей веб-странице.

07.06.2017

Ответы:


1

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

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

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

Большинство потоковых серверов будут поддерживать транскодирование видео в разные форматы и потоковую передачу с несколькими скоростями передачи для потоковой передачи с адаптивной скоростью передачи данных.

GStreamer (https://gstreamer.freedesktop.org) — это стример с открытым исходным кодом, который, как вы можете найти, удовлетворит ваши потребности - даже если это не так, это будет хорошая эталонная реализация для просмотра.

Вы можете увидеть информацию о поддержке RTSP здесь: https://gstreamer.freedesktop.org/documentation/rtp.html

08.06.2017

2

Я не могу ответить на первый комментарий, но ответ не будет соответствовать требованиям в реальном времени (по сравнению с прямой трансляцией), если это желание. Предложение комментариев добавит 10-20+ секунд к задержке потока.

Есть пара RTSP для серверной части для WebSocket для решений/вариантов/примеров на стороне клиента:

https://github.com/Streamedian/ https://www.npmjs.com/package/node-rtsp-stream https://medium.com/@chpmrc/how-to-stream-rtsp-on-the-web-using-web-sockets-and-canvas-d821b8f7171e

  • Web/HTML5 отходит от Flash (и подобных плагинов/ActiveX), которые обеспечивают меньшую задержку за счет более прямых потоков RTP/RTSP/RTMP (на основе UDP). WebRTC может со временем стать заменой решения. HLS/адаптивный битрейт и т. д. будут иметь задержку в 10-20+ секунд.

  • Прямая трансляция (концерты/события) подталкивает развитие потоковой передачи (поставщики Azure/Facebook/Wowza/AWS), где задержки в 20–40 секунд обычно не являются проблемой.

08.02.2018
Новые материалы

Создание успешной организации по науке о данных
"Рабочие часы" Создание успешной организации по науке о данных Как создать эффективную группу по анализу данных! Введение Это обзорная статья о том, как создать эффективную группу по..

Технологии и проблемы будущей работы
Изучение преимуществ и недостатков технологий в образовании В быстро меняющемся мире технологии являются решающим фактором в формировании будущего работы. Многие отрасли уже были..

Игорь Минар из Google приедет на #ReactiveConf2017
Мы рады сообщить еще одну замечательную новость: один из самых востребованных спикеров приезжает в Братиславу на ReactiveConf 2017 ! Возможно, нет двух других кланов разработчиков с более..

Я собираюсь научить вас Python шаг за шагом
Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..

Альтернатива шаблону исходящих сообщений для архитектуры микросервисов
Познакомьтесь с двухэтапным сообщением В этой статье предлагается альтернативный шаблон для папки Исходящие : двухэтапное сообщение. Он основан не на очереди сообщений, а на..

React on Rails
Основное приложение Reverb - это всеми любимый монолит Rails. Он отлично обслуживает наш API и уровень просмотра трафика. По мере роста мы добавляли больше интерактивных элементов..

Что такое гибкие методологии разработки программного обеспечения
Что представляют собой гибкие методологии разработки программного обеспечения в 2023 году Agile-методологии разработки программного обеспечения заключаются в следующем: И. Введение A...