开源视频流服务_使用开源Video.js进行实时视频流

最新推荐文章于 2024-08-28 08:55:21 发布

cumj63710

最新推荐文章于 2024-08-28 08:55:21 发布

阅读量1.9k

点赞数

文章标签： java linux python 大数据 nginx

原文链接：https://opensource.com/article/20/2/video-streaming-tools

版权

本文介绍了如何使用开源JavaScript框架Video.js创建自定义HTML5视频播放器，以实现更稳定且用户友好的实时视频流服务。通过配置Nginx服务器和设置HLS流，结合Video.js的基本模板，可以搭建一个基础的Web播放器，同时提供了保存流的副本的方法。

摘要由CSDN通过智能技术生成

开源视频流服务

去年，我写过有关使用Linux创建视频流服务器的文章。该项目使用实时消息协议（RTMP），Nginx Web服务器，Open Broadcast Studio（OBS）和VLC媒体播放器。

我使用VLC播放我们的视频流，这对于小型本地部署来说可能很好，但在大规模情况下并不实用。首先，您的观众必须使用VLC，而RTMP流会提供不一致的播放。这就是Video.js发挥作用的地方！ Video.js是一个开放源代码JavaScript框架，用于创建自定义HTML5视频播放器。 Video.js非常强大，许多受欢迎的网站都在使用它-很大程度上是由于它的开放性以及安装和运行的便捷性。

Video.js入门

HLS ）是Apple开发的一种广泛使用的协议，它将为多种设备更好地为您的视频流提供服务。 HLS会将您的视频流分成几部分，并通过专门的播放列表进行播放。这允许可以在更多设备上播放的更具容错性的流。

首先，创建一个目录，该目录将容纳HLS流并授予Nginx写入权限：


   
   
    
     
     
     mkdir 
     
     / mnt 
     
     / hls
     
     


     
     chown www:www 
     
     / mnt 
     
     / hls

接下来，启动您的文本编辑器，打开Nginx.conf文件，并在application live部分下添加以下内容：


   
   
    
    
     
            application live {
     
     

            live on;
     
     

            # Turn on HLS
     
     

            hls on;
     
     

            hls_path /mnt/hls/;
     
     

            hls_fragment 3;
     
     

            hls_playlist_length 60;
     
     

            # disable consuming the stream from nginx as rtmp
     
     

            deny play all;
     
     

}

注意HLS片段和播放列表长度设置。您可能需要稍后调整它们，具体取决于您的流媒体需求，但这是一个很好的基线。接下来，我们需要确保Nginx能够侦听来自播放器的请求，并了解如何将其呈现给用户。因此，我们要在nginx.conf文件的底部添加一个新部分。


   
   
    
    
     
     server {
     
     

        listen 8080;
     
     


     
     

        location / {
     
     

            # Disable cache
     
     

            add_header 'Cache-Control' 'no-cache';
     
     


     
     

            # CORS setup
     
     

            add_header 'Access-Control-Allow-Origin' '*' always;
     
     

            add_header 'Access-Control-Expose-Headers' 'Content-Length';
     
     


     
     

            # allow CORS preflight requests
     
     

            if ($request_method = 'OPTIONS') {
     
     

                add_header 'Access-Control-Allow-Origin' '*';
     
     

                add_header 'Access-Control-Max-Age' 1728000;
     
     

                add_header 'Content-Type' 'text/plain charset=UTF-8';
     
     

                add_header 'Content-Length' 0;
     
     

                return 204;
     
     

            }
     
     


     
     

            types {
     
     

                application/dash+xml mpd;
     
     

                application/vnd.apple.mpegurl m3u8;
     
     

                video/mp2t ts;
     
     

            }
     
     


     
     

            root /mnt/;
     
     

        }
     
     

    }

访问Video.js的入门页面，下载最新版本并查看发行说明。同样在该页面上，Video.js有一个很好的入门模板，您可以用来创建一个非常基本的Web播放器。我将分解该模板的重要部分，并插入获取新HTML播放器以使用流所需的片段。

头链接来自内容分发网络（CDN）的Video.js库。如果需要，您还可以选择将Video.js下载并本地存储在Web服务器上。


   
   
    
    
     
     <head>
     
     

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


     
     

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
     
     

  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
     
     

</head>

现在到了玩家的真正肉食。主体部分设置视频播放器显示方式的参数。在video元素内，您需要定义播放器的属性。您想要多大？您是否要有海报（即缩略图）？是否需要任何特殊的播放器控件？本示例定义了一个简单的600x600像素播放器，带有一个适合我的缩略图（对我来说），其中包含Beastie（BSD恶魔）和Tux（Linux企鹅）。


   
   
    
    
     
     <body>
     
     

  <video
     
     

    id="my-video"
     
     

    class="video-js"
     
     

    controls
     
     

    preload="auto"
     
     

    width="600"
     
     

    height="600"
     
     

    poster="BEASTIE-TUX.jpg"
     
     

    data-setup="{}"
     
     

  >

既然您已经设定了播放器的外观，就需要告诉播放器。 Video.js可以处理大量不同的格式，包括HLS流。


   
   
    
    
     
         <source src="http://MY-WEB-SERVER:8080/hls/STREAM-KEY.m3u8" type="application/x-mpegURL" />
     
     

    <p class="vjs-no-js">
     
     

      To view this video please enable JavaScript, and consider upgrading to a
     
     

      web browser that
     
     

      <a href="https://videojs.com/html5-video-support/" target="_blank"
     
     

        >supports HTML5 video</a
     
     

      >
     
     

    </p>
     
     

  </video>

记录你的流

保留流的副本非常容易。只需在nginx.conf文件的应用程序直播部分底部添加以下内容：


   
   
    
    
     
     # Enable stream recording
     
     

record all;
     
     

record_path /mnt/recordings/;
     
     

record_unique on;

确保record_path存在并且Nginx有权对其进行写入：