Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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

Last synced: about 1 month 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 (4 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

```