暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / 打造个人直播间（二）浏览器观看直播流

打造个人直播间（二）浏览器观看直播流

姚毛毛的博客 2020-02-19
785

00 HLS流与浏览器播放

上节我们用nginx-RTMP搭建了流媒体服务器，实现了OBS推流，在PC端使用VLC播放RTMP协议的视频流和实时流的工作。

这节我们的成员来了个新同伴，video.js。使用它可以实现浏览器播放HLS实时流，即播放.m3u8代表的ts切片视频文件。

因此也可以在手机端观看。

其实HLS协议就是把整个流分成一个个小的，基于 HTTP 的文件来下载，每次只下载一些，.m3u8文件就是基于 HLS 协议，存放视频流元数据的文件。

实际上，m3u8 文件只是存放了一些 ts 文件的配置信息和相关路径，当视频播放时，.m3u8 是动态改变的。

我们用video标签或者其他解析方式播放这个视频文件时，首先是会找到对应的 ts 文件来播放，所以一般为了加快速度，.m3u8 放在 web 服务器上，ts 文件放在 cdn 上。

客户端，即浏览器，请求.m3u8文件时，其实是解析 m3u8 的播放列表，再按序请求每一段的 url，获取 ts 数据流。

01 nginx配置

基于上节课的内容，我们丰富下nginx的hls配置。

worker_processes  auto;
events {
    worker_connections  1024;
}


# RTMP configuration
rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4096;


# Define the Application
        application show {
            live on;
            # Turn on HLS
            hls on;
            hls_path /mnt/hls/;
            # disable consuming the stream from nginx as rtmp
            deny play all;
            hls_fragment 3;
            hls_max_fragment 18;
            hls_playlist_length 30;


        }


        # RTMP video on demand for mp4 files
        application vod {
            play /mnt/mp4s;
        }


        # RTMP stream using OBS
        application stream {
            live on;
        }




    }
}


http {
    sendfile off;
    tcp_nopush on;
    aio on;
    directio 512;
    default_type application/octet-stream;


    server {
        listen 8081;
        server_name localhost;


        location / {
          root /mnt/;
          index  index.html;
          try_files $uri $uri/ /index.html;
        }


        # 查看stat
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }


        # stat.xsl 文件要从nginx-rtmp-module源码目录中cp到html目录下面
        location /stat.xsl {
            root /usr/local/src/nginx-rtmp-module/;
        }


        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /mnt;
            # 与上面hls配置的root要对应，不然视频文件就404了
            add_header Cache-Control no-cache;


        }


    }


   server {
    listen 7001;
    server_name localhost;


    location / {
        root /mnt/web/;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
  }
}

02 video.js

创建index.html，内容如下，放入服务器上/mnt目录下。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>video</title>
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
</head>
<body>
<video id="test_video" controls preload="none" width="640" height="480"
      class="video-js  vjs-big-play-centered vjs-fluid "
      data-setup="{}">
    <source src="http://ip:8081/hls/test.m3u8" type='application/vnd.apple.mpegurl' />
</video>
<script type="text/javascript">
    var myPlayer = videojs('test_video', {
      liveui: true
      }
    );
    //var myPlayer = videojs('test_video'); // video 标签中的ID
    myPlayer.ready(function(){
        myPlayer.play(); 
    });
</script>
</body>
</html>

03 测试

使用obs推流，推流地址为：rtmp://ip:1935/show。与nginx配置中的rtmp下的show模块一致。

具体操作可参考本系列第一篇文章。

在obs推流后，可以看到服务器上的/mnt/hls文件夹下产生了test.m3u8文件及test-0.ts、test-1……等分段流媒体文件。

此时客户端，也即使用浏览器，访问http://ip:8081就能看到了。

目前这个方式非常简陋，还有很大的优化空间。

思路是怎么让hls分段播放流媒体文件之间能平滑切换。

目前表现的卡顿，都是在每次更换需要播放的视频如test-0.ts、test-1的时候。

上篇文章：视频直播（一）CentOS 7上安装nginx与nginx-RTMP

数据库
文章转载自姚毛毛的博客，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论