# vue直播的推拉流

**Repository Path**: yufeidaima/live

## Basic Information

- **Project Name**: vue直播的推拉流
- **Description**: 开发使用vue开发，推拉使用的是rtmp-streamer，拉流使用的是videoPlayer，之间使用nginx转发。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/adonggege
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2021-06-08
- **Last Updated**: 2021-06-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue直播的推拉流

#### 介绍
开发使用vue开发，推拉使用的是rtmp-streamer，拉流使用的是videoPlayer，之间使用nginx转发。

不想麻烦的话 也可以自行百度一下 obs nginx rtmp 这个关键字。使用obs软件推，使用rtmp转，也可以使用VLC media player软件接收。

#### 软件架构
vue


#### 安装教程
 
需要安装 ##### nginx 1.7.11.3 Gryphon
自行百度安装教程  注意一定要这个Gryphon版本，不然就需要安装 nginx-rtmp-module
关于nginx的配置文件我也已经上传，解压之后 把配置文件替换一下就可以了。
#### 注意 我的是在window10里面操作的，所以可能nginx的配置文件有点区别

我只上传了主要的代码文件，代码需要的文件依赖
#### 推流
`npm install rtmp-streamer --save-dev`
#### 拉流

```
npm install vue-video-player -S
npm install videojs-flash --save
```


可以看看 https://www.jianshu.com/p/9f468038be09

1.安装vue-video-player插件一定要用npm安装，不可使用cnpm安装，否则会报:“The "flash" tech is undefined. Skipped browser support check for that tech”
2.如果需要播放 RTMP 流，需要安装 videojs-flash 插件
3.如果两个流都需要播放，flash 插件需要安装到 hls 插件之前
4.如果需要播放 HLS 流，需要安装 videojs-contrib-hls 插件，非原生支持的浏览器，直播服务端需要开启 CORS
5.如果你需要在谷歌浏览器播放，需要将谷歌浏览器的flash设置改成允许使用flash插件播放
上面的话来自   https://blog.csdn.net/qq_39844855/article/details/88074567



#### 使用说明

一定要注意流的信息
#### 拉流
![输入图片说明](https://images.gitee.com/uploads/images/2020/0922/145502_0f7b344f_4859063.png "屏幕截图.png")
#### 推流
![输入图片说明](https://images.gitee.com/uploads/images/2020/0922/145528_165aeda3_4859063.png "屏幕截图.png")
#### nginx配置
![输入图片说明](https://images.gitee.com/uploads/images/2020/0922/145559_5598cb6a_4859063.png "屏幕截图.png")

#### 参与贡献

adongge

#### 目前还是很不智能化，有空再下一步