지난해 2010년 11월 30일 Flash Player 10.2 Beta가 처음 배포되면서 가장 눈에 띈 것은 바로 StageVideo가 아닌가 싶다. 이전 버전 Flash Player 10.1은 H.264 코덱 영상의 하드웨어 가속 기능을 강화하여 동영상 재생시 CPU 점유율을 감소시켰다는데 의미가 있었다. 10.2에서는 비디오 랜더링 파이프라인을 더욱 확장하고 색상 보정 기능과 이미지 스케일링등의 각종 기능을 추가했다. 즉, GPU가속 기능을 더욱 확대했다는 것을 의미하며 이로써 1080P 해상도의 HD 동영상을 보여주는데 CPU 점유율 0%에 가까운 수준이 되었다고 한다. 이것은 새로운 비디오 렌더링 방식인 StageVideo를 도입한데서 비롯된다. 이 문서는 StageVideo 에 대해서 이해하는 것을 목적으로 한다. (현재 시점에서 Flash Player 10.2이 공식 배포중이다.)


StageVideo 구조에 대해 
Flash Player 10.2 부터 지원하는 StageVideo는 어떻게 동작하는 것일까? 어떻게 해서 CPU 점유율을 줄이고 GPU 가속을 받을 수 있을까? 이런 부분에 대한 궁금증이 생길것이다. 

아래 화면은 전통적으로 사용된 기존 Flash Player에서 Video 시각객체(DisplayObject) 렌더링하는 방식을 묘사하고 있다. 


기존에 Flash Player에서 Video를 보여주는 위해 시각객체의 부모격인 flash.display.Stage위에 추가해야만 했다. 이 방식의 문제점은 동영상 렌더링을 위한 Video객체가 다른 시각객체와 연결되어 있어 CPU 점유율이 높아질 수 밖에 없는 구조라는 점이다. GPU를 적극활용하기에는 물리적으로 불리한 방식이다. 

반면에 다음 그림은 비디오를 렌더링하기 위해 Flash Player 10.2부터 지원하는 StageVideo를 사용했을때를 묘사한다.


전통적인 방식과 달리 Flash Player 10.2부터는 비디오를 렌더링하기 위해 flash.display.Stage의 도움을 받지 않는다. flash.display.Stage 뒤에 StageVideo가 물리적으로 분리가 되어 있어 다른 시각객체들과 연관성 없이 동작이 가능해졌다. 이렇게 됨으로써 flash.display.Stage위에 시각객체들이 그래픽 가속을 받지 않더라도 StageVideo만은 GPU가속이 가능하게 된 것이다. 


StageVideo 사용여부에 따른 CPU 점유율 

운영체제 및 그래픽카드별로 StageVideo를 사용여부에 따른 CPU 점유율에 대한 비교 표가 다음 링크에 공유되어 있다. 

Stage Video with the Brightcove Player : http://goo.gl/ZALsa


CPU 점유율이 분명 개선이 되었다는 것을 확인할 수 있다. 

다음 동영상은 지난 2010 Adobe MAX 행사에서 StageVideo 사용여부에 따른 퍼포먼스를 보여주고 있다.



결국 StageVideo를 이용하면 다른 시각객체들과 무관하게 되어 GPU를 이용해 렌더링함으로써 CPU점유율과 메모리 사용량이 많이 줄어든다는 것을 알 수 있다.


Flash Player 10.2 환경에서 StageVideo를 느껴보자.

Adobe에서 제공하는 Big Buck Bunny라는 제목의 HD 동영상을 통해 여러분은 직접 StageVideo 환경을 경험해볼 수 있다. 아래 링크로 방문해보길 바란다.




StageVideo Running : true가 되어 있는지 확인하고 플레이 해보길 바란다. false라면 Flash Player 10.2가 설치가 되었는지 확인해보고 10.1 이하라면 다음 링크에서 10.2 버전을 다운로드 받아 설치하면 되겠다. 

Adobe Flash Player 10.2 다운로드 : http://get.adobe.com/kr/flashplayer


StageVideo의 제약사항 
StageVideo는 다른 시각객체(DisplayObject)와 별도의 구조를 가진다. 이렇게 됨으로써 비디오 객체가 기존 시각객체가 가지는 특징 및 속성을 활용하는데 제약이 따른다. 가령 다음과 같은 제약사항이 있다.

- StageVideo는 회전할 수 없다. 단지 90 회전만 가능하다.
- StageVideo는 ColorTransform 또는 3D transform을 적용할 수 없다.
- StageVideo 객체는 alpha채널, blendmode, filter, mask, scale9Grid등을 적용할 수 없다.
- StageVideo에 렌더링 되는 영상은 BitmapData 객체로 복사할 수 없다.
- StageVideo에 렌더링 되는 영상은 bitmap 캐쉬 할 수 없다.
- 영상은 SWF 파일에 Embed 될 수 없다. 반드시 NetStream 객체를 이용해서 운영되어야만 한다.
- wmode가 transparent나 opaque인 경우는 GPU 가속에 제한된다. wmode를 direct로 지정해야한다. 
- 기본 하드웨어에 따라 몇몇 색상이 지원되지 않을 수 있다. 이러한 경우 Flash Player의 임의의 color space을 사용한다.

