如何在 angular 6 或 HTML 5 中流式传输 rtmp

Question

我已经将 rtmp 与节点服务器集成，现在我需要在我的 angular 6 应用程序中将 rtmp 流显示为实时视频。对我有什么建议吗？

我试过 vidojs 和其他播放器，但对我来说没用。

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>

Answer 1

Web 浏览器不支持没有 flash 的 rtmp。您必须转换成它支持的格式，如 DASH，并使用像 video.js

这样的播放器

Answer 2

流需要以可以在 HTML5 上播放的格式传送（HLS、MPEG DASH、WebRTC）。如果流是 H264+AAC，可以使用 Wowza SE 作为 HLS 传送到 Safari，DASH 传送到 Chrome/Firefox（自适应播放取决于浏览器）

你可以在这个演示中尝试这项技术，它应该在 Safari 中播放 HLS，在 Chrome 中播放 DASH： https://videonow.live/channel/videonowlive/

如果使用不同的编解码器或想发布为WebRTC，也需要转码。如需进一步研究，请在您自己的设置中为运行这些功能部署此免费开源 WP 插件： https://wordpress.org/plugins/videowhisper-live-streaming-integration/

Answer 3

https://www.npmjs.com/package/ngx-webcam

一个组件让您可以完全控制并让您通过操作和事件绑定拍摄快照

如何在 angular 6 或 HTML 5 中流式传输 rtmp

How to stream rtmp in angular 6 or in HTML 5

html

rtmp

node.js

angular