Flask HLS streaming / HTML5 video 재생 (vue/nuxt)

베이비캠 스트리밍 구조

Wyze cam V3 → rtsp 출력 (Wyzebridge) → 서버에서 수취 및 HLS 송출 (Flask) → 웹서버 (Nuxt)의 구조로 되어있음.

Flask에서 HLS 송출

HLS 송출은 별게 없는데, 단순히 .ts 영상파일을 파일로 전송하면 된다. 다만 '실시간' 송출이란 것이 해결하기 어려울 것이라 생각했는데, RTSP 스트림을 VLC로 수취하면서 HLS로 저장하면 .m3u8 파일에 재생목록을 작성해준다. 이 재생목록과 각 hls 파일 (.ts 확장자)를 같은 flask api 단말에서 송출할 수 있으면 된다.

@ns.route("/stream/<string:file_name>")
class hls_streamer(Resource):
    @staticmethod
    @jwt_required
    def get(*args, **kwargs):
        video_dir = flask.current_app.config["VIDEO_DIR"]
        return flask.send_from_directory(video_dir, path=file_name)

HTML video tag로 영상 재생 (nuxt)

이것도 마찬가지로, 재생 자체는 video tag에 .m3u8 파일의 링크만 투입하면 된다. 영상 type은 mpegURL로 지정.

<video>
  <source :src="url" type="application/x-mpegURL" />
</video>

videojs로 인터페이스 구성

영상 사이즈나 자동재생 등의 설정을 하기 위해 videojs 라이브러리를 사용하자.

<video
  id="player"
  class="video-js vjs-default-skin"
  controls
  preload
  autoplay
  width="600"
  muted="true">
  <source :src="url" type="application/x-mpegURL" />
</video>

nuxt 코드 작성

난 nuxt로 프론트 구성함.

html 스크립트

<video
  id="player"
  class="video-js vjs-default-skin"
  controls
  preload
  autoplay
  width="600"
  muted="true"></video>

그리고 아래 js를 mounted() 훅에서 실행하면 된다.

var player = videojs("player", { width: 350, height: 200 });
player.src({
  src: "${this.videoSrc}",
  type: "application/x-mpegURL",
  withCredentials: true,
});

player.play();

상세코드

조금 더 자세하게, 아래 코드를 붙여넣으면 됨.

mounted() {
    const script = document.createElement("script");
    script.src = "https://vjs.zencdn.net/6.2.8/video.js";
    document.head.appendChild(script);
    const script2 = document.createElement("script");
    var _this = this;

    //load script3 after load script and script2
    script.onload = function () {
      script2.src =
        "https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js";
      document.head.appendChild(script2);
      loaded1 = true;
    };
    script2.onload = function () {
      var intervalScriptLoading = setInterval(function () {
        if (loaded1 === true) {
          clearInterval(intervalScriptLoading); // null이 아닐 때 반복 중지
          _this.loadScript();
        }
      }, 1000);
    };
},
methods: {
loadScript() {
      const script3 = document.createElement("script");
      script3.innerHTML = `
        var player = videojs("player", { width: 350, height: 200 });
        player.src({
          src: "${this.videoSrc}",
          type: "application/x-mpegURL",
          withCredentials: true,
        });
        player.play();
    `;
      document.head.appendChild(script3);
    },
}