위와 같은 제약사항은 사실 거의 제약이라고 보지 않아도 된다. 왜냐하면 Youtube 영상을 보면서 회전하거나 filtering 하는 경우는 드물기 때문이다. 제약사항은 있으나 GPU 가속이 된다는 것만으로도 큰 효과를 기대할 수 있겠다. 



StageVideo API 사용하기
이 문서를 보는 사람중에 개발자도 분명히 있을 것이다. 개발자는 Flash Builder Burrito와 Flex SDK  4.5.0.18623 이상의 환경만 갖춰진다면 StageVidoe를 테스트해볼 수 있다. 

Flash Builder Burrito 다운받기 : http://labs.adobe.com/technologies/flashbuilder_burrito/

완벽한 개발환경을 갖추기 위해서는 여러분의 브라우져에 Flash Player 10.2 디버그 버전을 설치하는 것이 좋겠다. 다음 링크에서 윈도우, Mac, 리눅스 환경에서 각 브라우져별 Flash Player 10.2 디버그 버전을 받아 설치할 수 있겠다. 

다음 문서를 통해 여러 시나리오로 StageVideo API를 테스트 해볼 수 있다.

조금 더 구체적으로 개발환경을 구성하는 방법과 함께 StageVideo API를 이용한 개발방법을 경험하시려면 다음 동영상을 보기 바란다.

StageVideo 사용법 : http://gotoandlearn.com/play.php?id=134

추가사항 
오창훈 님께서 저보다 먼저 글을 써주셨네요. ^^ 소스코드도 있으니 참고하세요.


정리하며 

지금까지 Flash Player 10.2에서 지원하는 StageVideo에 대해서 다뤄봤다. 

이미 Flash Player를 이용한 동영상 서비스는 보편화 된 상태이다. 이제 HD급 영상에 대한 렌더링도 GPU가속이 됨으로써 많은 관련 업체들이 적극적으로 StageVideo를 도입 할 것으로 판단한다. 

Flash Player 10.2 부터는 StageVideo 개념외에 IE9에서 GPU 가속지원, 네이티브 커스텀 마우스 커서 지원, 멀티모니터 풀스크린 지원, Sub-pixel 텍스트 렌더링 지원을 하게 되었다. 이런 부분도 함께 보면 업무 추진에 도움이 되지 않을까 생각한다. 자세한 내용은 다음 링크를 통해 확인해 볼 수 있겠다. 

Flash Player 개발자 센터 : http://www.adobe.com/devnet/flashplayer.html
Flash Player 10.2 feature : http://www.adobe.com/products/flashplayer/


StageVideo와 관련된 내용들

Adobe Flash Player 10.2 다운로드 : http://get.adobe.com/kr/flashplayer
(영문)Adobe 개발자 센터에서 소개하는 Stage Video : http://goo.gl/5bmBV
(영문)Flash Player 10.2 Beta: Stage Video : http://labs.adobe.com/technologies/flashplayer10/stagevideo.html
(영문)Getting started with stage video : http://www.adobe.com/devnet/flashplayer/articles/stage_video.html
(동영상)MAX Sneaks : Flash Player Video Performance Improvements : http://www.youtube.com/watch?v=geK7geL3I40
(동영상)StageVideo 사용법 : http://gotoandlearn.com/play.php?id=134
(영문)Introducing SimpleStageVideo : http://www.bytearray.org/?p=2571
(한글)StageVideo에 대해 : http://hazbola.tistory.com/222 
(영문)Delivering video and content for the Flash Platform on TV : http://www.adobe.com/devnet/devices/articles/video_content_tv.html
(한글)어도비, 동영상 가속 기능 강화된 플래시 플레이어 10.2 베타 발표 http://www.kbench.com/hardware/?no=93384&sc=1
Flash Player 개발자 센터 : http://www.adobe.com/devnet/flashplayer.html
Flash Player 10.2 feature : http://www.adobe.com/products/flashplayer/
[StageVideo 샘플 소스 공유]플래시 플레이어 10.2 정식 Release : http://lovedev.tistory.com/619


