주간기술동향통권 1378 호 2008. 12. 24. Flex 미디어애플리케이션 문필주 * 이요섭 ** 인터넷, 디지털카메라, 휴대전화등정보통신분야가발달함에따라일반인들도손쉽게다양한미디어애플리케이션에접근할수있게되었다. YouTube, 판도라 TV, 곰 TV 와같은동영상포털사이트의 UCC 동영상, 각종메신저에서제공하고있는음성통화 / 화상통화, 아프리카개인방송과같이실시간으로인터넷방송등다양한미디어애플리케이션등을볼수있다. 본고에서는 Flex 를이용하여손쉽게미디어애플리케이션을활용할수있는방법에대해논의하고자한다. 먼저, Flash, Flash Lite, Flex 에대해소개하고, 플래시미디어서버나플래시미디어인코더등을이용하여실시간인터넷방송이나 VOD 서비스와같은미디어애플리케이션에대하여기술하고자한다. 목 차 I. 서론 I. 서론 II. Flash, Flash Lite, Flex III. 미디어애플리케이션 IV. 결론 * 평택대학교정보통신학과 / 교수 ** Visual Partners Inc./ 기술이사 인터넷과미디어관련가전기기의발달로인해 UCC 와같은미디어의생성이나사용이급속도로증가하고있다. 일반사용자들의미디어사용의증가로스카이프나각메신저에서는음성통화뿐만아니라화상통화와같은미디어서비스를기본기능으로제공하고있으며, 일반사용자들도아프리카개인방송과같이개인미디어애플리케이션을요구하게되었다. 이러한시점에서 Flex 는간편하게미디어애플리케이션을개발하여사용할수있게한다. 또한 KTF 의 Show 와같은화상통화도손쉽게구현이가능하기때문에모바일환경에서도다양한미디어애플리케이션을제공할수있을뿐만아니라 OpenAPI 를활용하여다양한매시업서비스의개발도가능하다. 12
먼저 Flex 에앞서 Flash, Flash Lite 에대해알아보고, Flex 를이용한미디어애플리케이션 을만들기위해필요로하는아도브의제품들에대해알아본다. 이들을이용하여간단하게라이 브스트리밍과 VOD 서비스를제공하는 Flex 클라이언트에대하여기술하고자한다. II. Flash, Flash Lite, Flex Flash, Flash Lite, Flex 는 Adobe 에서개발한제품들로서, Adobe Flash 는상호작용적인벡터기반의웹사이트를제작할수있는웹저작도구로간단한애니메이션제작과상호작용을제공한다. Flash Lite 는모바일기기에서사용이가능한플래시플레이어의경량버전이다. Adobe Flex 는 RIA(Rich Internet Applications) 를디자인하고개발하기위한혁신적인플랫폼이다. RIA 는애플리케이션의새로운트렌드로서, 전통적인웹및데스크탑환경의제약에서탈피하여보다풍부한정보중심의유저경험을제공한다. Flash 는애니메이션모델로서개발시디자이너에게유리한면을제공하지만, Flex 는상태모델로서프로그래머가쉽게접근할수있는방법을제공한다. Flex 는 MXML 과액션스크립트로구성되어있으며, MXML 은태그형태로버튼, 리스트박스, 텍스트필드등비주얼컴포넌트를손쉽게구성할수있도록해준다. Flash 저작의선형애니메이션모델은 Flex 의비선형모델과대조를이룬다. Flash 모델은정해진상태만처리하게되어있지만, Flex 의상태모델은한상태에서다음상태로갈수있는경우의수를고려하여처리하기때문에보다많은상태를처리할수있다. 상태모델의시스템을통해사용자들이받아들이는많은경로를처리할수있어애플리케이션개발에있어서 Flex 모델을더선호하는경향이있다 (( 그림 1) 참조 ). ( 그림 1) Flash 모델과 Flex 모델 13
주간기술동향통권 1378 호 2008. 12. 24. < 표 1> Flash Lite 버전비교구분 Flash Lite 2.1 Flash Player 7 SDK Flash Lite 3 FLV O O Flash 버전 ~ Flash 7 ~ Flash 7 ~ Flash 8 ActionScript 버전 1.2, 2.0 1.2, 2.0 1.2, 2.0 Flash Media Server 연결 (RTMP 스트리밍 ) O O Flash Media Server 연결 ( 원격공유객체 ) O 레퍼런스플랫폼 Symbian, BREW O Symbian, Windows XP 지원되는브러우저 Microsoft IE, Firefox 최근에사용중인 Flash Lite 버전은 < 표 1> 과같이 Flash Lite 2.1, Flash Player 7 SDK, Flash Lite 3.0 으로나뉘어진다 [2]. Flash Lite 2.1 과 Flash Lite 3.0 은모바일기기에서플래시프로그램을구동시키는독자적인플레이어를나타내고, Flash Player 7 SDK 는모바일인터넷익스플로러에플러그인되어모바일인터넷익스플로러상에서플래시프로그램을구동시키는역할을한다. Flash Lite 버전들은액션스크립트 2.0 까지만지원하기때문에액션스크립트 3.0 으로구성된 Flex 는사용할수없다. 플래시비디오파일 (FLV) 은 Flash Player 7 SDK 와 Flash Lite 3.0 에서만지원하기때문에플래시비디오동영상은 Flash Lite 2.1 에서는사용하지못한다. RTMP 는 Real Time Messaging Protocol 의약자로써 Adobe 사에의해개발된것으로 Macromedia Flash Media Server 로이용되고있다. 사용자들은 Adobe Flash Player 를이용함으로써서버에올려진미디어의영상과음성을스트리밍서비스로이용할수있다. RTMP 스트리밍은화상서버를통한화상통화나실시간방송을말하며, RTMP 원격공유객체는화상서버에공유객체를설정하여여러사용자가공유할수있도록하는기능으로대표적인경우는채팅메시지를말할수있다. RTMP 스트리밍은 Flash Player 7 SDK 와 Flash Lite 3.0 에서만제공하므로 Flash Player 7 SDK 와 Flash Lite 3.0 을지원하는모바일기기에서만화상통화와실시간방송을사용할수있다. Flash Player 7 SDK 는윈도모바일 5.0 을지원하며, Flash Lite 3.0 은노키아모바일기기의최신모델에서만지원한다. ( 그림 2) 는플래시로개발한모바일용화상통신소프트웨어를나타낸다. 테스트모바일기기는 Windows Mobile 5.0 을지원하는 LG KC-1 을이용하였으며, 클라이언트는커뮤니케이션컴포넌트세트를이용하여플래시로작성하였다. 클라이언트커뮤니케이션세트는통신에필요한컴포넌트들, 즉, 화상통화, 화상회의, 음성통화, 채팅, 참여자리스트, 로그인, 전자칠판등의 14
( 그림 2) 모바일용플래시화상통신프로그램 기능들을모듈별로제공하는라이브러리이다. 플래시프로그램을 PDA 에서실행시키기위해서 는먼저 Flash Player 7 SDK 를설치해야한다. 로그인을한후에화면을클릭하면자신의모습 이나타나게된다. 상대방이접속하면상대방의화면이나타나게된다. III. 미디어애플리케이션 1. Adobe 사의제품군 Adobe 사에서제공되는제품군중에플렉스를이용하여미디어애플리케이션을만드는데사용하는제품들이있다. 이제품들은플래시미디어서버 (Flash Media Server: FMS), 플래시미디어인코더 (Flash Media Encoder) 등으로, 손쉽게미디어애플리케이션을만들수있도록한다. < 표 2> 플래시미디어서버의종류 종류플래시미디어인터랙티브서버플래시미디어개발서버플래시미디어스트리밍서버 - 서버의모든기능을지원 특징 - 플래시미디어인터랙티브서버의개발버전 - 커넥션의수에제약이있을뿐서버의모든기능을지원 - 라이브스트리밍과 VOD 스트리밍서비스만을지원 - 서버 - 사이트스트립트와스트림레코딩을지원하지않음 15
주간기술동향통권 1378 호 2008. 12. 24. 플래시미디어서버는화상통신, 라이브비디오스트림등의다양한미디어애플리케이션을위해스트리밍미디어와인터랙션을제공한다. 플래시미디어서버의버전으로현재 3.0 으로, 플래시미디어서버 3.0 의종류는플래시미디어인터랙티브서버, 플래시미디어개발서버, 플래시미디어스트리밍서버등이있다. 플래시미디어인코더는웹캠을통해나온동영상을인코딩하는역할을해준다. 라이브스트리밍시플래시미디어인코더를통해인코딩된동영상은플래시미디어서버에게전송되며, 각사용자들은플래시미디어서버에접속된클라이언트를통해플래시미디어서버에서실시간으로동영상을스트리밍받아볼수있게된다. 2. 간단한 Flex 용비디오애플리케이션만들기자신의웹캠으로자신의영상을나타내는간단한비디오애플리케이션을만들수있다 [4]. Flex 프로그램은 Flex Builder 를통하여개발할수있다. <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:script> <![CDATA[ import flash.media.camera; public var mycamera:camera; public function startvid():void { mycamera = Camera.getCamera(); myvid.attachcamera(mycamera); myvid.autoplay; } ]]> </mx:script> <mx:panel x="49" y="113" width="335" height="268" layout="absolute"> <mx:videodisplay id="myvid" x="32" y="24" width="251" height="164"/> <mx:button x="125" y="196" label="button" click="startvid()"/> </mx:panel> </mx:application> 16
mycamera 라는카메라타입의변수를선언하여새로운카메라인스턴스를생성하고, Camera. getcamera( ) 메쏘드의값으로초기화시키고, attachcemera( ) 메쏘드를이용하여 myvid 객체에카메라객체를붙인다. 버튼을누르면위에서언급한일련의동작을수행하는 startvid( ) 함수를실행하여카메라를통해자신의동영상을화면상에나타낼수있다. autoplay 는 VideoDisplay 콘트롤에서사용하는속성으로비디오의소스가설정되면비디오를바로플레이시킬지의여부를설정한다. <..> 로시작하는부분들은 MXML 을나타내고, <mx:script> 와 </mx:script> 태그안의내용은액션스크립트를나타낸다. 비쥬얼컴포넌트는 <mx:panel>, <mx:videodisplay>, <mx:button> 들이사용되었음을알수있다. 위의결과를실행한화면은 ( 그림 3) 과같다. ( 그림 3) 간단한비디오애플리케이션실행화면 3. FMS 와 FME 를이용한미디어애플리케이션플래시미디어인코더와플래시미디어서버, 라이브웹브로드캐스팅애플리케이션을이용하여간단한라이브브로드캐스팅서비스를제공할수있다. ( 그림 4) 는플래시미디어언코더를이용한간단한라이브웹브로드캐스팅을나타낸다 [6]. 플래시미디어인코더가설치된컴퓨터의오디오 / 비디오장치를통해라이브이벤트를캡춰해서플래시미디어인코더를통해인코딩을수행하고, 플래시미디어서버를통해웹서버에서라이브이벤트를전송받을수있게한다. ( 그림 5) 는플래시미디어인코더를나타낸다. 하단의왼쪽메뉴에는비디오에대한옵션사항을나타낸다. 가운데는오디오에대한옵션사항을나타내고, 오른쪽에는 FMS 에관한옵션사 17
주간기술동향통권 1378 호 2008. 12. 24. ( 그림 4) 플래시미디어인코더를사용한라이브웹브로드캐스팅 ( 그림 5) Flash Media Encoder 실행화면 18
항들을나타낸다. 비디오옵션부분에서는디바이스, 비디오의크기와 fps, Bit rate 등을설정할수있다. 오디오옵션부분에서는디바이스, 포맷, Sample rate, Bit rate, 볼륨크기등을설정할수있다. 플래시미디어인코더에서 FMS 와관련된설정항목들은 < 표 3> 과같다. < 표 3> 플래시미디어인코더의옵션 옵션 설명 stream to flash media server output 영상을어느 FMS 서버로보낼건지를정하는옵션 FMS URL rtmp:// 영상받을 FMS 도메인및 IP 주소 / 라이브폴더 Backup URL 영상받는 FMS 서버에대한이중화에대한지원, 보통다른서버를지정. Stream 옵션 일종의채널이름 ( 예 : channel1) FLV 플레이어에서사용할주소 rtmp://fmsip/ 라이브폴더 /channel1 라이브스트리밍을지원하는클라이언트애플리케이션은다음과같다. <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalalign="middle" backgroundcolor="white"> <mx:videodisplay source="rtmp://localhost/live/livestream" live="true" autoplay="true" /> </mx:application> 비디오디스플레이의라이브속성은스트리밍이라이브인지의여부를나타낸다. source="rtmp://localhost/live/livestream" 는실제로로컬호스트의 FMS 설치된폴더안의 applcations 폴더안의라이브폴더안의 livestream 폴더를나타낸다. 위와같이클라이언트프로그램을작성한후에는 FMS 가설치된서버안에 source="rtmp://localhost/live/livestream" 와같이폴더들을생성해주어야클라이언트프로그램이정상적으로동작하게된다. VOD 를지원하는클라이언트애플리케이션은다음과같다. <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalalign="middle" backgroundcolor="white"> <mx:videodisplay source="rtmp://localhost/vod/sample.flv" autoplay="true" /> </mx:application> 19
주간기술동향통권 1378 호 2008. 12. 24. source="rtmp://localhost/vod/sample.flv" 는 FMS 설치된폴더안의 applcations 폴더안의 vod 폴더안의 sample.flv 파일이존재하는것을나타낸다. 클라이언트프로그램을실행하기전에 vod 폴더를생성하고 sample.flv 파일을복사해놓아야한다. 이외에도오디오만을이용하여 1:1 음성통화, 다자간음성회의, 1:1 화상통화, 다자간화상회의등을손쉽게구현할수있다. IV. 결론 RIA 를대표하는플랫폼인 Flex 는미디어애플리케이션들을손쉽게개발하여사용할수있게한다. Flex 는웹캠을통해생성되는동영상의저장이나플래시미디어인코더와플래시미디어서버를이용한라이브스트리밍, 플래시미디어서버를이용한 VOD 서비스등다양한미디어애플리케이션을손쉽게개발하고사용할수있도록한다. 미디어애플리케이션외에구글맵이나검색기능과같은다양한 OpenAPI 를활용하여다양한매시업서비스를개발할수있을뿐만아니라, 윈도모바일이나구글폰의안드로이드등을지원하여모바일환경에서도손쉽게애플리케이션을개발할수있는환경을제공한다. 향후미디어애플리케이션들은 Flex 와같이손쉽게사용할수있도록많은템플리트들을제공할것으로보인다. 미디어스트리밍과같은경우에도 CDN 에서플래시미디어스트리밍서버를사용하여손쉽게서비스를제공하고있다. 손쉽게사용할수있는다양한미디어애플리케이션들을어떤사용자들에게어떤목적으로어떻게제공할것인가에대한서비스의기획이중요할것으로보인다. < 참고문헌 > [1] Flex Overview, http://learn.adobe.com/wiki/display/flex.animated+overview. [2] Flash Lite 버전비교, http://www.adobe.com/kr/products/flashlite/version/. [3] Flash Media Server Developer Documentation, http://www.adobe.com/livedocs/flashmediaserver/ 3.0/hpdocs/help.html. [4] Building a video application with Flex Builder, http://www.adobe.com.devnet/flex/article/video_app.html. [5] Rob Adams, Flex 디자인하기, 12 page, http://www.adobeflex.co.kr/tmp/adobe_flex_design.pdf. [6] Greg Hammer, Webcasting live video with Flash Media Live Encoder, http://www.adobe.com/ devnet/flashmediaserver/articles/webcasting_fme_02.html. * 본내용은필자의주관적인의견이며 IITA 의공식적인입장이아님을밝힙니다. 20