Ⅰ - 方案简要

OBS Studio ---> nginx-rtmp ---> videoJS

Ⅱ - nginx-rtmp模块

GitHub - arut/nginx-rtmp-module: NGINX-based Media Streaming Server
模块的编译安装在上面描述的很清楚 这里不再赘述

nginx.conf配置：加入一个rtmp服务器

rtmp  
{  
  server  
  {  
     listen 1935;  
     chunk_size 4000;  
     application live  
     {  
        live on;
        allow play all;  
     }  
   }  
}  

Ⅲ - videoJS前端播放

TIM截图20170926175516.png

因为videoJS 6.X版本停止对Flash的支持 这里直接调用videoJS 5.20版本的CDN
插一句 果然Flash还真是墙倒众人推啊

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Video.js | HTML5 Video Player</title>
    <!-- <link href="video-js-6.2.0/video-js.css" rel="stylesheet">
    <script src="video-js-6.2.0/videojs-ie8.min.js"></script> -->

    <link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script>

</head>
<body>

    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <!-- <source src="1.mp4" type="video/mp4"> -->
    <source src="rtmp://rtmp服务器地址/live/" type="rtmp/flv">

    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>

    <script src="http://vjs.zencdn.net/5.20.1/video.js"></script>

</body>
</html>

Ⅳ - OBS Studio推流

TIM截图20170926175310.png

设置OBS推流URL为 rmtp://rtmp服务器地址/live/