在 ionic 中流式传输 MJPEG

Question

环境：我有一部手机连接到一个黑盒摄像头，该摄像头在http://192.168.10.123:7060 公开一个 MJPEG 流，还有一部智能手机，其主要目的是获取流式传输并可视化它。想象一下，他们已经通过摄像头内置的 Wifi 连接。

限制：我需要通过 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>

我还尝试（正如我在各种文章中看到的那样）在已编写的 URL 之后添加 manifest(format=mjpg)。 结果是一个空白的视频元素，没有任何内容。 我还使用示例在线视频尝试了这个 HTML5 组件的功能，一切正常。

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

第三次尝试：我尝试使用 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});