Потоковое MJPEG внутри ионного - PullRequest
Новая
       16

Потоковое MJPEG внутри ионного

0 голосов
/ 30 мая 2018

Среда: У меня есть телефон, который подключается к камере черного ящика , которая отображает поток в MJPEG на http://192.168.10.123:7060, и смартфон, основной целью которого является получениепоток и визуализировать его.Представьте, что они уже подключены через встроенный Wi-Fi камеры.

Ограничения: Мне нужно сделать это через Ionic 3.

Бонусная точка : Мне нужно построить контроллер на необработанном потоке данных, чтобы остановить, перезагрузить и, возможно, захватить что-то из него.

Что я уже сделал ( не удалось ): 

<ion-content>
    The world is your oyster. Let's see the stream.

    <video src="http://192.168.10.123:7060/" controls>
    <!-- <video src="http://192.168.10.123:7060/manifest(format=mpeg)" controls> -->
        Your browser does not support the <code>video</code> element.
    </video>
<ion-content>

Я также пытался (как я видел это в различных статьях) добавить манифест (format = mjpg) после уже написанного URL.В результате получается пустой элемент видео, который ничего не воспроизводит.Я также попробовал функциональность этого компонента HTML5, используя образец онлайн-видео, и все работало хорошо.

Моя вторая попытка получить что-то с этого порта IP + использовала https://github.com/nchutchind/cordova-plugin-streaming-media, но ничего не изменилось,Я получаю тот же результат, что и с компонентом HTML 5.

Третья попытка: я попытался с помощью VLC увидеть, был ли поток видимым, и да, это так.Кроме того, я получил информацию, которую сообщил в разделе environment .

Основной вопрос : Какими еще путями я должен следовать, чтобы решить, как получить свой результат и выполнить задачу с моими ограничениями?

1 Ответ

0 голосов
/ 07 августа 2018

Вы можете просто использовать https://github.com/phoboslab/jsmpeg для потоковой передачи mjpeg 

var canvas = document.getElementById('video-canvas');
this.player = new JSMpeg.Player(this.button.url ,{canvas: canvas});
...