在 ionic 中流式传输 MJPEG

Question

环境： 我有一个 phone 连接到 黑匣子相机 ，它在 http://192.168.10.123:7060 和一个 smartphone ，其主要目的是获取流并将其可视化。想象一下，他们已经通过相机内置的 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 来查看流是否可见，是的，是的。另外，我获得了我在 environment 部分报告的信息。

主要问题: 我还应该采取哪些其他途径来解决我的检索结果并在我的极限内完成我的任务？

Answer 1

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

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

在 ionic 中流式传输 MJPEG

Streaming MJPEG inside ionic

video-streaming

html5-video

cordova

ionic3