离子流MJPEG

Question

环境：I有一部手机连接到黑匣子摄像头，它在http://192.168.10.123:7060上公开MJPEG格式的流，智能手机的主要目的是获取该流并将其可视化。想象一下它们已经通过内置的Wifi摄像头连接起来了。

限制：，我需要通过Ionic 3来完成它。

加分：我需要在原始数据流上构建一个控制器来停止、重新加载，并可能从其中捕获一些东西。

我已经做了什么，(failing):

<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>

我还尝试在已经编写的URL之后添加清单(format=mjpg)(正如我在各种文章中看到的那样)。结果是一个空白的视频元素，它什么也不再现。我还使用一个在线视频示例尝试了这个HTML5组件的功能，一切都进行得很好。

我试图从这个IP+PORT检索东西的第二次尝试是使用https://github.com/nchutchind/cordova-plugin-streaming-media，但是没有什么改变，我得到了与HTML5组件相同的结果。

第三次尝试:我尝试使用VLC来查看流是否可见，是的，是的。此外，我还获得了我在环境部分中报告的信息。

的主要问题：我应该采取哪些其他途径来解决我的检索结果和用我的极限完成我的任务？

Answer 1

您可以简单地使用https://github.com/phoboslab/jsmpeg来流mjpeg

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