[펌]FMS (Flash Media Server)를 이용한 실시간 방송 영상편집

FMS(Flash Media Server)와 FME(Flash Media Encoder)를 이용한 실시간 영상 송출 Windows WMS

2009/11/18 11:56

복사 http://blog.naver.com/webman21/10074289324

원본:http://blog.naver.com/roketbal/90062896911

로봇에 달린 카메라를 웹상에서 실시간으로 볼 필요가 있어서 작업에 들어갔습니다.

FMS 3.5버전과 FME 3 버전을 설치합니다.

https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en%5Fus&product=flashmediaserver

무료버전인 Flash media development server는 FMS의 모든 기능을 사용할 수 있습니다. 단, 연결 수가 10개로 제한되죠.

 

http://www.adobe.com/products/flashmediaserver/flashmediaencoder/

FME는 그냥 무료입니다. 웹켐이나 TV수신카드 같은 각종 장비에서 나오는 영상을 실시간으로 인코딩해서 FMS서버로 전송하는 프로그램입니다.

 

FMS나 FME는 사용자 층도 별로 없고...  제대로 된 사용방법이나 강좌도 찾기 힘들더군요. 검색해도 자세히 나와있는 곳도 없구요.

웹에서 단편적인 정보들을 얻어서 실제로 구현한 내용을 정리해서 올립니다.

 

FMS서버를 구동합니다. 아래는 테스트용으로 작성한 웹페이지 입니다.

---------------------------------------------------------------------------------------------------------------------

<object width='640' height='377' id='videoPlayer' name='videoPlayer' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' >
     <param name='movie' value='video/videoPlayer.swf' />
     <param name='quality' value='high' />
     <param name='bgcolor' value='#000000' />
     <param name='allowfullscreen' value='true' />
     <param name='flashvars' value= '&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&DS_Status=true&streamType=vod&autoStart=true&serverURL=rtmp:/vod/mp4:Hexaterium.f4v'/>
     <embed src='video/videoPlayer.swf' width='640' height='377' id='videoPlayer' quality='high' bgcolor='#000000' name='videoPlayer' allowfullscreen='true' pluginspage='http://www.adobe.com/go/getflashplayer'   flashvars='&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&DS_Status=true&streamType=vod&autoStart=true&serverURL=rtmp:/vod/mp4:Hexaterium.f4v' type='application/x-shockwave-flash'>
     </embed>
    </object>

--------------------------------------------------------------------------------------------------------------------------

<FMS Install Path>\webroot\vod폴더에 flv나 mp3, mp4파일을 넣고 위 코드를 넣어줍니다.

<embed src='video/videoPlayer.swf' 이 부분을 webroot로부터 샘플 플레이어 파일이 있는 경로로 지정해줍니다. 표시된 경로는 제 환경에 맞게 수정된 코드입니다.

샘플 플레이어는 FMS에서 제공해주죠. FMS 샘플 스타트 페이지에서 소스코드를 확인할 수 있습니다.

FMS에서 스트리밍하는 동영상은 기본적으로 실행할 수 있는 플레이어가 없기때문에 주로 플래시 형태로 사용자에게 제공합니다. 사용자는 컴퓨터에서 플래시만 재생할 수 있다면 따로 동영상 플레이어를 설치할 필요가 없죠.

 

serverURL=rtmp:/vod/mp4:Hexaterium.f4v 이 부분에서 주의할 점이, flv파일은 파일명 그대로, mp3파일은 mp3:, mp4파일은 mp4:를 붙여줘야합니다.

그리고 또 한가지, FMS의 문제인지, 샘플 플레이어의 문제인지 모르겠지만 mp4로 인코딩된 동영상은 확장자가 f4v여야 동작을 하더군요.

 

FMS로 vod 송출은 해결했는데 카메라 영상을 live로 보내는게 쉽지가 않았습니다.

 

먼저, FME에서 막혔습니다. 영상 송출을 시작하려는데 왠 user랑 password 입력하라는 창이 뜨더니 FMS 설치할 때 입력한 계정을 넣으니 user not found... 뭐지? -_- FMS를 껐다 켰다 사용자를 추가했다 지웠다 컴을 재부팅 했다가 별 짓을 해도 안되더군요.

 

 

디폴트 설정에서 Save to File만 해제했습니다. 파일로 영상을 남길 필요가 없다면 체크를 없앱니다.

 

Start를 하려면 connect를 해야하고, conect를 누르니까

 

여기서 user not found... FMS만들 때 설정한 사용자와 비번으로는 아무리해도 연결이 안되더랬습니다.

 

해법은 구글링... 구글링...

어느 외국 사이트에서 찾았습니다. MFS가 설치된 곳의 conf폴더에서 users.exe파일을 콘솔로 실행. users add -u <username> -p <password> 입력으로 사용자를 만들어줍니다.

 

이렇게 만든 사용자는 Flash Media administration console에서는 표시가 안되더군요...

다시 connect할 땐 위의 콘솔창에서 생성해준 계정으로 접속합니다.

뭐 어쨌든 이건 넘어갔습니다.

 

다음 고개는 URL문제.. FME에 디폴트로 있는 url로 연결을 하려니 안되더군요.. 이것 때문에도 삽질을 많이 했죠.

