llxpbbs

实现思路

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

node-media-server开启服务

  1. 新建一个空白的文件夹,执行npm init, 根据提示输入相关信息后,下载node-media-server
npm install node-media-server --save
  1. 新建一个入口文件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();

  

  1. 然后在命令行中执行
node index.js

  

如果看到下面的提示,表示我们已经成功开启node-media-server服务了

 

flv.js

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

  • 新建一个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>

  

分类:

技术点:

相关文章: