obs+node-media-server+flv.js实现录播和直播

实现思路

下载obs软件，进行视频的录制
经过node-media-server开启一个服务，在obs中推流到该服务器
经过flv.js配合html5的video标签实现node-media-server中视频源的播放

开始实现

obs的使用

obs的下载请移步官网，有windows, mac, linux 三个平台的版本可供下载我这里使用的是mac版，其余版本的使用应该也差很少css

首先须要新建一个场景

这里有不少种场景可使用，我用显示捕获来示范一下吧...

能够对场景进行命名，我直接使用默认的名字，点击肯定

再次点击肯定，这个时候场景就建立成功了，拖动场景能够将场景进行缩放，缩放到遮住黑色的背景就行了 html

推流视频的本质实际上是一张张截下来的图片，咱们须要将这一张张图片放到一个地方，而后前端就能够从这个地方读取，从而展现出来，所以在这以前咱们须要开启一个服务，做为前端获取视频的源地址

node-media-server开启服务

新建一个空白的文件夹，执行npm init, 根据提示输入相关信息后，下载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
复制代码

若是看到下面的提示，表示咱们已经成功开启node-media-server服务了前端

flv.js

flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据，使浏览器在不借助Flash的状况下播放FLV成为可能。具体的介绍请自行google哈，继续刚才的项目html5

新建一个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/hello.flv'
           });
           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
   </script>
</body>
</html>

复制代码

这里遇到了一个坑，多是mac的缘由，默认视频是没有自动播放的，并且一开始video标签我也没有加上controls，因此网页上一直显示的是一张静态的图片，偶然才发现原来是视频处于暂停状态 =_=!!node

能够进行录播啦~

点击obs中的设置，进入设置页面，点击流，若是是在本地直播的话，流类型选择自定义流媒体服务器，url填写如图所示，流名称填写index.html设置的名字，本项目是hello

咱们也能够经过bilibili等直播平台进行播放，这里就填写你bilibili上的直播连接和名称linux

点击obs的开始推流按钮

这时双击在浏览器打开index.html就能够看到直播啦，记得点击视频下方的开始按钮~npm