The others

동영상(mp4) 스트리밍 서버 구축하기

Ohjeonghak 2013. 12. 13. 12:59
반응형

동영상 서버를 구축 하기 위해 오픈 소스를 이용했다

서버로 ams-0.3.0 을 사용했는데 이것의 특징은 http와 rtmp를 지원한다.

rtmp를 만들고 http로 rtmp를 감싸서 사용자에게 제공하는 방식으로 사용자가 원하는 스트리밍을 구현할 수 있다.

 

아래 주소에서 다운 받을 수 있다.

 

ams-0.3.0 

 https://code.google.com/p/annuus/

 

 

사용방법은 server.conf 파일을 노트패드++나 다른 문서 편집기를 이용하여 열어보면 http 와 rtmp 서버주소를 입력 하는 곳이 있다. 거기에 사용자가 적절히 셋팅을 하고 윈도우에서는 ams.bat을 실행하면 되고 리눅스의 경우엔 ams.sh을 실행하면 된다.

만약에 java vm이 server 가 아닌 client라면 아마 실행시 server vm을 찾을 수 없다는 에러가 출력 될 것이다.

이경우에는 리눅스의 경우 ams.sh, 윈도우의 경우 ams.bat의 내용에 -server 옵션 대신 -client로 수정하여 실행하면 된다.

 

서버 준비가 다 되었다면 이제 플레이어 부분을 준비할 차례이다 플레이어는 jwplayer나 flowplayer 등 많이 존재 하는 듯 하다. http 에서 비디오 태그로 rtmp 스트리밍을 하기엔 무리이기 때문에 사용한다.

 

 

flowplayer로 구축 방법은 rtmp를 지원하기 위한 swf 파일과 플래이어 재생을 위한 swf 파일, html파일이 필요하다.

아래 링크에서 다운 받을 수 있다.

 

flowplayer 

 http://flash.flowplayer.org/plugins/streaming/rtmp.html

 http://flash.flowplayer.org/documentation/installation/

 

개인적인 견해이지만 jwplayer 보다는 flowplayer가 더 좋은것 같았다.

jwplayer는 메일 주소를 기입하면 다운로드 받을 수 있는것 같았다. 다운로드는 아래 링크에서 받을 수 있다.

 

jwplayer

 http://www.jwplayer.com/sign-up/

 

 

jwplayer의 경우 www 디렉토리에 html, jwplayer.js, player.swf, swfobject.js 파일이 구성되어 있으면 된다.

 

아래는 jwplayer 의 html 내용이다.

<html xmlns="http:⁄⁄www.w3.org⁄1999⁄xhtml" xml:lang="ja" lang="ja">
<head>
<script type="text⁄javascript" src="jwplayer.js"><⁄script>

<⁄head>

<script src='swfobject.js'><⁄script>

<body bgcolor="#ffffff">

<div id='video'><⁄div>
<script type='text⁄javascript'>
var TempStr = {};
var UrlData = document.location.href;
UrlData = UrlData.substring(UrlData.indexOf('?'));
⁄⁄alert(UrlData);
⁄⁄parsing
TempStr = UrlData.split("?fn=");
⁄⁄alert(TempStr[1]);
var FileName=TempStr[1];

  var so = new SWFObject('play.swf','ply','470','290','9','#000000');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  ⁄⁄추가⁄⁄
  so.addParam('displayclick','fullscreen');
  so.addVariable('autostart','true');
  so.addVariable('stretching', 'uniform');
  so.addVariable("plugins","drelated-1");
  so.addVariable('repeat', 'true');
  so.addVariable('start', 0);
  ⁄⁄
  so.addVariable('file',FileName);
  so.addVariable('streamer','rtmp://주소');
  so.write('video');
<⁄script>

<⁄body>
<⁄html>

 

flowplayer의 경우 html, flowplayer.controls.swf, flowplayer.rtmp.swf, flowplayer.min.js, flowplayer.swf, style.css 이렇게 6개의 파일이 구성되면 된다.

 

아래는 flowplayer의 html 파일 내용이다.

<html>
	<head>
		<meta http-equiv="content-type" content="text⁄html; charset=UTF-8">
		<script type="text⁄javascript" src="flowplayer-3.2.12.min.js"><⁄script>

		<link rel="stylesheet" type="text⁄css" href="style.css">

		<title>Player<⁄title>

	<⁄head>
	
	<body>

			<div style="color:red;font-size:28px" id="message"><⁄div>
			<a  style="display:block;width:520px;height:330px" id="player"><⁄a>

			<script>
			
				⁄⁄get url
				var TempStr = {};
				var UrlData = document.location.href;
				
				⁄⁄url parsing
				UrlData = UrlData.substring(UrlData.indexOf('?'));
				⁄⁄alert(UrlData);
				TempStr = UrlData.split("?fn=");
				⁄⁄alert(TempStr[1]);
				var FileName=TempStr[1];
			
				var player = flowplayer("player", "flowplayer-3.2.16.swf",
					{
						clip: {
								url: 'mp4:'+FileName,
								provider: 'rtmp'
							},
							plugins: {
							rtmp: {
								url: 'flowplayer.rtmp-3.2.12.swf',
								netConnectionUrl: 'rtmp:⁄⁄주소'
								}
							}
					}
				);

		player.onFinish(function() {
			⁄⁄ alert("finished")
		})

		player.onLoad(function() {
			⁄⁄ alert("loaded")
		})

		player.onStart(function() {
			⁄⁄ alert("started")
		})
		<⁄script>

	<⁄body>

<⁄html>

 

서버를 작동시키고 스트리밍을 확인 하는 방법은 html의 내용을 보면 파악 할 수 있을 것이다.

http://주소/html파일이름.html?fn=파일이름.mp4

 

반응형