2021년으로 바뀌면서 인터넷에서는 조용하지만 제 주변에서는 이슈가 제법 되고 있는 것이 있는데 바로 Flash Player가 말썽입니다. 플래시플레이어가 서비스를 종료하면서 웹페이지상의 모든 플래시무비들이 작동을 멈춘 것인데요. 물론 Ruffle 이란 Emulator가 있어서 브라우저 관련 플러그인을 깔면 재생은 할 수 있지만 완벽하지 않습니다.
특히나 AS3 등으로 구현된 Flash 또는 Flex Component 등이나 웹서버와 연동하거나 또는 Backend 언어들과 연결하는 Flash인 경우 작동이 아직 안됩니다.(로드맵으로는 지속적으로 추가하여 궁극적으로 AS3.0을 지원하는게 목표라고 합니다.) 지금으로선 단순히 타임라인 무비로 이우어진 무비나 복잡하지 않은 액션스크립트가 사용된 무비만 가능합니다. 제가 직접 테스트 해보니 안되는게 꽤 있더라고요.
여튼 지금 내 주위에서 발생하는 이슈는 과거 플래시가 속속히 박혀있던 웹사이트의 내부 프로그램들, 특히 파일업로드나 비디오/오디오 등의 재생기 등이 대부분인데 생각하면 좀 많이 머리가 아파오네요~~@.@
Flash가 대세인 시절에 Adobe는 Media를 위해 FLV란 비디오 포맷도 만들고, RTMP라는 프로토콜도 만들고, 그 결합체인 Flash Communication Server(이후 Adobe Media Server)를 내놓고, 시대에 편승?해서 오픈소스 진영에서는 RED5가, 써드파티로는 Wowza라는 비슷한 제품이 나타나서 나름대로 전성기?를 가진 Flash 였는데요.. 세월이 참 그러네요. ㅋㅋ
당시 Wowza는 상대적으로 저렴한 가격에 다양한 포맷을 지원하고, 특히 당시 아이폰이나 안드로이드를 위한 HTTP스트리밍도 지원하니 국내 미디어 관련 사이트에서도 도입을 많이 한걸로 알고 있습니다.
제가 맡았던 지방의 지상파 방송국 세곳도 Live streaming이나 VOD/AOD서비스를 바로 Wowza로 구축하기로 제안했는데 가격대비 고객들의 만족도도 높았고 구축을 하는 제 입장에서도 설치, 배포, 설정 등이 여타 제품보다 월등히 편해서 아주 맘에 들었던 기억이 있습니다. 물론 Adobe도 나중에는 HTTP스트리밍을 지원했고, RED5도 일부 상용컴포넌트로 HTTP스트리밍을 지원하긴 했지만 가격에서 외면받거나 어려운 설치와 빈약한 기술문서 등등으로 거의 쓰는 곳을 못 보았습니다. 여전히도..
Wowza에서는 인코더에서 넘어오는 스트림을 전송할 때 다양한 클라이언트 환경를 지원하는데 일반 PC의 브라우저환경 뿐만 아니라 Apple의 브라우저(iOS)나 Android의 브라우저도 잘 지원합니다. 다만 이전까지는 대부분 플래시(SWF)로 재생기를 만들어서 브라우저별로 지원하는 포맷이나 코덱문제를 잘 해결했다면, 이제는 플래시를 사용하지 못하니 또 해결해야하는 말썽이 생긴 것이죠.
그래서 열심히 인터넷을 뒤지니까 역시나 답은 나오더군요. 여러 도구가 있었는데 그 중에서 hls.js (github.com/video-dev/hls.js/)를 사용했습니다. 일단 모바일 브라우저를 위한 도구로도 썩 괜찮습니다. 일단 아래와 같이 간단하게 웹페이지를 만들어 PC의 크롬과 엣지 등에서 테스트하고 안드로이드 크롬에서 테스트해보니 VOD파일 스트리밍이 아주 잘 됩니다. 이 경우 Wowza에서 Application 스트리밍 속성에서 HLS옵션을 켜야합니다. 기본적으로 HLS로 전송되는 스트림은 크롬 등의 브라우저에서는 재생이 안되어 별도의 익스텐션을 설치해야 볼 수 있었습니다. 아니면 직접 스트림 URL을 팟플레이어같은 외부 재생기를 통해 봐야 했죠.
hls.js 바로가기 : github.com/video-dev/hls.js/
hls.js를 이용하여 아래와 같이 HTML5의 Video 태그나 Audio 태그로 스트림을 받아 화면에서 재생시켜 줄 수 있습니다. 물론 Flash와 같은 플러그인들 도움 없이..
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>hls.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<video controls autoplay id="video-player"></video>
<script>
var video = document.getElementById('video-player');
var videoSrc = 'http://{Domain or IP}:{Port}/{Application}/_definst_/mp4:{Path}/{File Name}/playlist.m3u8';
//
// First check for native browser HLS support
//
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
//
// If no native HLS support, check if hls.js is supported
//
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
</script>
</body>
</html>사실 매우 단순한 구조입니다. hls.js의 최신버전을 CDN을 통해 로드하고 video 태그로 만들어진 재생기에 자바스크립트로 비디오의 경로를 바인딩하면 됩니다. 13번째 줄의 var videoSrc 의 경로부분의 { } 괄호로 된 부분만 본인의 서버환경에 맞추어 변경하면 잘 재생됩니다. 아이폰은 없어서 직접 테스트는 못해 봤지만 아마도 잘 나올 것이라 봅니다.
참고! 마지막으로 PC용 크롬에서 Ruffle을 설치해서 플래시를 재생하는 방법을 알려드립니다. Ruffle 사이트에서 크롬익스텐션(Chrome Extension)을 다운로드하여 수동으로 설치하면 되는데 아주 간단합니다.
먼저 Ruffle 다운로드 경로(ruffle.rs/#releases)에서 브라우저용 익스텐션을 받으면 되는데요. Firefox용만 따로 있고 Chrome, Edge, Safari는 하나만 받으면 모두 추가할 수 있습니다.(자동추가가 아니라 각 브라우저에서 수동으로 추가)
다운로드 받은 zip 파일을 임의의 폴더를 만들고 그 안에 압축을 푼 다음 크롬의 경우 주소창에 chrome://extensions/ 을 입력하면 "압축해제 된 확장프로그램을 로드합니다" 버튼이 보이는데 이걸 클릭하고 압축 푼 폴더를 선택한 후 확인을 누르면 아래와 같이 익스텐션(확장)이 설치됩니다.
이후엔 플래시가 있는 사이트에 들어가면 알아서 Ruffle이 실행되며 간단한 플래시들을 화면에 잘 보여줍니다.
'Web & Media' 카테고리의 다른 글
| Ruffle - Flash player emulator - part 2 (2) | 2023.03.12 |
|---|---|
| MistServer가 완전히 오픈소스가 되었습니다.(무료로 HLS서버 구축) (2) | 2022.03.06 |
| 플래시 플레이어(Flash Player)가 여전히 필요한 경우 (0) | 2021.07.17 |
| Ruffle - Flash Player emulator (10) | 2021.01.17 |
| UWAMP를 이용한 USB포터블 PHP개발환경 만들기 (0) | 2020.01.07 |
