记录一下使用node-media-server的一些过程。本篇主要是记录流媒体在前后端的基本使用，真实开发可能不会用到某些工具，本文章环境为windows。本文章适合初学者。使用到的东西：nodeJs、obs推流工具、node-media-server。

实现思路

下载obs软件，进行视频的录制(推流)（本文选用ev录屏软件）
通过node-media-server开启一个流服务，并在obs中推流到该服务器
通过flv.js配合html5的video标签实现node-media-server中视频源的播放

推流工具，将你需要转换的视频或者视频流推流到流媒体服务器中，可选用ffmpeg/ev录屏软件等。
基于nodeJS的流媒体服务器node-media-server，你可以把他理解为中转站，用于转换流格式或者对视频流做一些操作以及向外推送流地址。
flv.js拉流,意思是从流媒体服务器上拉去视频流，观看者通过拉取流媒体服务器发布的流地址进行观看。你用视频播放器播放就是在拉流。

node-media-server

node-media-server是基于node.Js开发的一个推流服务器。

npm地址：www.npmjs.com/package/nod…

新建一个空白的文件夹，执行npm init -y后，下载node-media-server

npm install node-media-server --save

新建一个入口文件index.js

const NodeMediaServer = require('node-media-server');
 
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};
 
var nms = new NodeMediaServer(config)
nms.run();

然后在命令行中执行

node index.js

访问管理端 localhost:8000/admin 可访问node-media-server的管理端界面

obs 推送rtmp流至流服务

这儿选用ev录屏软件，它可实现obs推流服务，将屏幕内容推送至指定流服务器中。

选择在线直播
填写推流地址（地址为node-media-server中配置的流服务器）

rtmp://localhost:1935/live/STREAM_NAME

点击推流按钮开始推流此时推流就已经成功了。并产生了2种流：一种rtmp、一种flv。前者可以在电脑上播放，后者可以在手机和电脑上播放。 rtmp地址：rtmp://localhost:1935/live/STREAM_NAME

flv地址为： http://localhost:8000/live/STREAM_NAME.flv

flv.js播放视频流

flv.js是来自bilibli的开源项目。它解析FLV文件给原生HTML5 Video标签播放音视频数据，使浏览器在不借助Flash的情况下播放FLV成为可能。

新建一个index.html文件

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>直播</title>
</head>
<body>
   <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
   <video id="videoElement" width="100%" controls></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>
</body>
</html>

vue中使用flv.js

<template>
  <div id="app">
    <test />
    <img alt="Vue logo" src="./assets/logo.png">
    <video id="myvideo" @click="click"></video>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import test from './components/test.vue'
import flv from 'flv.js'

export default {
  name: 'app',
  components: {
    HelloWorld,
    test
  },
  data(){return{
    player : null,
    playing: false,
  }},
  created(){
    if(flv.isSupported()){
      this.player = flv.createPlayer({
        type: 'flv',
        url: '/rap.flv'
      });
    }
  },
  mounted()
  {
    var video = document.querySelector('#myvideo')
    this.player.attachMediaElement(video)
    this.player.load()
  },
  methods:{
    click(){
      if(this.playing)
      {
        this.player.pause()
        this.playing = false;
      }
      else
      {
        this.player.play()
        this.playing = true;
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#p
{
  width:1000px;
}
</style>

参考：

www.cnblogs.com/dreamsqin/p… www.cnblogs.com/llxpbbs/art… www.cnblogs.com/sinx/p/1270…

node搭建流媒体服务+obs推流+前端flv.js播放流媒体

实现思路

node-media-server

obs 推送rtmp流至流服务

flv.js播放视频流

vue中使用flv.js