小程序实现RTMP/HLS协议直播监控视频实时播放实现步骤

最新推荐文章于 2024-09-13 07:44:32 发布

夏天Lola(付善兰)

最新推荐文章于 2024-09-13 07:44:32 发布

阅读量8.3k

点赞数 1

分类专栏：小程序视频监控实时播放文章标签：小程序

本文链接：https://blog.csdn.net/weixin_40552099/article/details/107380310

版权

本文介绍了在小程序中实现实时播放RTMP和HLS协议直播监控视频的步骤。对于RTMP协议，需要通过小程序类目审核并开通live-player组件权限；而对于HLS协议，则使用video组件进行播放。

摘要由CSDN通过智能技术生成

小程序实现监控视频实时播放实现步骤

简述：RTMP协议直播视频，可使用小程序live-player组件实现视频播放，暂只针对国内主体特定类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。HLS协议直播视频在小程序只能使用video组件播放。

RTMP协议的直播视频

一.添加小程序相关服务类目（审核通过即可使用小程序live-player组件）
在这里插入图片描述
官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

二.在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限
在这里插入图片描述
三.使用小程序live-player组件，参考代码

<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225p

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏天Lola(付善兰)

关注关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

实现微信小程序与RTMP音视频通话的方案设计与实现

WaJulia的博客

09-18

1079

在微信小程序端，我们可以使用微信小程序提供的实时音视频接口来接收RTMP服务器推送的音视频数据，并进行解码与播放。在微信小程序端，我们可以使用微信小程序提供的实时音视频接口进行音视频采集和编码。上述代码中，我们使用微信小程序的实时音视频接口监听RTMP服务器推送的音视频数据。上述代码中，我们使用ffmpeg命令行工具来接收音频数据和视频数据，并将其解码为wav和mp4格式的文件。上述代码中，我们使用ffmpeg命令行工具将解码后的音频数据和视频数据推送到RTMP服务器。如有任何疑问，请随时提问。

原生微信小程序播放rtmp

qq_34955596的博客

06-24

2394

原生微信小程序播放rtmp

3 条评论您还未登录，请先登录后发表或查看评论

微信小程序嵌入H5页面播放监控webrtc视频流1~2秒画面延迟

weixin_44385447的博客

04-23

3307

微信小程序嵌入H5页面播放webrtc视频流和rtmp视频流监控画面，画面延迟1~2秒，兼容安卓和ios

微信小程序开发中的视频播放和直播功能

最新发布

master_chenchen的博客

09-13

1286

在数字化的今天，视频和直播已经成为人们获取信息、娱乐的主要方式之一。对于微信小程序而言，集成视频播放和直播功能不仅可以增强应用的互动性，还能显著提升用户体验。想象一下，当用户在你的小程序中观看一场激动人心的比赛直播，或是学习一段生动的教学视频，这种沉浸式的体验无疑会让他们印象深刻。然而，要在微信小程序中实现高质量的视频播放和直播功能，并不是一件简单的事情。开发者需要熟悉微信小程序提供的视频组件，并掌握如何优化视频加载速度、处理直播流等技术细节。

uniapp 打包微信小程序播放hls(m3u8)视频流

u010867236的专栏

03-13

2334

博主近期做了可一个小程序对接监控视频的活，记录一下步骤。使用uniapp解析hls还是很方便的，使用内置的video标签就行，如果是动态的路径动态修改路径地址就行。同时这个标签也支持显示弹幕，有需要的童鞋了可以看一下uniapp官方文档和对应的小程序文档。

vue和小程序上实现HLS直播流视频

weixin_39170410的博客

12-30

940

js 中，请求到视频 url，链接一般是 .m3u8结尾的数据，直接复制给liveVideoUrl。在引入video 页面引入。

微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签

Li_Ning21的博客

02-16

9182

微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息，以下内容是我将萤石云平台官方文档和自己实践过程中遇到的问题的总结。官方文档地址：https://open.ys7.com/doc/zh/book/index/live_proto.html 传送门萤石云开放平台步骤：按照萤石摄像机官方携...

小程序实时视频前端

weixin_33739541的博客

02-18

871

最近公司项目有用到腾讯云的实时音视频，一开始以为比较容易，但是也容易踩坑，就重点总结如下7个步骤： step1：首先A 跟业务服务器（腾讯云服务，是与websocket进行沟通）沟通，获取 push-url-A 和低延时的 play-url-A，服务器分配 URL 的方法参考 DOC。 step2： A 创建一个 RTC 模式的标签，指定 url 为 step1 中获得的 push-url-A...

视频监控RTSP转RTMP转HLS解决方案

05-18

视频监控RTSP转RTMP转HLS解决方案是针对这种情况设计的一种技术方法，主要用于实现从RTSP（Real Time Streaming Protocol）协议到RTMP（Real-Time Messaging Protocol）再到HLS（HTTP Live Streaming）的转换，以...

小程序源码视频直播.rar

03-26

"小程序源码视频直播.rar" 提供的是一套用于构建类似斗鱼直播的小程序源代码，这为我们深入理解小程序直播功能的实现提供了宝贵的学习资料。 1. **小程序架构与开发环境** - 小程序基于微信开发者工具进行开发，它...

