정보실

웹학교

정보실

기타 오픈 소스 Video.js로 라이브 비디오 스트리밍

본문

Video.js는 광범위한 장치에 라이브 비디오 스트림을 제공하는 널리 사용되는 프로토콜입니다.


작년에 저는 리눅스로 비디오 스트리밍 서버를 만드는 것에 대해 썼습니다. 이 프로젝트는 RTMP (Real-Time Messaging Protocol), Nginx 웹 서버, OBS (Open Broadcast Studio) 및 VLC 미디어 플레이어를 사용합니다.


VLC를 사용하여 비디오 스트림을 재생했습니다. 소규모 로컬 배포에는 적합하지만 대규모로는 실용적이지 않습니다. 먼저 시청자가 VLC를 사용해야 하고 RTMP 스트림이 일관되지 않은 재생을 제공 할 수 있습니다. Video.js가 등장합니다! Video.js는 사용자 정의 HTML5 비디오 플레이어를 만들기 위한 오픈 소스 JavaScript 프레임 워크입니다. Video.js는 엄청나게 강력하며, 공개적인 성격과 시작 및 실행의 용이성 때문에 매우 인기 있는 웹 사이트에서 많이 사용됩니다.


https://opensource.com/article/20/2/video-streaming-tools 


Video.js 시작하기 


이 프로젝트는 작년에 쓴 비디오 스트리밍 프로젝트를 기반으로 합니다. 해당 프로젝트는 RTMP 스트림을 제공하도록 설정되었으므로 Video.js를 사용하려면 해당 Nginx 구성을 약간 조정해야 합니다. HTTP 라이브 스트리밍 (HLS)은 Apple에서 개발 한 널리 사용되는 프로토콜로, 여러 장치에 스트림을 더 잘 제공합니다. HLS는 스트림을 가져 와서 청크로 나누고 전문 재생 목록을 통해 제공합니다. 이를 통해 더 많은 장치에서 재생할 수 있는 내결함성이 있는 스트림이 가능합니다.


먼저, HLS 스트림을 저장할 디렉토리를 생성하고 Nginx에 쓸 수 있는 권한을 부여하십시오 :


mkdir /mnt/hls
chown www:www /mnt/hls 


그런 다음 텍스트 편집기를 시작하고 Nginx.conf 파일을 열고 응용 프로그램 라이브 섹션 아래에 다음을 추가하십시오.


       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에는 매우 기본적인 웹 플레이어를 만드는 데 사용할 수 있는 훌륭한 소개 템플릿이 있습니다. 해당 템플릿의 중요한 부분을 세분화하고 새로운 HTML 플레이어가 스트림을 사용하는 데 필요한 부분을 삽입합니다.



콘텐츠 전달 네트워크 (CDN)의 Video.js 라이브러리에 헤드 링크가 있습니다. 원하는 경우 Video.js를 웹 서버에 로컬로 다운로드하여 저장하도록 선택할 수도 있습니다.


<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> 


이제 플레이어의 진짜 고기에. 본문 섹션은 비디오 플레이어가 표시되는 방법의 매개 변수를 설정합니다. 비디오 요소 내에서 플레이어의 속성을 정의해야 합니다. 얼마나 큰 걸 원하십니까? 포스터 (예 : 썸네일)를 갖기를 원하십니까? 특별한 플레이어 컨트롤이 필요합니까? 이 예제는 Beastie (BSD Demon)와 Tux (Linux penguin)를 특징으로 하는 적절한 (나에게) 썸네일을 가진 간단한 600x600 픽셀 플레이어를 정의합니다.


<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에 쓰기 권한이 있는지 확인하십시오.


chown -R www:www /mnt/recordings 


페이지 정보

조회 29회 ]  작성일20-06-25 14:49

웹학교