# jsmpeg-player

**Repository Path**: dataup/jsmpeg-player

## Basic Information

- **Project Name**: jsmpeg-player
- **Description**: 对jsmpeg二次开发并封装为vue组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2022-07-15
- **Last Updated**: 2022-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jsmpeg-player

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


- web播放实时视频流的几种方案对比，详见[此处](https://blog.csdn.net/a843334549/article/details/117319350)
- jsmpeg项目地址：[gitee](https://gitee.com/mirrors/jsmpeg)、[github](https://github.com/phoboslab/jsmpeg)
- [jsmpeg官网地址](https://jsmpeg.com/)


#### 软件架构

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/d60ac09a0d264fcfad1d7aa13b3e6a7f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR5biGUGxhbg==,size_20,color_FFFFFF,t_70,g_se,x_16)


#### 安装教程


#### 使用说明
- 属性：

| 名称 | 类型 | 说明 |
|--|--|--|
| 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官方文档](https://github.com/phoboslab/jsmpeg#usage)
| onSourceConnected | 无 | 当websocket连接上服务端时触发
| onSourceStreamInterrupt| 无  | 当websocket超过一定时间没有收到流时触发
| onSourceStreamContinue| 无  | 当onSourceStreamInterrupt触发后websocket第一次接收到流时触发
| onSourceClosed| 无  | 当websocket关闭后触发
| onResolutionDecode| width,height  | 当获取到视频分辨率后触发

- 演示：

无信号时：

![在这里插入图片描述](https://img-blog.csdnimg.cn/cae1fbb2d8c74193b834651a767dad02.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR5biGUGxhbg==,size_20,color_FFFFFF,t_70,g_se,x_16)

正常播放：

![在这里插入图片描述](https://img-blog.csdnimg.cn/fe266d7592754a1fa174419694e4fd95.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR5biGUGxhbg==,size_20,color_FFFFFF,t_70,g_se,x_16)

旋转：

![在这里插入图片描述](https://img-blog.csdnimg.cn/692e974957394a79a76f336ee5e82c56.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR5biGUGxhbg==,size_20,color_FFFFFF,t_70,g_se,x_16)

接流中断：

![在这里插入图片描述](https://img-blog.csdnimg.cn/0c5a6646236440f4a863654b09f28389.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR5biGUGxhbg==,size_20,color_FFFFFF,t_70,g_se,x_16)

截图测试：

![在这里插入图片描述](https://img-blog.csdnimg.cn/cc9ad53dcd3b4dd8bd69dd2b9c2c247f.gif)

录制测试：

![在这里插入图片描述](https://img-blog.csdnimg.cn/d95d0987763546fbb4a5a4107b919f50.gif)

#### 参与贡献