uniapp [全端兼容] - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、摄像头控制，实时推流、回放、放大缩小画面、视频画面截图、截屏抓拍及播放器解决延迟教程

热门推荐

王佳斌

07-18

1万+

uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，vue，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，无法连接，报错，uniApp对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，对接海康监控设备

支持http,hls,rtmp等-信云自定义播放器

01-24

轻量级的播放器，支持http,hls,rtmp等流，方便大家添加网络上公开的流媒体，做个人的视频APP。 1 支持hls, http, m3u8, rtmp等流 2 点击右上角图标，增加流媒体。 3 增加流媒体项保存功能，下次启动后，这前保存的流依然存在。

基于Rtmp协议的流媒体直播 Demo

06-19

此为示例代码，详细讲解请参考：http://blog.csdn.net/u012604745/article/details/73466204

Qt/C++音视频开发44-本地摄像头推流（支持分辨率/帧率等设置/实时性极高）

Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法

05-05

2083

本地摄像头推流和本地桌面推流类似，无非就是采集的设备源头换成了本地摄像头设备而不是桌面，其他代码完全一样。采集本地摄像头实时视频要注意的是如果设置分辨率和帧率，一定要是设备本身就支持的，如果不支持那就歇菜，比如设备本身最大分辨率到1280x720，你主动设置要采集1080x720分辨率的图像，那是采集不到的，会失败的，如果默认不设置，一般会采用640x480分辨率以及25帧率去采集。

使用微信小程序播放视频直播

haming123的专栏

09-25

5491

介绍如何使用微信小程序的live-player组件进行视频直播的播放

微信小程序 RTMP 音视频通话 ffmpeg_音视频常见问题分析和解决：HLS切片丢帧引起的视频卡顿问题排查...

weixin_39682560的博客

11-20

874

问题背景：前两天看读者留言让再写写音视频问题排查方面的思路，前面大概写几篇：《音视频播放疑难杂症分析和解决：序篇》、《音视频常见问题分析和解决：延时和抖动》、《记一次因为丢帧导致视频播放花屏问题的排查》。今天继续这个系列补充。由于移动互联网的快速发展，现在一些音视频IOT相关的智能设备如IPC、智能猫眼等，有很多移动端浏览器或者微信小程序的播放需求，这种情况我们用了HLS+TS方案。近...

播放hls 和rtmp 流

qq_25239049的博客

01-16

253

http://cyberplayer.bcelive.com/demo/new/index.html <script type="text/javascript" src="player/cyberplayer.js"></script> <div id="playercontainer"></div> player:'' //视频播放弹框 video(address) { this.dialogVideo = tru

直播web html5 hls播放,PC端播放rtmp和hls视频流

weixin_35669712的博客

06-01

1062

本文将会介绍如何在网页端上实现直播的播放。hls播放videojs如果我们要让我们的网页支持在所有浏览器上播放，我们就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。下面是一个播放的例子。你可以将source标签下的src换成你自己的直播流地址。需要注意的是rtmp流的type是rtmp/flv(flv 跟推流的时候FFm...

基于HLS-TS&RTMP-FLV的微信小程序点直播方案

weixin_41422027的博客

04-23

4614

问题背景：视频监控不仅仅要上云，还要支持多端播放，这一块在移动端APP和PC端难度不大，只要能实现一个简单的播放器引擎内核，然后交叉编译为不同端的SDK就可以。随着移动互联网的发展，特别是微信生态的完善。很多客户都在做轻量的微信小程序，所以支持在网页、微信小程序的点直播就很有必要了。在微信小程序上实现视频点直播，好处是不用装APP，随时随地能打开，便于分享，也容易和公众号等其它功能...

RTMP / HLS / RTSP / TS / RTP / AVST

04-08

RTMP（Real-Time Messaging Protocol）是一种用于实时数据传输的协议，通常用于音视频流的传输。它是Adobe公司开发的，常用于流媒体服务和直播平台。 HLS（HTTP Live Streaming）是一种基于HTTP的流媒体传输协议，由苹果公司开发。它将音视频流切分成小的TS（Transport Stream）文件，并通过HTTP协议进行传输。HLS可以适应不同的网络环境，支持自适应码率和实时流切换。 RTSP（Real-Time Streaming Protocol）是一种用于控制实时流媒体的协议，它提供了流媒体的控制、回放和暂停等功能。RTSP常用于IP摄像头、视频监控系统等领域。 TS（Transport Stream）是一种用于传输音视频数据的容器格式，常用于数字电视广播和流媒体传输。TS文件可以包含多个音视频轨道，并支持多路复用和同步。 RTP（Real-time Transport Protocol）是一种用于实时传输音视频数据的协议，它提供了数据分包、传输顺序恢复、时钟同步等功能。RTP常用于音视频通话、视频会议等场景。 AVST（Audio Video Standard Transport）是一种用于音视频传输的标准协议，它基于UDP协议，支持实时传输和多路复用。AVST常用于音视频会议、远程监控等领域。