들어가기
요즘(?) VR에 대해서 관심이 많다. 요즘이라고 해도 너무 오랜동안 관심만 많은 듯 하다. 유튜브에서도 360 video을 제공하고 있다. 웹 환경에서 360 video를 재생하는 방법을 살펴볼려고 한다.
작성자: ospace114@empal.com, http://ospace.tistory.com/
오픈소스
간단하게 360 video를 재생할 수 있는 오픈소스를 찾아보았다. 찾은 오픈소스로 Video.js가 있다.
Video.js는 널리 사용하고 있는 HTML5 비디오 플레이어이다. 360 video를 재생할 수 있는 플러그인 사용하여 360 video를 재생할 수 있다.
- https://github.com/videojs/video.js (Apache License, version 2.0)
- https://github.com/videojs/videojs-vr (MIT license)
사용방법
먼저 Video.js를 위해 관련된 CSS와 자바스크립트를 로딩해야 한다.
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>최신 버전 Video.js을 사용하면 360 video가 제대로 재생되지 않는다.
다음으로 360 영상을 재생할 플러그인을 로딩한다.
<script src="https://videojs-vr.netlify.com/dist/videojs-vr.js"></script>이것으로 기본으로 사용할 CSS와 자바스크립트를 로딩은 끝이다. 이제 사용하기만 하면 된다.
<video width="640" height="480" id="my-video" class="video-js" controls playsinline>
<source src="eagle-360.mp4" type="video/mp4" />
</video>
<script>
var player = videojs('my-video');
player.mediainfo = player.mediainfo || {};
player.mediainfo.projection = '360';
player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
</script>player.mediainfo.projection에 360 설정하고 player.vr에 의해서 360 video 프로젝션을 설정한다. AUTO는 player.mediainfo.project에 있는 값을 사용하게 된다. 영상마다 다양한 프로젝션 방식이 있기 때문에 맞는 방식을 선택해야 한다. 지원하는 프로젝션은 다음과 같다.
- 180: half sphere
- 180_LR: side-by-side 180
- 180_MONO: monoscopic 180
- 360, Sphere, equirectangular: sphere
- Cube, 360_CUBE: cube
- 360_LR: side-by-side 360
- 360_TB: top-to-bottom 360
- EAC: Equi-Angular Cubemap
- EAC_LR: side-by-side Equi-Angular Cubemap
사용한 비디오 소스는 "https://github.com/videojs/videojs-vr/raw/main/samples/eagle-360.mp4"에서 받을 수 있다.
전체소스
<html>
<head>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<script src="https://videojs-vr.netlify.com/dist/videojs-vr.js"></script>
</head>
<body>
<video width="640" height="480" id="my-video" class="video-js" controls playsinline>
<source src="eagle-360.mp4" type="video/mp4" />
</video>
<script>
var player = videojs('my-video');
player.mediainfo = player2.mediainfo || {};
player.mediainfo.projection = '360';
player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
</script>
</body>
</html>Troubleshooting
Your browser/device does not support HLS 360 video.
이는 URL 링크로 비디오를 바로 재생하는 경우이다. HLS(HTTP Live Streaming) 방식의 스트리밍 재생하는 규격이다. 제대로된 포멧이 아니거나 플레이어가 HLS을 지원지 않을 경우이다. 영상 파일을 로컬에 두고 재생하면 된다.
영상이 보이는데 VR이 안되는 경우
아래 이미지를 보면 하단에 "360" 텍스트가 보인다. 이는 360 영상이 제대로 표시되지 않고 있다는 표시이다. video.js 버전을 확인이 필요하다.
마무리
브라우저에서 재생되는지 확인해보았다. 최신브라우저 Chrome, IE Edge, FireFox에서 잘 작동하고 있다. 사용한 비디오 소스는 2048x1024, 25fps, 1m28s, 20MB 용량을 가졌다. 이전 IE Edge에서는 화면이 약간 끈기는 부분이 있었지만 최근 브라우저에서는 크게 문제가 없었다. CPU 사용율를 다른 브라우저가 약 20% 정도 했는데 보다 Chrome가 40%정도로 조금 높게 나왔지만, 크게 문제가 없는듯 하다. 이 부분은 시스템 사양, 설치된 플러그 등에 따라서 달라질 수 있기 때문에 참고만 하시기 바란다.
부족한 글이지만 여러분에게 도움이 되었으면 하네요. 모두 즐거운 코딩생활되세요. ospace.
참고
[1] HTML5 Video Player, https://github.com/videojs/video.js
[2] VR, https://github.com/videojs/videojs-vr
[3] https://videojs-vr.netlify.app/
'3.구현 > HTML5&Javascript' 카테고리의 다른 글
| [CSS] Flex 사용하기 (2) | 2024.04.02 |
|---|---|
| [javascript] 이미지 동적 로딩 (0) | 2024.03.21 |
| [jquery] 단순 DOM 데이터 바인딩 (0) | 2024.03.19 |
| [HTML] crossorigin 속성 (0) | 2024.03.06 |
| [jquery] multiselect 플러그인 제작하기 (0) | 2024.02.29 |
