html - 在 ionic 4 中播放直播

标签 html ionic-framework ionic4 http-live-streaming

我愿意创建一个应用程序来监控监控摄像头,没什么特别的,只是一个简单的 android 应用程序,可以在主页上实时显示我的摄像头流量,当我点击它时它会全屏显示。 (我稍后会适配安卓电视的应用程序) 但我已经搜索了一种通过“视频”标记播放实时流的方法,但它似乎没有用,我找不到适合我的情况的任何教程:/

目前我的应用程序只是一个显示 mp4 的简单 html 文件,所以我没有太多代码可以显示给您

tldr:我正在寻找一种在 ionic 应用程序中播放直播视频的简单方法(如果可能,使用“视频”HTML 标记)

最佳答案

从一些初步研究来看,似乎有很多示例,但它们不适用于 Ionic 4(我正在搜索“ ionic 流媒体示例”)。

有一个ionic 4插件可以播放流媒体:

https://ionicframework.com/docs/native/streaming-media/

有像这样的 ionic 3 教程:

https://www.youtube.com/watch?v=AyS3uw7HZOM

只要您知道如何构建 Ionic 4 应用程序,Ionic 3 教程应该能够很好地展示核心部分,以便您将它们适应 Ionic 4。

如果没有,那么您可能应该先花一些时间学习 Ionic 4,但是有关于 Ionic 3 和 4 之间变化的文档(警告:组件名称和参数有大量变化,但基本思想是一样的)。

尽管从最初的研究来看,您似乎无法满足第一个要求 - 在主页中以缩略图播放流。这需要进一步研究。

根据我的经验,视频会全屏加载。我看过一些关于播放视频预览的教程,但我认为它们是针对本地文件的,不确定如何尝试将多个视频流式传输到您的应用程序。这将占用大量带宽。

如果您可以从相机中获取缩略图快照并且每分钟左右更新一次,那就更有意义了。

关于html - 在 ionic 4 中播放直播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58767303/

相关文章:

angular - NgRX 8 效果 - createEffect() 不起作用 - 类型 'Observable<unknown>' 无法分配给类型“Observable<Action>”

angular - 带 Angular 路由器的 Ionic 4 setRoot

ios - 将 ionic 4 项目从 PC 移动到 Mac 时,您需要做一些特别的事情吗?

javascript - 使用纯 JavaScript 获取 div 高度

angular - 如何在我的 View 中实现动态类?

html - Tumblr - 在视频和每张图片集周围放置边框

angularjs - 从指令链接调用 $http.get

angularjs - 如何使用 $ionicHistory.viewhistory 获取以前的网址?

html - 如何使用 CSS [Twitter Bootstrap] 创建类似 Pinterest 的网格

php - 将 HTML anchor 目标 ="_blank"插入 PHP echo 语句