[JavaScript] Html5 - Video 태그를 이용한 동영상 스트리밍 기능 구현

현재 개발하고 있는 페이지에서 게임이 진행된 과정을 담은 동영상이 AWS의 S3에 저장되고 API를 통해 해당 URL을 불러와 웹 화면에서 스트리밍하는 화면을 개발하고자 한다.

 

이 과정에서 동영상이 저장된 정보를 불러오기 위해 서버에서 개발된 API 주소와 응답값은 아래와 같았다.

/studio/channel/table/record/info

API 응답 값

응답 값은 Ajax Success 시, data.msg.URL이라는 파라미터로 접근할 수 있었다.

 

처음 작성되어 있던 동영상 정보를 보여주기 위한 HTML 코드는 iframe을 이용하여 아래와 같이 작성되어 있었다.

<figure>
    <iframe width="800" height="500" src="https://www.youtube.com/embed/a3H9bZ7AtQ8" frameborder="0" allowfullscreen></iframe>
</figure>

 

따라서 해당 코드를 그대로 이용하기 위해 javascript를 이용하여 아래의 코드를 통해 속성을 부여하는 방법을 사용해보았다.

$("iframe").attr("src", data.msg.URL);

하지만, 서버가 응답한 URL이 스트리밍 페이지로 연동되어 있는 것이 아닌 다운로드가 되는 URL 이였기에 원하는 동영상 스트리밍의 결과가 아닌 페이지 로드 시, 동영상이 다운되버리도록 개발이 되었다.

 

이는 원하는 결과가 아니였기에 아래와 같이 로컬에서 저장된 폴더에 접근하여 파일을 읽어오는 방법을 시도해보았지만

로컬에 접근할 수 없는 보안상의 문제로 Not allowed to load local resource 에러가 발생하였다.

$("iframe").attr("src", "C:\Users\YeongJu\Downloads\video_"+oParams.tableId);

 

위와 같은 방법을 시도하였지만 모두 원하는 결과를 도출하지 못하였고, 따라서 iframe을 이용한 방법이 아닌 html의 video 태그를 이용하여 직접 스트리밍 되도록 구성하고자 다시 개발하기 시작하였다.

 

먼저, 아래와 같이 html 소스 코드를 다시 작성하였다.

<video width="600" height="500" id="videoPlay" controls loop muted autoplay src=""></video>

controls loop muted autoplay를 작성함으로써 동영상이 불러와지면 자동으로 재생될 수 있도록 구성하였다.

 

새롭게 작성된 html 코드에 속성을 부여하는 javascript 코드를 아래와 같이 다시 작성하였다.

$("#videoPlay").attr("src", data.msg.URL);

그 결과, 웹 페이지에의 동영상 스트리밍 기능을 구현할 수 있었다.

 

참고 사이트

https://studyforus.tistory.com/98

HTML5 VIDEO 태그를 이용하여 동영상 스트리밍

https://m.blog.naver.com/skydoor2014/221667330746

[ video 태그 ] HTML5로 동영상 넣는 방법. 이 글 하나면 모든 고민 끝!

https://yethor.tistory.com/11

웹에서의 비디오 스트리밍 - video, MSE, SourceBuffer

https://hohoya33.tistory.com/120

video 태그 m3u8 포맷 스트리밍 지원여부 확인