README.md · Caner/jsmpeg-player

# 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)

#### 安装教程

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

- 事件：

| 名称 | 参数 | 说明 |
|--|--|--|
| 包含所有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)

#### 参与贡献

Caner/jsmpeg-player

简介

发行版

贡献者

近期动态

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

简介

发行版

贡献者

近期动态

搜索帮助

Caner/jsmpeg-player