videojs / JWT 인증이 포함된 video tag

video.js

앞 포스팅에서 간략하게 video.js 라이브러리를 날로 긁어와서 사용했는데, 기본적인 것을 알고가야 할 것 같아서 간단하게 공부해봤다.

공식 홈페이지 (링크)

깃헙 페이지 (링크)

2010년부터 개발 된 opensource video 재생 라이브러리로, HTML5에 호환된다. 아파치라이센스 2.0에 따른다. (해당 라이브러리 사용만 밝히면 사용 제약이 없음)

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Extensions, as well as other playback techs like YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 100,000 200,000 400,000 700,000 websites.

npm 라이브러리가 기본 배포방식인 것 같다. 라이브러리를 웹 서버에서 직접 배포할 경우엔 그냥 npm import해서 사용하면 되는 것 같고, 무료 CDN을 이용한 라이브러리 배포 또한 가능하다. (현재 8.3.0 버전까지 배포되어 있음)

<link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet" />
<script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>

video.js + hls

앞 포스팅에서 사용한 예제코드는 stack overflow의 오래된 질문글에서 복사해 온 것이라, video.js의 버전이 6.2.8, 그리고 hls 재생을 위한 plugin (videojs-contrib-hls 5.12.2)을 별도로 로드해줘야 한다.

<script src="https://vjs.zencdn.net/6.2.8/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>

현재 최신 버전은 (정확히는 video.js 7 이후) VHS 재생 통합 플러그인인 http-streaming만 설치하면 hls까지 같이 재생 가능한 것 같다. 나중에 업데이트 해야지..

JWT 인증 추가

video.js로 video tag header에 JWT authentication 삽입하기

내가 video.js를 이용한 이유는 video tag 재생을 위한 파일 요청 시 header에 JWT 인증을 삽입하기 위해서다. 다른 방식이 분명히 존재하나 (예를들어 유튜브처럼 src에 jwt token을 query로 삽입하는 방법), 그냥 header로 해보고 싶었다.

video.js를 이용하면 video tage의 XHR request header의 조작이 가능하다. 예를들어, browser의 쿠키에 JWT를 기록할 경우에 아래와 같이 매우 간단한 구문으로 (vue의 경우) header에 토큰을 삽입하여 요청할 수 있다.

videojs.Hls.xhr.beforeRequest = function (options) {
  options.headers = options.headers || {};
  options.headers["Authorization"] = "Bearer ${this.accessToken}";
  return options;
};

python (flask) HLS 송출 시 JWT 검증

flask api를 이용한 HLS 파일 송출 시 JWT 검증 과정은 영상 파일 송출이라고 다를 것이 없다. 앞 포스팅의 HLS 송출 단말에 JWT 검증만 추가해주면 된다.

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

# JWT 토큰 검증 decorator
def jwt_required(f):
    @wraps(f)
    def decorated_function(*args, **kwargs):
        headers = flask.request.headers
        token = headers.get("Authorization")

        if not token:
            return "Missing token", 401

        # Bearer 토큰 구조에서 'Bearer ' 부분 제거
        token = token.replace("Bearer ", "")

        # JWT 토큰 검증
        _bool, decoded_payload = verify_jwt_token(
            flask.current_app.config["JWT_SECRET_KEY"], token
        )
        if not _bool:
            kwargs["message"] = decoded_payload
        else:
            # 토큰에서 추출한 정보를 활용하여 로직 수행

        return f(*args, **kwargs)

    return decorated_function