七牛云监控摄像头直播流web端显示

七牛云监控摄像头自己带有一个 qn-rtplayer-web 的npm包。点击跳转官网地址

具体使用方法


import { QNRTPlayer } from "qn-rtplayer-web";/*** 页面加载加载video* */initPlayer() {if (this.videotimer) {clearTimeout(this.videotimer);this.videotimer = null;}this.videotimer = setTimeout(() => {let url ="XXXXXXXXXXXXXXXXXXXXXXXXXXX";this.initQNRTPlayer(url);}, 500);},/*** 播放视频* @url 视频流的地址* @this.$refs.playerRef 播放容器 <div class="video" ref="playerRef"></div>* */initQNRTPlayer(url) {this.qnPlayer = new QNRTPlayer();this.qnPlayer.init({volumn: 0.5, //音量controls: true, //控制条width: "1100px",height: "580px",objectFit: "fill",});/*** 这里是播放视频,但是由于浏览器的限制,不再允许视频自动播放* 必须需要用户有操作,点击或者别的任何动作* 如果播放失败,弹框提示用户点击,点击后再次播放* */ this.qnPlayer.play(url, this.$refs.playerRef).then((result) => {}).catch((err) => {this.$alert("视频加载完成，请允许浏览器播放", "提示", {confirmButtonText: "确定",callback: (action) => {this.qnPlayer.play(url, this.$refs.playerRef);},});});},

如果还有什么不明白的地方，可以参考文档：官方文档在此
以下是关闭

    /*** 释放状态，如果想要再次播放，需要重新调用 init 方法* */releasePlayer() {if (this.qnPlayer) {this.qnPlayer.release();this.qnPlayer = null;}},/*** 页面销毁前* */beforeDestroy() {this.releasePlayer();clearTimeout(this.videotimer);this.videotimer = null;},

七牛云监控摄像头直播流web端显示相关推荐

海康威视设备在Web端显示实时（回放）视频
前言目前做的项目,需要Web端显示实时视频数据.本次项目使用的是海康威视的摄像头进行实时监控. 硬件:海康威视的摄像头软件:video.js.nginx.vlc 参考:https://blog.c ...
使用海康威视设备在Web端显示实时视频
前言目前做的项目,需要Web端显示实时视频数据.本次项目使用的是海康威视的摄像头进行实时监控. 硬件:萤石的摄像头(海康威视旗下的),海康威视的硬盘录像机. 软件:vlc 2.2.6版本. Web端 ...
如何快速接入直播服务七牛云企业直播解决方案来了
在新形势下,直播不再是带货主播们的专属,它的边界已然从互联网跨向了各行各业,成为企业对内交流培训和对外营销的重要手段. 七牛云企业直播解决方案帮助企业快速集成和接入直播服务,覆盖营销.活动.企业培训. ...
利用ros3d.js实现 turtlebot3 在web 端显示并导航
ros3d导航,rosweb, 利用ros3djs实现 turtlebot3 在web 端显示并导航主要是用到 ros3djs.rosbridge_server.tf2_web_republishe ...
zabbix搭建完，web端显示“zabbix服务器端运行中不”
zabbix搭建完,web端显示"zabbix服务器端运行中不"如下图: 但是查看服务器的状态是running 然后查日志/var/log/zabbix/zabbix-serve ...
php七牛云rtmp直播推流,GitHub - jangocheng/FlutterQiniucloudLivePlugin: Flutter 七牛云直播云推流/播放 SDK集成...
flutter_qiniucloud_live_plugin Flutter 七牛云直播云插件,支持IOS.Android客户端 Getting Started 集成七牛云直播云推流.观看等功能功能 ...
利用ros3djs接收pointcloud2在web端显示
因项目需要,要将道路实时的点云流在经过算法处理后在web端显示出来.其中用到点云检测算法,然后发布相应的处理后的点云topic.在web端相应位置创建3Dview接收显示. 主要是用到 ros3djs ...
CAD网页Web端显示开发为什么要以WebGIS的思路来开发？
背景在之前的博文CAD图DWG解析WebGIS可视化技术分析总结中讲解了如何把CAD的DWG格式的图纸Web可视化的方案.博文发布后,受到不少同行们的关注,也有不少咨询一些专业问题,其中大家可能疑惑 ...
WEB端显示三维地形模型
注:正常在WEB上显示三维地形首选Cesium,本文内容仅作为研究,展示文章用DEM制作通用三维地形模型中制作的局部三维地形模型 Cesium是可以很容易的实现在WEB端三维地形的,下面的图是分别是使 ...

七牛云监控摄像头直播流web端显示

七牛云监控摄像头直播流web端显示相关推荐

最新文章

热门文章