FMS 3.5에서는 FMS가 설치된 곳의 webroot가 웹 서버의 루트 폴더가 됩니다. 이 위치에서 기본 vod가 있죠.

 

vod 폴더의 위치는 <FMS Install Path>\webroot\vod

 

라이브폴더의 위치는 <FMS Install Path>\webroot\live_recorded 입니다.

 

이게 설정이 다르게 되어있죠. 라이브 폴더 안에 있는 readme.htm문서를 참고했습니다.

 

FMS가 설치된 곳의 conf폴더에서 fms.ini파일을 엽니다. LIVE_DIR = 라고 적힌 곳을 찾아서 아래와 같이 바꿔줍니다.

 

   LIVE_DIR = <FMS Install Path>\application\live      이걸

-> LIVE_DIR = <FMS Install Path>\webroot\live_recorded 이렇게 바꿉니다.

 

자, 하라는 대로 했으니 이제 ....안되네요 ㅠㅠ 삽질의 연속입니다.

 

또 구글링... 구글링...

 

---------------------------------------------------------------------------------------------------------

이제 서버에 FMS2를 설치합니다. 기본 설치 과정의 설명은 생략합니다. FMS2는 http://www.adobe.com/products/flashmediaserver/에서 개발자버전을 다운로드 할 수 있습니다. 기본적으로 FMS2는 SSAS(Server-Side Action Script)로 제어하므로 SSAS에 대해 조금의 지식이 필요합니다만, 그냥 여기서는 이미 만들어진 SSAS, 즉 asc파일을 이용하겠습니다. 만약 여러분의 PC에 Dreamweaver CS3나 Flash 8 또는 Flash CS3가 설치되어있다면, 다음의 경로에서 main.asc파일을 가져다 쓸 수 있습니다.

 

드림위버CS3 :\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Templates\Video_Player

 

플래시 : \Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Components\FLVPlayback 

[출처] Live streaming FMS2 with TV Capture card|작성자 하이구레

--------------------------------------------------------------------------------------------------------------------------

블로그를 검색해서 찾았군요. 출저는 저기.

설명에 나와있는대로 main.asc파일을 <FMS Install Path>\webroot\live_recorded에 넣어줍니다.

이제 영상 송출이 되는군요.

webroot폴더 안에 바로 live_recorded폴더가 있는데도 live를 앞에 붙여줘야되더군요.

- 나중에 발견한 겁니다만, live_recorded를 붙이지 않고 rtmp://localhost/live만 적어줘도 되네요.

이때는 rtmp 주소가 rtmp://localhost/live/livestream이 되겠죠.

아래는 샘플 웹페이지로 영상이 들어오는지 확인해본 화면입니다.

adobe에서 제공하는 샘플 페이지에서는 확인이 되는데 저런 플레이어는 필요가 없죠.

FMS admin 페이지에서 라이브 영상이 돌아가는걸 확인할 수 있습니다.

 

vod를 재생할 때 썼던 샘플 플레이어에서는 라이브 방송이 재생이 안되는군요. 뭐, 당연한 얘긴가요?

 

하여, 직접 플래시로 플레이어를 제작합니다. ㅠㅠ

플래시를 잠깐 건드려본지가... 근 10년이 다되어가는군요. 플래시 CS3를 사용합니다. 30일은 무료로 쓸 수 있네요.

Action Script 3.0 기준으로 설명하겠습니다.

fla파일을 새로 만들고  콤포넌트 창을 열어서 FLVPlayBack컴포넌트를 흰 배경으로 드래그해서 추가시킵니다. 컴포넌트의 이름은 myFLVPlayback으로 지정해줬습니다.

매개변수(parameter)창에서 source부분에 rtmp 경로를 적어줍니다.

주소를 적는 창에서 체크는 모두 해제합니다.

이제 첫 번째 프레임에서 액션 창을 열고 아래 한 줄을 추가해줍니다.

myFLVPlayback.isLive=true;

 

publishing 하기 전에 먼저 제작 미리보기 - flash 로 돌아가는지 확인해봅시다.

잘 돌아가는군요.

 

publishing 해서 실행시키면 에러가 뜹니다. swf파일에서 인터넷 소스로 접근하는게 막혀있죠.

에러 메시지가 뜬 창에서 설정을 눌러 해당 swf파일을 등록해주면 됩니다.

 

 

웹 서버에서 swf파일을 사용해 돌린 상태입니다.

publishing 할 때 같이 생성되는 스킨 swf파일과 js파일을 잘 챙깁니다.

같이 생성되는 html파일의 소스코드를 보면 플래시를 실행시키는데 필요한 코드가 있으니까 참고해서 쓰면 되고요,

 

여기까지 도달하는데 꽤 오래걸렸습니다.

...삽질의 연속.

 

FMS가 3. 버전으로 오면서 가격이 많이 착해졌다고 하네요. 그래도 일반인이 구입하기엔 -_-

연결 제한이 10개까지니까 테스트용이나 사용자가 몇 안되는 시스템에서 사용하기엔 좋을거 같네요.

전 로봇용으로 쓰려고 손을 댔습니다만, fms live로 몇 몇 사람들에게 인터넷 방송을 한다거나 간단한 vod를 스트리밍한다든지 여러방면으로 활용할 수 있을것 같습니다.