xiaoxi

搭建简单的 rtmp 直播流服务 (nginx-rtmp + videoJS)
Ⅰ - 方案简要OBS Studio ---> nginx-rtmp ---> videoJSⅡ - ...
扫描右侧二维码阅读全文
22
2018/02

搭建简单的 rtmp 直播流服务 (nginx-rtmp + videoJS)

Ⅰ - 方案简要
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 前端播放
3557204467.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>

96222774.png

设置OBS推流URL为:↓

rmtp://rtmp服务器地址/live/
Last modification:February 22nd, 2018 at 02:12 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment