VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频

这篇具有很好参考价值的文章主要介绍了VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

EasyPlayer 介绍

简介:集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大;

功能支持:

  • 支持 MP4 播放
  • 支持 m3u8/HLS 播放;
  • 支持 HTTP-FLV/WS-FLV 播放;
  • 支持直播和点播播放;
  • 支持播放器快照截图;
  • 支持点播多清晰度播放;
  • 支持全屏或比例显示;
  • 自动检测 IE 浏览器兼容播放;
  • 支持重连播放;

官网(可在线调试)
NPM文档

实战中使用

VUE 中怎样集成 EasyPlayer

npm install @easydarwin/easyplayer --save

在VUE中使用EasyPlayer还需要配置一些文件才能使用
按需引入编码格式EasyPlayer.wasm文件(作用自行官网查看)
必须引入 EasyPlayer-element.min.js文件

注意:

  • 这两个文件是在public里面,跟index.html同级
  • 引入层级靠前

组件中引入注册:

import EasyPlayer from '@easydarwin/easyplayer'
 components: {
    EasyPlayer
 },

使用

  <easy-player ref="videoplay" :video-url="url"></easy-player>

关于VUE中使用的配置属性

方法名 说明
initPlayer 初始化播放器
destroyPlayer 销毁播放器
switchVideo 播放开关
switchAudio 静音开关
fullscreen 全屏
exitFullscreen 退出全屏
changeStretch 视频拉伸模式
snapshot 保存快照
switchRecording 录像开关

项目实战中使用flv.js实时播放、断流重连、关闭断流开发心得

使用评价:文章来源地址https://www.toymoban.com/news/detail-783890.html

  1. EasyPlayer稳定不卡流
  2. 在vue中使用比较方便
  3. 支持多种视频格式

到了这里,关于VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中使用EasyPlayer播放监控视频HLS,H265、H264

    1.使用npm下载依赖 2.将EasyPlayer-lib.min.js文件、EasyPlayer.wasm文件、libDecoder.wasm文件放置到public下 3.创建components,html代码如下 4.使用props接收数据 5.在父组件中引入,传递props中的数据即可运行即可

    2024年02月03日
    浏览(33)
  • 使用手机摄像头实现视频监控实时播放

    视频监控实时播放的原理与目前较为流行的直播是一致的,所以采用直播的架构实现视频监控实时播放,流程图如下: 目前实时视频流的传输协议有以下几种:RTSP、RTMP、HLS、Http-flv。 安卓APP开发使用HBuilder,而HBuilder内置了LivePusher直播推流控件,该控件使用了RTMP协议,所以

    2023年04月08日
    浏览(37)
  • python调用海康视频汇聚平台API,获得所有摄像头设备编号、实时播放rtsp地址、回放rtsp地址

    1. 需求 海康视频汇聚平台(综合安防管理平台(iSecure Center)V2.1.0)的openAPI的demo均为c++/java代码,官方没有python代码。 需通过汇聚平台获得所有摄像头的设备编号,利用设备编号获得摄像头IP地址和rtsp地址。 2. 思路 根据海康开放平台官方文档《资源中心综合安防管理平台(

    2024年02月10日
    浏览(37)
  • vue使用webrtcstreamer实现rtsp无转码播放实时监控

    因为video标签只能播放特定格式的视频,比如MP4、WebM和Ogg格式,而对于这种视频流文件则需要通过转码实现,而vue-video-player也只能播放特定格式的视频。所以要播放监控的实时视频,除了在浏览器的地址栏直接打开摄像头的地址,还可以通过webrtc-streamer和video标签在页面实现

    2024年02月06日
    浏览(72)
  • vue调用电脑端摄像头实时拍照

    点击照相机拍照,弹出照相机拍照弹窗,点击拍照按钮,截取录像的帧,点击保存,提交数据给后台。 1.html模块 2.css模块 就是一个弹窗,这里就不进行展示了。 3.js模块

    2024年02月12日
    浏览(37)
  • VUE3 播放RTSP实时、回放(NVR录像机)视频流(使用WebRTC)

    1、下载webrtc-streamer,下载的最新window版本 Releases · mpromonet/webrtc-streamer · GitHub  2、解压下载包  3、webrtc-streamer.exe启动服务 (注意:这里可以通过当前文件夹下用cmd命令webrtc-streamer.exe -o这样占用cpu会很少,直接双击exe文件会占用cpu) cmd  webrtc-streamer.exe -o 启动如下图所示,

    2024年04月12日
    浏览(38)
  • 【Python】【OpenCV】Cameo项目(一)实时显示摄像头帧

    1、实时捕获并显示摄像头帧。 2、具备截图、保存视频和退出 三个功能键 。  要求存在文件:manager.py 和 cameo.py   两个类:CaptureManager、WindowManager   CaptureManager负责 摄像头帧的捕获 , 编解码得到实际帧 , 当前帧保存为图片 、 一段时间内的帧保存为视频 这四个核心功能

    2024年02月05日
    浏览(33)
  • vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

    ffmpeg下载 https://ffmpeg.org/download.html 找ffmpeg-release-essentials.zip点击下载,下载完解压 ffmpeg.exe 程序运行 添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功 新建一个app.js文件,同级目录下npm安装 node-rtsp-stream 我是直接写在项目里了,你们可以单独写在外

    2024年04月25日
    浏览(39)
  • vue 项目中使用video实现视频播放效果暂停播放(多个视频)

    根据ref判断是否暂停状态返回 true false vue 控制video视频的播放暂停(多个视频) 安装video.js 在main.js中引用 页面

    2024年02月11日
    浏览(38)
  • H.265视频无插件流媒体播放器EasyPlayer.js播放webrtc断流重连的异常修复

    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直

    2024年02月10日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包