# ETOAK_直播APP

**Repository Path**: Janson0/etoak-live-app

## Basic Information

- **Project Name**: ETOAK_直播APP
- **Description**: uniapp + SpringBoot直播app
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-10-07
- **Last Updated**: 2023-10-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ETOAK_直播APP

#### 介绍
uniapp + SpringBoot直播app

#### 项目截图（持续更新）
<img src="imgs/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230816162023.jpg" alt="微信图片_20230816162023" style="zoom:15%;margin-left:0" /><img src="imgs/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230816162019.jpg" alt="微信图片_20230816162019" style="zoom:15%;margin-left:0" /><img src="imgs/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230816162014.jpg" alt="微信图片_20230816162014" style="zoom:15%;margin-left：0" /><img src="imgs/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230816162007.jpg" alt="微信图片_20230816162007" style="zoom:15%;margin-left:0" /><img src="imgs/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230816162002-169217440978211.jpg" alt="微信图片_20230816162002" style="zoom:15%;margin-left:0;" /><img src="imgs/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230816161856-169217444232913.jpg" alt="微信图片_20230816161856" style="zoom:15%;margin-left:0" />


#### 安装教程

1. 安装NodeMediaServer v3推流拉流服务器

   1. npm安装（推荐）

      ```js
      1.创建server文件夹
      
      2.进入server文件夹下执行
        npm install node-media-server
      
      3.创建app.js文件 将下面代码复制到文件中
        const NodeMediaServer = require('node-media-server');
        const config = {
            rtmp: {
              port: 1935,
              chunk_size: 60000,
              gop_cache: true,
              ping: 30,
              ping_timeout: 60
            },
            http: {
              port: 8000,
              allow_origin: '*'
            }
          };
      
        var nms = new NodeMediaServer(config)
        nms.run();
      
      4.执行下面命令启动服务器（也可设置脚本启动）
        node app.js
      ```

      

2. 安装`Hbuilder X`
3. 导入数据库文件`SpringBoot`项目中

#### 使用说明

1. **播放直播流**

   1.  RTMP格式

       ```
       rtmp://localhost/live/STREAM_NAME
       ```
   2.  http-flv格式

       ```
       http://localhost:8000/live/STREAM_NAME.flv
       ```
   3.  使用flv.js 播放http-flv格式流

       ```js
       <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
       <video id="videoElement"></video>
       <script>
           if (flvjs.isSupported()) {
               var videoElement = document.getElementById('videoElement');
               var flvPlayer = flvjs.createPlayer({
                   type: 'flv',
                   url: 'http://localhost:8000/live/STREAM_NAME.flv'
               });
               flvPlayer.attachMediaElement(videoElement);
               flvPlayer.load();
               flvPlayer.play();
           }
       </script>
       ```
   4.  使用flv.js 播放websocket-flv 格式流

       ```js
       <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
       <video id="videoElement"></video>
       <script>
           if (flvjs.isSupported()) {
               var videoElement = document.getElementById('videoElement');
               var flvPlayer = flvjs.createPlayer({
                   type: 'flv',
                   url: 'ws://localhost:8000/live/STREAM_NAME.flv'
               });
               flvPlayer.attachMediaElement(videoElement);
               flvPlayer.load();
               flvPlayer.play();
           }
       </script>
       ```

       

2. **直播录制为MP4文件**`(待开发)`

   ```
   const NodeMediaServer = require('node-media-server');
   
   const config = {
     rtmp: {
       port: 1935,
       chunk_size: 60000,
       gop_cache: true,
       ping: 30,
       ping_timeout: 60
     },
     http: {
       port: 8000,
       mediaroot: './media',
       allow_origin: '*'
     },
     trans: {
       ffmpeg: '/usr/local/bin/ffmpeg',
       tasks: [
         {
           app: 'live',
           mp4: true,
           mp4Flags: '[movflags=frag_keyframe+empty_moov]',
         }
       ]
     }
   };
   
   var nms = new NodeMediaServer(config)
   nms.run();
   ```

3. xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)