Поток RTSP на веб-сайт HTML

Я хотел бы отобразить потоковую передачу IP-камер в RTSP на веб-страницу.

Я перепробовал много решений, таких как использование VLC для перекодирования потока, но ни одно из них не кажется достаточно надежным для создания реального веб-сервиса. Я подумываю об использовании какого-нибудь медиа-сервера, такого как flussonic или Red5. Но я не знаю, сработает ли это.

Вот почему я хотел бы знать, что является лучшим (и простым) решением для отображения потоков RTSP на веб-странице.

4 ответа

...для создания реального веб-сервиса.

Я искал ответ в течение последних двух или трех дней (мне нужна поддержка в как можно большем количестве браузеров и как можно меньше задержек, поэтому WebRTC был выходом (есть ли что-нибудь лучше?)) и я вот наконец нашел.

Проверьте это репо.

Из readme репо + дополнительные шаги, которые мне пришлось предпринять (в Ubuntu 18.04), чтобы это сработало:

  1. Установить перейти

    $ sudo snap install go --classic

  2. Получите код на локальном устройстве (может кто-нибудь просветить меня, для чего нужен экспорт?).

    $ export GO111MODULE=on

    $ go get github.com/deepch/RTSPtoWebRTC

  3. Этот шаг не сработал для меня, поэтому я просто загрузил код в файле .zip, распаковал его в указанный каталог и продолжил. (Что я пропустил? Каталога src не было до того, как я его создал)

    $ cd ~/go/src/github.com/deepch/RTSPtoWebRTC

  4. Запуск из текущего каталога.

    $ go run .

  5. Затем я открыл ссылку под веб-браузером (я тестировал в Chrome, iOS Safari, но он также работает в Firefox).

    http://127.0.0.1:8083

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

Надеюсь, я ответил на ваш вопрос.

RTSP поток не поддерживается напрямую браузерами HTML5.

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

Чтобы охватить большинство браузеров и устройств, поток должен быть доставлен в HTML5-совместимых форматах, таких как HLS и DASH.

Для преобразования RTSP в HLS вам необходим потоковый сервер с такими возможностями, как Wowza Streaming Engine. Для лучшего понимания вы можете протестировать этот RTSP для Web Demo, где вы можете ввести свой общедоступный rtsp-адрес и получить поток в Интернете в виде HLS, MPEG DASH, RTMP (Flash).

После того, как попробовал "плагины" способ, предложенный в

Как я могу отобразить видеопоток RTSP на веб-странице?

И способ "преобразования", предложенный в

https://www.npmjs.com/package/html5_rtsp_player

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

https://www.videoexpertsgroup.com/vxg-chrome-plugin/

Вот так выглядит HTML-код

    <!DOCTYPE html>
    <html>
      <head>
      <title></title>
      <meta charset="utf-8" />
      <script type="text/javascript" src="/assets/vxgplayer-1.8.31/vxgplayer-1.8.31.min.js"></script>
      <link href="/assets/vxgplayer-1.8.31/vxgplayer-1.8.31.min.css" rel="stylesheet" />
    </head>
     <body>
       <div  class="vxgplayer"
       id="vxg_media_player1"
       width="640"
       height="480"
       url="rtsp://admin:admin@192.168.1.117/defaultPrimary0?streamtype=u"
       nmf-src="/assets/vxgplayer-1.8.31/pnacl/Release/media_player.nmf"
       nmf-path="media_player.nmf"
       useragent-prefix="MMP/3.0"
       latency="10000"
       autohide="2"
       volume="0.7"
       avsync
       autostart
       controls
       mute
       aspect-ratio
       aspect-ratio-mode="1"
       auto-reconnect
       connection-timeout="5000"
       connection-udp="0"
       custom-digital-zoom></div>
    </body>
    </html>

Вы можете интегрировать библиотеку VLC на свой веб-сайт, и VLC позаботится обо всем, что вам нужно для воспроизведения потока RTSP: https://wiki.videolan.org/index.php?title=HowTo_Integrate_VLC_plugin_in_your_webpage&action=edit&oldid=19150

Другие вопросы по тегам