jsmpeg-player

介绍

对jsmpeg二次开发并封装为vue组件

web播放实时视频流的几种方案对比，详见此处
jsmpeg项目地址：gitee、github
jsmpeg官网地址

软件架构

单链路即：rtsp流=>ffmpeg转码=>http server接收=>websocket server转发=>websocket client (图中少画了一个Http server，懒得改了.....)

在这里插入图片描述

安装教程

使用说明

属性：

名称	类型	说明
url	string	视频流地址
title	string	播放器标题
options	object	jsmpeg原生选项，直接透传，详见下表
closeable	boolean	是否可关闭（单击关闭按钮，仅抛出事件）
in-background	boolean	是否处于后台，如el-tabs的切换，路由的切换等
show-duration	boolean	是否现实持续播放时间
default-mute	boolean	默认静音
with-toolbar	boolean	是否需要工具栏

名称	类型	说明
canvas	HTMLCanvasElement	用于视频渲染的HTML Canvas元素。如果没有给出，渲染器将创建自己的Canvas元素。
loop	boolean	是否循环播放视频(仅静态文件)，默认=true
autoplay	boolean	是否立即开始播放（仅限静态文件），默认=false
audio	boolean	是否解码音频，默认=true
video	boolean	是否解码视频，默认=true
poster	string	预览图像的URL，用来在视频播放之前作为海报显示。
pauseWhenHidden	boolean	当页面处于非活动状态时是否暂停播放，默认=true（请注意，浏览器通常会在非活动选项卡中限制 JS）
disableGl	boolean	是否禁用WebGL，始终使用Canvas2D渲染器，默认=false
disableWebAssembly	boolean	是否禁用WebAssembly并始终使用JavaScript解码器，默认=false(不建议设置为true)
preserveDrawingBuffer	boolean	WebGL上下文是否创建必要的“截图”
progressive	boolean	是否以块的形式加载数据(仅静态文件)。当启用时，回放可以在完整加载源之前开始。
throttled	boolean	当不需要回放时是否推迟加载块。默认=progressive
chunkSize	number	使用时，以字节为单位加载的块大小。默认(1 mb)1024*1024
decodeFirstFrame	boolean	是否解码并显示视频的第一帧，一般用于设置画布大小以及使用初始帧作为"poster"图像。当使用自动播放或流媒体资源时，此参数不受影响。默认true
maxAudioLag	number	流媒体时，以秒为单位的最大排队音频长度（可以理解为能接受的最大音画不同步时间）。
videoBufferSize	number	流媒体时，视频解码缓冲区的字节大小。默认的512 * 1024 (512 kb)。对于非常高的比特率，您可能需要增加此值。
audioBufferSize	number	流媒体时，音频解码缓冲区的字节大小。默认的128 * 1024 (128 kb)。对于非常高的比特率，您可能需要增加此值。

事件：

名称	参数	说明
包含所有jsmpeg原生事件		具体看jsmpeg官方文档
onSourceConnected	无	当websocket连接上服务端时触发
onSourceStreamInterrupt	无	当websocket超过一定时间没有收到流时触发
onSourceStreamContinue	无	当onSourceStreamInterrupt触发后websocket第一次接收到流时触发
onSourceClosed	无	当websocket关闭后触发
onResolutionDecode	width,height	当获取到视频分辨率后触发

演示：

无信号时：

在这里插入图片描述

正常播放：

在这里插入图片描述

旋转：

在这里插入图片描述

接流中断：

在这里插入图片描述

截图测试：

在这里插入图片描述

录制测试：

在这里插入图片描述

Caner/jsmpeg-player

jsmpeg-player

介绍

软件架构

安装教程

使用说明

参与贡献

简介

发行版

贡献者 (2)

近期动态

Caner/jsmpeg-player .gitee-modal { width: 500px !important; }

jsmpeg-player

介绍

软件架构

安装教程

使用说明

参与贡献

简介

发行版

贡献者 (2)

近期动态

搜索帮助

Caner/jsmpeg-player