글쓴이 : 지돌스타(http://blog.jidolstar.com/743


Flash Player 10.2 beta가 2010년 12월 초에 배포가 되었다. 아무튼 강력한 GPU가속을 이용해 비디오 렌더링을 최적화 시킨 것이 가장 큰 변화라고 볼 수 있겠다. GPU를 이용하다보니 CPU 사용율이 급격히 줄어든다. 아래 동영상을 통해 Flash Player 10.2 beta의 GPU를 이용한 동영상 렌더링 효과를 눈으로 확인할 수 있다.


현재 Flash Player 10.2 beta는 정식 버전이 아니므로 자동으로 배포되어지지 않는다. 그러므로 다음 링크를 통해 다운로드 받을 수 있다. 개발자라면 debug 버전을 받을 것을 추천한다.


이번 배포의 변화는 다음과 같다.
1. Stage Video 하드웨어 가속
2. IE9에서 하드웨어 가속 지원
3. 네이티브 커스텀 마우스 커서 지원
4. 멀티모니터에서 풀스크린모드 지원 

이미 꽤 지난 내용이라 검색해보면 한글로된 설명글들도 있다.


Flash 분야에 손놓고 지낸지 오래라... 좀 파악하고 있는 중이다. ㅎㅎ

글쓴이 : 지돌스타(http://blog.jidolstar.com) 

얼마전 hTC 디자이어 안드로이드 스마트폰을 구입했다. 스마트 폰에는 항상 관심이 많았으나 정작 구입하려고 하니 아이폰으로 할지 안드로이드로 할지 선택의 기로에 서게 되었다. 결국 안드로이드 선택... 왜냐하면 아이폰, 아이팟 터치 계열을 회사에서 너무도 많이 봤고 개발용으로는 하나 이미 장만한 터였다.



Flash 개발자로서 안드로이드 2.2 프로요에 관심을 안가질 수 없었다. 오픈 스크린 프로젝트(Open Screen Project)의 일환으로 만들어진 Flash Player 10.1이 안드로이드 2.2 프로요에 탑재되기 시작했기 때문이다. 본인이 구입한 hTC 디자이어 폰은 2.1이 설치되어 있었지만 hTC에서 2.2 업그레이드 버전을 내놓았기 때문에 어렵지 않게 설치할 수 있었다.

안드로이드 2.2 프로요에 탑재된 Flash Player 10.1을 테스트 하기 위해 필자가 만들었던 몇가지 Flash 애플리케이션에 접속해 보았다.

아래는 실험적으로 만들어본 3D 태양계 시뮬레이터를 Papervision3D로 만든 것이다. 아래 주소로 접속할 수 있다.  마우스 드래그로 회전이 되고 방향키로 확대/축소 할 수 있다.
http://weconize.com/~blackhole/planet3d (임시 링크이다)


 

Papervision3D는 Flash Player 10부터 지원하는 3D API를 전혀 사용하지 않았다. 그럼에도 불구하고 동작하는 것을 보면 신기하다. 3D API를 적극적으로 활용한 Away3DAlternativa 3D로 만들면 훨씬 부드러운 화면을 보여줄 수 있을 것이라 판단한다.

스타플(http://starpl.com/)의 별지도(http://starpl.com/map) 에 접속해보았다.


위 화면은 hTC 디자이어, 안드로이드 2.2 프로요에서 스타플 별지도에 접속해본 모습이다.



위 화면은 웹브라우져로 본 스타플 별지도와 hTC 디자이어로 본 별지도 모습을 비교해 보았다.


 

위 동영상에서 볼 수 있듯이 부자연스럽긴 하지만 Flash 로 만들어진 별지도가 잘 동작하고 있다. 단지 웹기반으로 만들어서 버튼이 너무 작아 누르기가 불편했으며 마우스 이벤트와 터치 이벤트는 명백히 다르기 때문에 동작에 무리가 빠른다. 이런 불편함을 해소하기 위해서는 모바일을 감안한 Flash 애플리케이션을 만들어야 함을 알 수 있다.

아래 화면은 2010 남아공 월드컵을 위해 만들었던 Flash 축구 게임이다. 실행이 잘된다. 또한 사운드도 잘나왔다. 하지만 마우스 이벤트 기반으로 만들었기 때문에 터치에 대응하지 않아 실제 게임은 불가능했다. 데스크탑에서 마우스 사용과 모바일에서 터치는 엄연히 다른 사용자 반응이므로 모바일에서도 동작시키려면 그에 맞게 개발해야함을 알 수 있다.

월드컵 게임 : http://weconize.com/~blackhole/worldcup (임시링크이다.)



필자 블로그(http://blog.jidolstar.com)에 Flex 시절부터 인연이 있으신 분들은 아마도 Flex 한글화 문서(http://flexdocs.kr)를 잘 알고 있을 것이다.  여기서 제공하는 3D 게시판(http://flexdocs.kr/board)도 동작시켜보았다.




위 동영상에서 볼 수 있듯이 Flex 애플리케이션도 문제없이 돌아간다. 단지 데스크탑용이기 때문에 모바일 용에도 대응할 수 있도록 만들어야 하는 문제는 있다.


마지막으로 유명한 Flash 3D 라이브러리인 Alternativa 3D 에서 제공하는 Demo를 보고자 한다.

접속 URL : http://blog.alternativaplatform.com/en/category/3d/

 

위 동영상에서는 블로그 위에 있는 Flash 컨텐츠를 바로 스마트폰에서 볼 수 있음을 알 수 있다. 중간에 Youtube 동영상도 잘 동작한다. 참고로 동영상에 게임은 Flash로 만든 온라인 탱크 게임이다. Flash의 멀티터치 API를 이용해 게임을 즐기는 것도 가능해 짐을 보여준다. 또한 Alternativa 3D 라이브러리를 이용해 제작된 3D Flash 데모를 보여준다. 모바일 수준에서 Flash가 이런 렌더링 능력을 보여준다는 것이 대단할 따름이다. 

 

오픈 스크린 프로젝트란?
오픈 스크린 프로젝트의 슬로건은 'Singular Experience, multiple Devices'이다. 간단히 말해 웹에서 플래시를 통해 얻었던 사용자 경험을 휴대폰, 텔레비전, 그리고 다양한 전자기기에서도 동일하게 느끼도록 한다. 그러기 위해 Adobe는 자신의 스펙 및 기술적 정보를 공유하고 관련 기기업체도 이에 맞게 지원하여 서로 윈윈(Win-win)하는 프로젝트이다. 이번 구글의 안드로이드 2.2 프로요에 Flash Player 10.1가 기본 탑재된 것은 바로 이 프로젝트의 성과물이라고 할 수 있다.



오픈 스크린 프로젝트 공식 홈페이지
미국 LA Adobe MAX 2009 - 오픈 스크린 프로젝트와 플래시 플랫폼 서비스에 대해
PC-모바일 넘어 디지털 가전까지 확장
어도비-엔비디아, 플래시 플레이어 GPU 가속 협력 발표
어도비의 야심작, 오픈 스크린 프로젝트
안드로이드에서 동작하는 Flash Player 10.1 영상

 

정리하며
어도비가 Flash를 다양한 디바이스에서 동작시키기 위해 오픈 스크린 프로젝트를 진행했고 이제 그 결과물을 우리는 하나씩 볼 수 있게 되었다. 

하지만 방금 보여줬던 몇가지 동영상을 보더라도 데스크탑에서 동작하는 Flash 애플리케이션은 모바일에서 사용하기에는 너무 불편한 것은 사실이다.  그래서 디바이스의 특징(가령 데스크탑과 모바일)에 따라 Flash Player 10.1에서 제공하는 터치 및 가속센싱과 같은 API를 활용하여 사용자 경험을 극대화 하기 위한 개발자의 노력이 필요하게 되었다. 그럼에도 불구하고 개발의 약간의 불편함을 제외하고는 기존에 만들어놓은 Flash 컨텐츠를 거의 그대로 사용할 수 있다는 점은 큰 장점이 아닐 수 없다.

Flash Player 10.1 부터 제공하는 새로운 기능은 다음 링크를 참고하면 되겠다.
http://www.adobe.com/products/flashplayer/features/


최근 Apple의 정책 변경에 따라 Flash, AIR를 이용한 앱 개발에 물꼬를 틀 것으로 보인다. Adobe 기술을 이용해 이제는 아이폰, 아이패드와 같은 장치에도 애플리케이션을 배포할 수 있게 된 것이다. 사용자는 기존 다양한 Flash 컨텐츠가 안드로이드 계열의 디바이스 뿐 아니라 iOS 기반에도 탑재가 가능해짐으로써 기존 Flash 컨텐츠를 경험할 수 있는 기회가 더욱 많아졌다.


글쓴이 : 지돌스타(http:/blog.jidolstar.com/712)

이글은 Adobe RIA 공식 사이트에도 소개 되었습니다.
http://adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=546


Mac에서도 Flash Player가 H.264 비디오 디코딩 하드웨어 가속을 지원한다. 공개된 Flash Player는 코드네임이 "Gala"로 명칭되며 현재 Flash Player 다운로드 페이지에서 받을 수 있도록 되어 있다. 정식버전은 아니다.

현재 공개된 Flash Player에서는 Mac OS X 10.6.3 이상의 OS에 NVIDA GeForce 9400M, GeForce 320M, GeForce GT 330M등의 GPU 환경을 지원한다. 

Mac에서 H.264 비디오 코덱은 이미 Flash Player에서 지원하고 있었으나 하드웨어 가속은 아니였다. 그렇게 됨에 따라 많은 CPU 자원을 소비할 수 밖에 없었다. 이미 Flash Player 10.1 베타가 출시되면서 윈도우 PC나 x86기반 넷북에 설치된 Flash Player을 H.264 하드웨어 가속을 지원했다. 이제 "Gala"로 Mac 사용자도 Flash Player에서 H.264 비디오 디코딩시 하드웨어 가속을 된 것이다. 

하드웨어 가속을 지원한다는 것은 CPU를 통해 비디오를 디코딩하지 않고 GPU로 하기 때문에 훨씬 더 쾌적한 H.264 비디오를 감상할 수 있다는 것을 의미한다. 

이는 Open Screen Project의 일환으로 가능한 것이라 판단한다. GPU 가속을 하기 위해 그래픽 카드 제작회사인 Nvida와 Adobe가 이 프로젝트를 통해 Flash Player에 대한 하드웨어 가속을 지원받을 수 있게 된 것이다.
이는 Open Screen Project와는 전혀 무관한 일이였군요. 지금껏 Apple이 자신의 OS API를 열어주지 않아서였습니다. 결국 Adobe는 완전 피해자가 된 셈이네요. 역시 Apple이 플랫폼을 개방안한것을 Adobe에 덤탱이 씌운거라는...

앞으로 Open Screen Project를 통해 더욱 다양한 기기에서 이런 협력이 많이 일어날 것으로 보이며 Flash Player는 더욱 Cross Device 세계로 나갈 것으로 기대한다.

Flash Player "Gala" Preview Release : http://labs.adobe.com/technologies/flashplayer10/gala/
Adobe Labs - Flash Player 10.1 : http://labs.adobe.com/technologies/flashplayer10/

 
글쓴이 : 지돌스타(http://blog.jidolstar.com/683


Flash Player 10.1을 설치하려고 기존 Flash Player를 전부 uninstaller로 삭제한다음 Flash Player 10.1을 다운로드 받아 설치하려는데 다음과 같은 에러를 발생시키며 설치할 수 없었습니다.

설치하려고 하는 Adobe Flash Player 버전은 최신 버전이 아닙니다.

Windows 7 환경에서 인터넷 익스플로러(IE8)에 Active-x debug(개발자용) 버전을 설치가 되지 않아 하루 종일 이것까지고 씨름했습죠. 

  1. Adobe 이와 관련된 기술노트가 있어서 따라해 봤지만 안되었습니다.(관리자 권한으로 실행해도 마찬가지였습니다.)
  2. 또한 무식하게 Windows까지 새로 깔았지만 안되더군요.

그래서 마지막으로 관련 레지스트리를 삭제했습니다. 됩니다 ㅡㅡ;;;

  1. 시작 > 실행 > regedit 입력
  2. HKEY_LOCAL_MACHINE\SOFTWARE\Macromedia\FlashPlayer\SafeVersions 를 찾아 전부삭제

흑.... 어제부터 이것때문에 완전 생쑈를 했습니다. 시간 아까워.....

글쓴이 : 지돌스타( http://blog.jidolstar.com/668 )

지난 2월 2일 AIR 2.0 beta 2가 배포된데 이어 오늘(한국날짜기준 2010.02.24) Adobe Flash Player 10.1 beta 3가 배포되었습니다. Adobe Labs에 가면 상세한 정보를 보실 수 있습니다. 


릴리즈 노트의 Fixed Issues에 별표(*) 표시된 것이 이번 배포의 수정사항들입니다. 보면 기존에 있었던 Fix된 버그와 개선사항을 확인할 수 있습니다.

주의사항은 이것은 말그대로 beta라는 점입니다. beta는 정식버전이 아니기 때문에 Flash Player 10.1 API를 이용해서 개발하셔도 실제로 서비스하는 것은 안된다는 것을 의미합니다. 테스트 용도로만 설치하셔서 사용하시기 바랍니다.

글쓴이 : 지돌스타(http:/blog.jidolstar.com




원래 이런 문제가 발생하면 안되는건데... 현재 구글 크롬에서 Flash Player를 설치해도 설치되지 않은 것처럼 보여주는 버그가 있습니다. 제 컴퓨터만 그렇겠지 했는데... 회사 동료도 이런 문제가 있더군요. 허허허....

회사 동료로부터 좋은 정보를 얻게 되어 이 문제를 해결하는 방법을 소개합니다. ^^

http://blog.still.pe.kr/550

Window 7에서 하실때 권한 문제같은거 발생할 수 있는데요.
C:\Documents and Settings\[사용자 이름]\Local Settings\Application Data\Google\Chrome\Application
까지만 들어가셔서 거기에 Plugins를 폴더를 만드시면 될 것 같습니다. ^^




지난 22일에 Adobe Labs에서 Adobe Stratus 2에 대한 소개가 있었습니다.

http://labs.adobe.com/technologies/stratus/

Stratus는 RTMFP(Real Time Message FlowProtocal)이라 불리우는 통신프로토콜을 이용해 Flash Player 10이 설치된 클라이언트 까지 P2P(Peer to Peer)가 가능하게한 기술입니다. TCP가 아닌 UDP기반으로 동작하고요.

이번 Stratus 2는 Adobe Flash Player 10.1 beta, Adobe AIR 2 Beta에서 동작하도록 만들어졌습니다. 재미있게도 이번 버전에서는 애플리케이션 수준에서 멀티케스트와 소스 공급자의 로드를 줄여주는 구조를 지원하게 되었습니다. 맨 위의 그림에서 좌측 그림은 기존 Flash Player끼리 통신하기 위해 서버를 항상 거쳐야만 했었습니다. 서버입장에서는 완전 부담이죠. 그런데 중간 그림에서 볼 수 있듯이 Stratus가 나오면서 서버와는 한번의 접속으로 하고 Flash Player끼리 통신이 되었습니다. 이것도 소스 공급자인 Flash Player 입장에서는 로드가 심할 수 있습니다. 이를 Flash Player 단위에서 분산시키도록 한 것이 이번 배포의 핵심인 것 같네요.

물론 Stratus 2는 아직 베타버전인 Flash Player 10.1과 AIR 2.0에서만 동작하므로 바로 실무에 사용할 수는 없습니다. 그러나 조만간 이 기술을 사용할 수 있게 되겠죠.

Stratus 1.0에 대한 많은 실험이 국내에도 있었습니다. 저도 조금 테스트 해봤었고요.
http://blog.jidolstar.com/498 

다른 분들의 글들입니다.
플래시 P2P RTMFP에 대해(예제 파일 첨부)
[Flex] Stratus를 이용한 P2P방식의 Flash간에 1:1 다이다이 오목게임-_-
Flash로 p2p를 만들어보자 - Stratus 라이브러리
Flash로 채팅을 구현해보자.


하지만 방화벽, 공유기를 통해 접근 문제가 해결되었는지는 미지수네요.(테스트 안해봤음)
이 문제만 해결되면 정말 멋진 애플리케이션이 많이 나올거라 생각됩니다. ^^

글쓴이: 지돌스타(http://blog.jidolstar.com/651)




Adobe Stratus는 Flash Player 10이상 또는 AIR 1.5 이상에서 RTMFP(Real Time Media Flow Protocol)이라 불리우는 통신프로토콜을 이용하여 클라이언트끼리 Peer to Peer(P2P)가 가능하게한 기술이다. TCP가 아닌 UTP를 기반으로 하기 때문에 통신 속도에는 좋지만 데이타 전송에 대한 신뢰도는 떨어지지 않을까 판단한다. 이러한 이유로 Stratus는 채팅, 각종 미디어 통신, 멀티 게임등을 만드는데 적합하다고 할 수 있다. 

 

위 그림에서 볼 수 있듯이 기존 RTMP는 사용자가 서버를 통해서만 다른 사용자에게 접근이 가능했다. 하지만 Adobe Stratus에서 제공하는 RTMFP를 이용하면 처음 Staratus 서버와 접속하여 인증절차만 완료하면 Flash Player 끼리 P2P통신이 가능해진다. 이렇게 함으로서 서버의 부하를 줄일 수 있게 되었다.

필자는 Adobe에 올라온 예제를 가지고 테스트를 해봤다. 이 예제는 Adobe Stratus를 가지고 어떤 기능까지 가능한가 총체적으로 보여주는 예제이다. 단순한 채팅뿐 아니라 마이크, 스피커, 비디오 예제가 한 소스에 들어가 있다. 예제는 [여기]에서 실행해볼 수 있고 또한 다운로드 받을 수 있다. 

필자는 제공된 Stratus 예제 Flex 애플리케이션을 수정하지 않고 서버측 사용자 등록하는 코드인 reg.cgi를 PHP로만 포팅해서 테스트 해봤다. 

이것을 테스트 하기 위해 다음단계를 거친다. 

  1. Flash Player 10 이상 설치한다.
  2. Flex SDK 3.2 또는 Flash Builder 3.0.2 를 설치한다.
  3. Stratus beta 개발 키를 받는다. Adobe에 가입해야한다.
  4. 참고로 Flash Player 10 API 문서를 본다. (한글은 여기)
  5. “Stratus service for developing end-to-end applications using RTMFP in Flash Player 10” 문서를 본다. 우야꼬님이 번역한 문서는 [여기]를 참고
  6. 예제 프로그램 다운로드
  7. 질문 및 답변은 여기로

 

Stratus는 현재 Adobe측에 서버를 두고 있고 공개하고 있진 않다. 그러므로 자신의 서버에 Stratus를 설치하지는 못한다. 하지만 개발키를 부여하고 있기 때문에 “rtmfp://stratus.adobe.com/개발키” 에 접속해서 언제든지 개발은 가능하다. 아래는 개발키를 가지고 Adobe의 Stratus서버에 접속인증을 하는 예제이다.

 

private const StratusAddress:String = "rtmfp://stratus.adobe.com";
private const DeveloperKey:String = "your-developer-key";
private var netConnection:NetConnection;

netConnection = new NetConnection();
netConnection.addEventListener(NetStatusEvent.NET_STATUS,
netConnectionHandler);
netConnection.connect(StratusAddress + "/" + DeveloperKey);

 

다운로드 받은 예제에서 사용자 등록 웹서비스를 위한 reg.cgi는 python으로 만들어졌다. python에 대해서 아는바가 별로 없어서 이 코드를 PHP에서 동일하게 동작하도록 만들었다. 또한 DB는 간편하게 만들기 위해 SQLite를 이용한다. 

먼저 개인 리눅스 서버에 sqlite를 설치했다.(안녕리눅스 pkgadd를 이용해서 간편하게 설치함 ^^). 다른 환경이라면 그 환경에 맞게 설치하면 되겠다.(http://www.sqlite.org/ 에서 다운로드 받아 설치한다.)

 

# pkgadd sqlite

Zend Optimizer requires Zend Engine API version 220051025.

The Zend Engine API version 220060519 which is installed, is newer.

Contact Zend Technologies at http://www.zend.com/ for a later version of Zend Optimizer.

sqlite          : Install 성공

 

sqlite는 아래처럼 mysql과 비슷하게 사용이 가능하다.

# sqlite test.db

SQLite version 2.8.17

Enter ".help" for instructions

sqlite> create table test(idx integer);

sqlite> .table

test

sqlite> insert into test(idx) values(1);

sqlite> insert into test(idx) values(2);

sqlite> insert into test(idx) values(3);
sqlite> select * from test;

1

2

3

sqlite> .quit

 

여기서 사용할 DB를 만들기 위해 아래와 같이 원하는 폴더에 staratus_registration.db를 만들자. 만들고 그냥 저장하면 된다.

 

vi staratus_registration.db

 

아래는 만들어진 SQLite DB(staratus_registration.db )를 이용해 사용자 접속 처리를 하는 PHP(reg.php) 코드이다. 참고로 PHP 5.2 이상 환경이고 이 환경에서는 SQLite에 대한 API를 제공하고 있다.

 

<?php
	$_METHOD = $_GET; // $_GET 또는 $_POST;
    $username = $_METHOD['username'];
	$identity = $_METHOD['identity'];
	$friends = $_METHOD['friends'];

    header("Content-type:text/plain;charset=utf-8");
    header("Cache-Control: no-cache, must-revalidate");
    header("Pragma: no-cache");

	echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
	echo "<result>";

	//DB 열기
	$db = @sqlite_open('stratus_registrations.db', 0777, $error);
	if( $db )
	{
		//Table 존재 확인
		$result = @sqlite_query($db, "SELECT name FROM sqlite_master WHERE type='table' AND name='registrations'");
		$tables = @sqlite_fetch_all( $result );

		$exist_table = true;

		//테이블이 존재하지 않는다면 테이블을 생성함
		if( count($tables) == 0 )
		{
			//Table 생성
			$query = "CREATE TABLE registrations (
							m_username VARCHAR COLLATE NOCASE,
							m_identity VARCHAR,
							m_updatetime DATETIME,
							PRIMARY KEY (m_username) );
					CREATE INDEX registrations_updatetime ON registrations (m_updatetime ASC);";
			if( !@sqlite_exec($db, $query, $error) )
			{
				echo "<error>$error</error>";
				$exist_table = false;
			}
		}

		//Table이 존재하는 경우만 실행
		if( $exist_table )
		{
			//개인접속
			if( $username )
			{
				//기존 사용자 있는지 확인
				$select_query = "SELECT m_username, m_identity FROM registrations WHERE m_username = '$username'";
				$result = @sqlite_query($db, $select_query);
				$array = @sqlite_fetch_array($result);

				//사용자 추가 및 업데이트
				if( $array )
				{
					$update_query = "update registrations SET m_identity='$identity', m_updatetime=datetime('now') where m_username='$username';";
					//echo "<update_query>$update_query</update_query>";
					if( sqlite_exec($db, $update_query,  $error) )
					{
						echo "<update>true</update>";
					}
					else
					{
						echo "<update>false</update>";
						echo "<error>$error</error>";
					}
				}
				else
				{
					$insert_query = "insert into registrations (m_username, m_identity, m_updatetime) values ( '$username', '$identity', datetime('now'))";
					//echo "<insert_query>$insert_query</insert_query>";
					if( sqlite_exec($db, $insert_query, $error) )
					{
						echo "<update>true</update>";
					}
					else
					{
						echo "<update>false</update>";
						echo "<error>$error</error>";
					}
				}
			}
			//친구연결요청(1시간 동안 접속을 하지 않은 사람은 무시)
			else if( $friends )
			{
				$f = trim($friends);
				echo "<friend><user>$f</user>";
				$select_query = "SELECT m_identity from registrations where m_username = '$f' and m_updatetime > datetime('now', '-1 hour')";
				$result = @sqlite_query( $db, $select_query );
				$array = @sqlite_fetch_array($result);
				if( $array )
				{
					echo "<identity>$array[m_identity]</identity>";
				}
				echo "</friend>";

			}

		}
	}
	else
	{
		echo "<error>$error</error>";
	}

	echo "</result>";
?>

 

“http://당신의 Domain/경로/reg.php?user=jidolstar&identity=발급받은개발키” 로 접속해보자. 아래와 같이 나오면 정상이다. 이것은 처음 사용자가 접속했을때 인증하기 위한 것이다.

 

에러가 발생하면 PHP파일과 DB가 같은 폴더에 있는지 확인하고 그래도 문제가 있다면 DB를 포함하는 폴더의 권한을 777로 바꿔보자.

 

 

이번에는 http://당신의 Domain/경로/reg.php?friends=jidolstar 로 접속해보자. 아래와 같이 나오면 정상이다. 이것은 상대방이 접속요청을 할때 인증하기 위한 것이다.

 

 

다운 받은 Flex코드를 새 Flex 프로젝트를 만들어 복사한뒤 Application내에 개발키와 웹서비스 URL를 설정한뒤 실행한다.

 

// stratus address, hosted by Adobe
[Bindable] private var connectUrl:String = "rtmfp://stratus.adobe.com"; 

// developer key, please insert your developer key here
private const DeveloperKey:String = "Adobe에서 발급받은 개발키"; 

// please insert your webservice URL here for exchanging
private const WebServiceUrl:String = "http://당신의 URL/설치디렉토리/reg.php";

 

성공한다면 아래처럼 시원하게 채팅이 가능할거다. 물론 웹캠과 마이크가 있다면 더욱 완벽한 테스트가 가능하다.

 

 

필자가 못생겨서 더이상 읽고 싶지 않나? 할 수 없다. 이미 더 이상 쓸 말도 없다. ㅋ

 

참고

 

□ 개요

   o Adobe Flash Player에서 입력 검증 오류, 버퍼오버플로, 클릭재킹 등의 다수 취약점이
      발견되어 보안 업데이트가 발표됨[1]
   o 낮은 버전의 Adobe Flash Player 사용으로 악성코드 감염 등의 사고가 발생할 수 있음으로
      사용자의 주의 및 최신버전 설치가 권고됨


□ 해당프로그램

   o Adobe Flash Player 10.0.12.36 이하 버전이 설치된 Linux 제외 모든 운영체제
   o Adobe Flash Player 10.0.12.36 이하 버전 - 내부 네트워크 배포용
   o Adobe Flash Player 10.0.15.3 이하 버전이 설치된 Linux 운영체제
   o Adobe AIR 1.5 버전
   o Adobe Flash CS4 Professional에서 사용되는 Adobe Flash Player 10.0.22.87 이전버전
   o Adobe Flash CS3 Professional에서 사용되는 Adobe Flash Player / Debug Player 9.0.159.0
      이전버전
   o Adobe Flex 3에서 사용되는 Adobe Flash Debug Player 10.0.22.87 이전버전

 

□ 설명

   o Adobe Flash Player 취약점에 대한 보안 업데이트(총 5건)가 아래와 같이 발표됨
     ① Adobe Flash Player가 개체를 삭제하는 과정에서 개체에 할당된 메모리를 적절히 해제하지
         않아 발생하는 원격코드 실행 가능한 버퍼오버플로 취약점[2](CVE-2009-0520)
     ② Adobe Flash Player가 부적절하게 입력 검증하는 과정에서 발생하는 서비스 거부 취약점[3]
        (CVE-2009-0519)
     ③ Adobe Flash Player의 설정 관리자로 인한 클릭재킹 취약점[4](CVE-2009-0114)
     ④ Windows 운영체제에서 마우스 포인터를 출력할 때 발생하는 클릭재킹 취약점[5]
        (CVE-2009-0522)
     ⑤ Linux 운영체제에서 권한 상승으로 연계될 수 있는 정보 노출 취약점[6](CVE-2009-0521)
   o 상기 취약점을 이용하여 공격자는 SWF 파일을 조작하여 피해자의 PC에 악성 스크립트를
      실행시키거나 악성코드 감염 등과 같은 악성행위를 할 수 있음

 

□ 해결방안

   o 다음 표와 같은 버전의 Adobe 제품 사용자는 취약하지 않은 버전으로 업데이트 할 것을 권고함
     ※ 일부 Adobe 제품은 구글 툴바 추가 설치가 기본으로 설정되어 있으니 설치 전 확인 필요

 

   o Adobe Flash 컨텐츠를 사용하는 웹서버 관리자는 아래와 같이 웹페이지를 수정하여
      이용자들이 최신버전 Adobe Flash Player를 설치하도록 ActiveX 버전 수정 필요

< object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=10,0,22,87" width="921" height="109" >

   o 향후에도 유사 취약점 노출로 인한 피해예방을 위해 아래와 같이 안전한 브라우징 습관을
     준수해야 함
      - 신뢰되지 않은 웹사이트의 플래시 파일 다운로드 주의
      - 의심되는 이메일에 포함된 플래시 파일 링크를 방문하지 않음
      - 개인방화벽과 백신제품 사용 등

 

□ 용어 정리

   o 클릭재킹 : 사용자가 웹 페이지를 클릭 할 때 자신도 모르게 의도하지 않은 기능을 실행
      하여 공격자가 컴퓨터에 대한 제어권 혹은 중요 정보를 획득하는 취약점[12]
   o Adobe Flash CS3/CS4 Professional : Adobe Flash 애니메이션 제작을 위한 도구[13]
   o Adobe AIR(Adobe Integrated Runtime) : 이미 입증된 웹 기술을 브라우저 외부 데스크톱
      에서 실행될 수 있도록 도와주는 프로그램 제작 도구[14]
   o Adobe Flex : Adobe Flash Player 또는 Adobe AIR에서 사용할 인터넷 어플리케이션
      개발 도구[15]

 

□ 기타 문의사항

   o 한국정보보호진흥원 인터넷침해사고대응지원센터 : 국번없이 118

 

□ 참고사이트

   [1] http://www.adobe.com/support/security/bulletins/apsb09-01.html
   [2] http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2009-0520
   [3] http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2009-0519
   [4] http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2009-0114
   [5] http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2009-0522
   [6] http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2009-0521
   [7] http://www.adobe.com/go/getflash
   [8] http://www.adobe.com/products/players/fpsh_distribution1.html
   [9] http://get.adobe.com/kr/air/
   [10] http://www.adobe.com/support/flashplayer/downloads.html#fp10
   [11] http://www.adobe.com/support/flashplayer/downloads.html#fp9
   [12] http://en.wikipedia.org/wiki/Clickjacking
   [13] http://www.adobe.com/kr/products/flash/
   [14] http://www.adobe.com/products/air/
   [15] http://www.adobeflex.co.kr/aboutflex/flex.html

 

출처 : http://www.krcert.net/secureNoticeView.do?seq=-1&num=316

우야꼬의 “Flash CS4로 만드는 Adobe AIR 1.5″ 책 저자인 우야꼬 님이 Stratus에 대한 번역을 해주셨네요.

번역글 : http://wooyaggo.tistory.com/search/stratus

 

 

Stratus는 Flash Player간 RTMFP(Real-Time Media Flow Protocal)을 이용해 Peer-to-Peer 통신을 가능하게 해주는 신기술입니다. 최소한의 서버 통신을 이용해 Flash Player간에 직접적 통신이 가능하도록 하여 서버부하를 줄여줄 수 있다는데 큰 매력을 느끼게 합니다. TCP가 아닌 UDP 기반으로 통신하기 때문에 훨씬 속도가 빠르겠군요.

 

이제 Flash Player 간 인터넷전화, 메신저, 화상채팅등이 구현이 되겠군요.
지속적으로 관심을 가지고 지켜봐야할 기술임에 틀림없겠습니다.

+ Recent posts