[Flex] 동영상 화면 캡쳐후 서버에 전송하는 방법
2007/08/30 18:26
[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.
Flex의 VideoDisplay 클래스를 이용하여 재생되는 화면을 캡쳐하여 리스트화 하고 리스트된 캡쳐화면을 서버에 전송하는 프로그램을 교육용으로 만들어 보았다.
VideoDisplay를 통해 로드된 FLV 영상이 Play 할때에 총 4군데에 Que Point를 두어서 그 지점에서 자동으로 화면을 캡쳐하도록 만들었다. 캡쳐된 화면은 List컨트롤에 itemRenderer를 이용해 추가되며 캡쳐이미지를 1개 선택후 저장방식(jpg, png)을 설정후 저장하기 하면 서버로 JPG또는 PNG형태로 HttpService를 통해 POST방식으로 전송된다. 전송된 데이터는 PHP에서 POST방식으로 받고 그 파일을 지정된 디렉토리에 fwrite()함수와 base64decode()함수를 이용해 저장한다. 저장이 완료되면 php는 반환값으로 파일명을 Flex로 돌려주는데 파일명은 "자신의 아이피_마이크로타임.확장자" 형태로 온다. 그럼 Alert.show()를 통해 화면에 뜨는데 이 파일명을 복사하면 웹브라우져에서 서버에 잘 전송되었는지 확인이 가능하겠다.
서버 프로그램은 Flex와 상관없이 Java든 ASP든 어느것을 써도 상관없다. php를 잘 모르신다면 자신있는 웹언어로 만들기 바란다.
제공되는 소스로 부터 다음을 알 수 있다.
VideoDisplay를 통해 로드된 FLV 영상이 Play 할때에 총 4군데에 Que Point를 두어서 그 지점에서 자동으로 화면을 캡쳐하도록 만들었다. 캡쳐된 화면은 List컨트롤에 itemRenderer를 이용해 추가되며 캡쳐이미지를 1개 선택후 저장방식(jpg, png)을 설정후 저장하기 하면 서버로 JPG또는 PNG형태로 HttpService를 통해 POST방식으로 전송된다. 전송된 데이터는 PHP에서 POST방식으로 받고 그 파일을 지정된 디렉토리에 fwrite()함수와 base64decode()함수를 이용해 저장한다. 저장이 완료되면 php는 반환값으로 파일명을 Flex로 돌려주는데 파일명은 "자신의 아이피_마이크로타임.확장자" 형태로 온다. 그럼 Alert.show()를 통해 화면에 뜨는데 이 파일명을 복사하면 웹브라우져에서 서버에 잘 전송되었는지 확인이 가능하겠다.
서버 프로그램은 Flex와 상관없이 Java든 ASP든 어느것을 써도 상관없다. php를 잘 모르신다면 자신있는 웹언어로 만들기 바란다.
제공되는 소스로 부터 다음을 알 수 있다.
- VideoDisplay 사용법
- 볼륨조정 : VSlider를 이용해 VideoDisplay의 volumn속성을 제어한다.
- PlayHead관련 : playHead 이벤트를 받아 totalTime 및 time값을 ProgressBar에 적용한다.
- QuePoint사용법 : VideoDisplay에 QuePoint를 설정하면 특정시간에 이벤트를 줄 수 있다. QuePoint를 설정하는 방법과 QuePoint Event를 이용해 그 시간에 화면을 자동캡쳐한다.
- 상태변화 : VideoDisplay가 상태변화, 즉 play, stop같은 상태가 변화가 될때 발생하는 상태변화 이벤트의 Type을 TextArea에 표시해줘서 어떤 상태변화가 있는지 확인한다. - BitmapData를 이용한 화면 캡쳐방법
VideoDisplay는 UIComponent를 상속받았기 때문에 UIComponent를 상속받은 모든 객체는 BitmapData를 만들 수 있다. - 캡쳐된 화면을 서버로 전송하는 방법
BitmapData로 캡쳐된 화면은 JPGEncoder및 PNGEncoder를 이용하여 JPG또는 PNG형태로 변환후 데이타를 서버로 전송한다. - 전송된 이미지를 서버에 저장하는 방법
여기에 있는 예제는 PHP를 사용했다. Flex로부터 받은 이미지파일을 서버의 특정디렉토리에 저장하도록 한다.
http://flexdocs.kr/docs/flex2/langref/mx/controls/VideoDisplay.html
http://flexdocs.kr/docs/flex2/docs/00000546.html
http://flexdocs.kr/docs/flex2/langref/mx/controls/videoClasses/CuePointManager.html
http://flexdocs.kr/docs/flex2/langref/flash/display/BitmapData.html
https://www.cynergysystems.com/blogs/page/andrewtrice?entry=flex_2_bitmapdata_tricks_and
소스는 아래 링크를 통해 참고하기 바란다. 주석을 간단하게 달아놓았으니 공부하는데 도움이 될 것이라 생각한다.
ExVideo.zip글쓴이 : 지돌스타(http://blog.jidolstar.com/215)
'Adobe Flash Platform' 카테고리의 다른 글
| Flex에서 namespace를 사용하는 예제 (4) | 2007/09/05 |
|---|---|
| Adobe의 John Koch로부터 받은 이메일 (11) | 2007/09/03 |
| [Flex] 동영상 화면 캡쳐후 서버에 전송하는 방법 (0) | 2007/08/30 |
| [Flex] ExternalInterface를 이용한 Javascript와 통신 (0) | 2007/08/29 |
| flexdocs 한글화 문서 웹사이트 3D 게시판 제작 (3) | 2007/08/22 |
| flexdocs 한글화 문서 홈페이지, 통프레임으로 개선 및 디자인 수정 (0) | 2007/08/18 |
