前端快速实现直播业务附带app配置（图文细节）本文将想大家展示使用使用 node-media-server 及flv.j

导读本文将想大家展示使用使用 node-media-server 及flv.js快速的在项目当中实现视频直播的功能。本文的功能需要你的电脑具有node 的环境。适合小白进行体验学习。

服务端 node-media-server

新建一个文件夹 mediasrv

cmd进入到目录中

先快速初始化项目
npm init -y   
安装 node-media-server
npm install node-media-server

在根目录新建一个文件 app.js 复制以下代码

const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935, // rtmp端口号
    chunk_size: 60000,  // 单个拆分媒体流的包的大小
    gop_cache: true,
    ping: 30,
    ping_timeout: 60 
  },
  http: {
    port: 8000,  //  http端口号
    allow_origin: '*'  // 允许跨域
  }
};

var nms = new NodeMediaServer(config)
nms.run();

然后在终端运行项目

node app.js

运行起来的效果如下

在使用期间一定要保持服务端处于运行状态（终端的窗口不要关闭，或者使用其他的进程管理工具运行有也可以）

获取电脑在局域网的ip地址

为了后面方便我们成app把视频推流到服务端来需要通过系统自带的“CMD”查看局域网内所使用的IP地址

首先需要同时按住键盘的“Win”+“R”键，打开运行窗口，然后输入“CMD”，并点击确定。

打开CMD命令窗口后，输入“ipconfig /all”，然后回车查看本机的的IP地址,这一步的目的是查看局域网所用的网段，比如小编所用的网段就是“

客户端-使用flvjs来实现播放(拉流)

新建一个html文件

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>直播</title>
</head>
<body>
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/flv.js/1.6.2/flv.min.js" type="application/javascript"></script>
  <video id="videoElement" width="100%" controls></video>
  <script>
       if (flvjs.isSupported()) {
           var videoElement = document.getElementById('videoElement');
           var flvPlayer = flvjs.createPlayer({
               type: 'flv',
               // qfedu 是推流的时候的路径名称
               // dixon 是stream 自定义的名称  
               url: 'http://localhost:8000/qfedu/dixon.flv'
           });
           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
  </script>
</body>
</html>

好了！到了这一步我们的服务端和客户端就已经准备好了，接下来需要一个视频源，这个视频源推流(一遍拍摄一边把视频拆分成一个个的包) 到我们的直播服务器，然后客户通过向服务器拉流(主动的想服务器拉取最新的视频包) ，这样我们的客户端就上就可以呈现我们的直播内容了。大家根据自己的手机平台来下载对应的免费的推流app。

android : v导播录屏（下载链接 hmlive.cn/?page_id=16…）

ios: Airmix solo （ appstore直接搜索“Airmix” apps.apple.com/cn/app/id10… ）