zoukankan      html  css  js  c++  java
  • nginx实现最简单的直播

    nginx实现最简单的直播

     

     

    关于直播技术的原理,这里我就不啰嗦了,可以参考文章https://blog.csdn.net/leifukes/article/details/73244012

    我的环境

    [root@controller ~]# cat /etc/redhat-release

    CentOS Linux release 7.2.1511 (Core)

    [root@controller ~]# getenforce

    Disabled

    [root@controller ~]# systemctl stop firewalld

    [root@controller ~]# hostname -I

    10.0.0.11

    1:git拉取nginx-rtmp插件

    mkdir -p /server/tools

    cd /server/tools

    git clone https://github.com/arut/nginx-rtmp-module.git

    2:编译安装nginx

    useradd -s /sbin/nologin -M nginx

    wget http://nginx.org/download/nginx-1.14.0.tar.gz

    tar xf nginx-1.14.0.tar.gz

    ls

    cd nginx-1.14.0/

    yum install pcre-devel -y

    yum install openssl-devel.x86_64 -y

    ./configure --user=nginx --group=nginx --with-http_ssl_module --prefix=/application/nginx --add-module=../nginx-rtmp-module

    make

    make install

    3:配置启动nginx

    cd /application/nginx/conf/

    grep -Ev '^$|#' nginx.conf.default >nginx.conf

    vim nginx.conf

    worker_processes 1;

    events {

    worker_connections 1024;

    }

    rtmp {

    server {

    listen 1935;

    chunk_size 4096;

    application live {

         live on;

    hls on;

    hls_path /application/nginx/html/live;

    hls_fragment 5s;

    }

    }

    }

    http {

    include mime.types;

    default_type application/octet-stream;

    sendfile on;

    keepalive_timeout 65;

    server {

    listen 80;

    server_name localhost;

    location /live {

    types {

    application/vnd.apple.mpegurl m3u8;

    video/mp2t ts;

    }

    alias /application/nginx/html/live;

    expires -1;

    add_header Cache-Control no-cache;

    }

    location / {

    root html;

    index index.html index.htm;

    }

    }

    }

    #测试nginx语法

    ../sbin/nginx –t

    启动nginx

    ../sbin/nginx

    4:使用EV录屏实现推流

    串流地址: rtmp://10.0.0.11:1935/live

    地址密钥随便填,我这里是test

    如果你的地址密钥填写和一样的话,

    开启直播之后,测试能否下载test.m3u8文件

    http://10.0.0.11/live/test.m3u8

    如果能够成功下载,恭喜你离成功很近了!

    5:配置站点首页

    vi /application/nginx/html/index.html

    <!DOCTYPE html>

    <html lang="zh-CN">

    <head>

    <meta charset="UTF-8">

    <title>前端播放m3u8格式视频</title>

    <link rel="stylesheet" href="http://vjs.zencdn.net/5.5.3/video-js.css">

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.js"></script>

    </head>

    <body>

    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>

    <source id="source" src="http://10.0.0.11/live/test.m3u8" type="application/x-mpegURL">

    </video>

    </body>

    <script>

    // videojs 简单使用

    var myVideo = videojs('myVideo',{

    bigPlayButton : true,

    textTrackDisplay : false,

    posterImage: false,

    errorDisplay : false,

    })

    myVideo.play() // 视频播放

    myVideo.pause() // 视频暂停

    </script>

    </html>

    打开浏览器测试:

    http://10.0.0.11/

    至此成功!!!

  • 相关阅读:
    Caffe2(1)----Ubantu14.04安装
    ROS知识(16)----如何编译时自动链接同一个工作空间的其他包的头文件(包含message,srv,action自动生成的头文件)
    GIT(4)----免输入账号和密码方法
    faceNet编译问题
    Python知识(7)--最小二乘求解
    BeanShell用法汇总(部分摘抄至网络)
    web_custom_request和web_submit_data
    创建一个数组,然后随机输出一个数组的值
    lr常见问题
    通过ctrl+r快速启动程序
  • 原文地址:https://www.cnblogs.com/gaoyuechen/p/11149554.html
Copyright © 2011-2022 走看看