https://github.com/jack-hoo/LiveRoomDemo_Client

自己动手打造一个直播间（视频直播、聊天室、弹幕、多端适配）
https://github.com/jack-hoo/LiveRoomDemo_Client

Last synced: 3 months ago
JSON representation

自己动手打造一个直播间（视频直播、聊天室、弹幕、多端适配）

• Host: GitHub
• URL: https://github.com/jack-hoo/LiveRoomDemo_Client
• Owner: jack-hoo
• Created: 2017-06-20T14:21:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-05-24T01:57:32.000Z (over 4 years ago)
• Last Synced: 2024-08-03T09:10:35.372Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 8.56 MB
• Stars: 386
• Watchers: 24
• Forks: 230
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - LiveRoomDemo_Client - hoo | 377 | (JavaScript)
• awesome-hacking-lists - jack-hoo/LiveRoomDemo_Client - 自己动手打造一个直播间（视频直播、聊天室、弹幕、多端适配） (JavaScript)

README

        
# LiveRoomDemo(客户端)

> 这是一个用Vue.js写的一个直播间Demo,主要实现了以下功能

* 拉取服务器上的直播流(移动端拉取hls流、电脑端拉取rtmp流)

* 基于websocket的直播聊天室

* 直播间弹幕

* 直播间的实时数据统计    

* [演示地址(电脑端与移动端效果不同哦)](http://139.199.82.213:8080/LiveDemo/live_room)

* [博客地址](https://segmentfault.com/a/1190000009892006)

## 技术栈  

- VUE全家桶

- UI层vonic

- axios

- 视频播放器: vue-video-player + videojs-contrib-hls

- websocket客户端: vue-stomp

- 弹幕插件: vue-barrage

- 打包工具:webpack

## 运行截图

### 手机端

![手机端](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/mb.gif)    

![户外直播](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/huwai.png)    

![lol](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/lol2.png)    

![lol2](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/lol.png)    

>移动端弹幕    

![mbdamu](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/mbdanmu.png)    

### 电脑端 

![全局](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/quanju.jpg)   

> 弹幕效果    

![弹幕](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/danmu.png)    

![户外直播](https://github.com/jack-hoo/LiveRoomDemo_Client/blob/master/static/screenshot/mzdemo.jpg)

## 安装运行(需要配合[服务端](https://github.com/jack-hoo/LiveRoomDemo_Server))

- quick

``` bash

git clone https://github.com/jack-hoo/LiveRoomDemo_Client.git

cd LiveRoomDemo_Client

npm install -g yarn

yarn

```

- development

```bash

npm run dev

```

- build

```bash

npm run build

```