KR20180086112A

KR20180086112A - 웹 브라우저에서 미디어를 재생하고 탐색하는 장치 및 방법

Info

Publication number: KR20180086112A
Application number: KR1020170087651A
Authority: KR
Inventors: 송병인; 정승원; 김도현; 박미주
Original assignee: 한화에어로스페이스 주식회사
Priority date: 2017-01-20
Filing date: 2017-07-11
Publication date: 2018-07-30
Also published as: KR101942269B1; KR20180086113A; KR101942270B1; KR20180086114A; KR101986995B1; KR20180086115A; KR101931514B1

Abstract

본 발명은 HTML5를 지원하는 웹 브라우저에서 플러그인 없이 미디어를 프레임 단위로 탐색하는 장치 및 발명에 관한 것이다. HTML5의 비디오 태그 API는 시간을 기준으로 미디어를 탐색(seek)하기 때문에 프레임 단위 탐색에는 적합하지 않다. 본 발명에서는 자바스크립트로 구현한 디코더를 사용하여 프레임 단위로 디코딩을 수행함으로써 프레임 단위의 미디어 탐색이 가능하게 한다. 또한 미디어 탐색에 있어 양방향 버퍼를 사용하여 탐색 방향이 바뀌더라도 추가적인 버퍼링이 요구되지 않도록 한다.
본 발명을 이용하면 비디오 시퀀스의 최소 단위인 프레임 단위로 미디어 탐색이 가능하므로 사용자에게 가장 정밀한 미디어 탐색 환경을 제공하는 것이 가능하다. 또한 본 발명은 프레임 단위 탐색 시 탐색 방향을 바꾸더라도 추가적인 버퍼링이 요구되지 않으므로 최소한의 메모리 사용으로 넌 플러그인(non-plugin) 환경에 적합하게 가볍고 안정적인 미디어 탐색이 가능하다.

Description

웹 브라우저에서 미디어를 재생하고 탐색하는 장치 및 방법{Apparatus and method for playing back and seeking media in web browser}

본 발명은 미디어 탐색방법에 관한 것으로서, 보다 상세하게는 HTML5를 지원하는 웹 브라우저에서 플러그인 없이 자바스크립트로 구현된 디코더를 이용하여 미디어를 프레임 단위로 탐색하는 방법에 관한 것이다.

미디어 데이터를 사용자가 인터넷을 통해 웹 브라우저에서 재생하기 위해서, 코덱(code) 디코더(decoder) 및 렌더러(renderer)를 네이티브 코드(native code)로 작성한 플러그인을 이용하는 방법이 알려져 있다. 이러한 웹 브라우저 플러그인으로는 대표적으로 ActiveX와 NPAPI가 사용되고 있다.

ActivieX는 마이크로소프트(MicroSoft)가 COM(Component Object Model)과 OLE(Object Linking and Embedding) 두 개의 기술을 합쳐서 개발한 것을 말한다. 하지만 대개 좁은 의미로 웹 브라우저인 인터넷 익스플로러(Internet Explorer)에서 애드온(add-on)의 형태로 사용되는 ActiveX Control을 말한다. ActiveX는 인터넷 익스플로러 웹 브라우저에서 미디어를 재생하는데 사용된다.

NPAPI는 Netscape 시절에 개발된 API로 인터넷 익스플로러의 ActivieX와 기능이 유사하다. 초기 웹 환경이 열악할 때, 웹 브라우저의 기능을 강화하기 위하여 외부 응용프로그램을 플러그인 형식으로 끌어 쓰기 위해 제공된 API이다. 즉, 초기 웹 페이지에서 음악이나 동영상을 재생하기 위해 개발된 것으로, 자바의 애플릿(Applet), 어도비(Adobe)의 플래시(Flash), 리얼 플레이어 등이 있다.

하지만 플러그인은 해커들이 악성 코드를 배포하는 통로로 사용되면서, 웹 브라우저 업체들이 더 이상 지원을 하지 않는 추세다. NPAPI의 경우 크롬(Chrome)을 제작하여 배포하는 구글에서 크롬 45 버전 이후로는 더 이상 NPAPI의 지원을 하고 있지 않으며, ActiveX의 경우 마이크로소프트에서 윈도우 10의 기본 브라우저로 사용되는 엣지(Edge) 버전부터는 더 이상 ActivieX의 지원을 하고 있지 않다.

플러그인 없이 웹 브라우저에서 미디어를 재생하기 위한 방법으로 HTML5 MSE(Media Source Extensions)에서 지원하는 프로토콜인 MPEG-DASH를 이용하여 미디어를 전송하고 HTML5의 비디오 태그를 이용하여 디코딩 등을 수행하는 방법이 있다. 비디오 태그는 웹 브라우저에서 플러그인 없이 미디어를 재생할 수 있는 환경을 제공한다.

비디오 태그는 웹 브라우저에서 네이티브(native)로 제공되기 때문에 웹 브라우저가 가진 다른 기술인 자바스크립트나 CSS 등과도 자연스럽게 융화가 가능하다. 비디오 태그는 자바스크립트에서 접근할 수 있는 다양한 프로퍼티들을 제공하고, 사용자는 자바스크립트와 HTML5 비디오 태그를 통해 미디어 재생의 다양한 기능을 구현하는 것이 가능하다. 예를 들어, 미디어의 로딩, 재생, 일시정지, 재생속도 변환 등이다.

또한, 미디어를 탐색(seeking)하는 기능도 구현 가능한데, 이를 위해 비디오 태그의 currentTime 프로퍼티가 주로 사용된다. currentTime 프로퍼티는 재생 중인 미디어의 현재 위치를 얻을 수 있는 프로퍼티로, currentTime을 설정하는 것을 통해 미디어를 탐색하는 것이 가능하다. 예를 들어, currentTime 값에 currentTime+10을 설정하면 현재 재생 시점의 10초 이후의 영상으로 이동될 수 있다.

한편, 미디어 탐색에서 미디어의 재생을 특정 시점에 정지시키는 기능은 timeUpdate 이벤트를 추가로 사용하여 구현 가능하다. timeUpdate 이벤트는 미디어의 재생 위치가 변경되는 경우 발생한다. 즉 currentTime 프로퍼티에서 시간이 업데이트 되는 경우 발생하는 것인데, 이 이벤트의 빈도는 시스템 부하에 따라 다르지만 약 4Hz와 66Hz 사이에서 발생한다. 따라서 사용자는 timeUpdate 이벤트를 통해 250ms의 최소 단위로 원하는 정지 영상을 획득할 수 있다.

이상과 같이, HTML5의 비디오 태그는 플러그인 없이도 높은 재생 성능으로 웹 브라우저 상에서 미디어를 재생하고 탐색하는 다양한 기능들을 제공하고 있다. 그러나, 이러한 방식은 프레임 단위의 세밀 탐색에는 적합하지 않다. 비디오 태그는 기본적으로 복수의 프레임들을 패키징한 컨테이너(container) 단위로 미디어를 수신하여 디코딩을 수행하기 때문에 사용자가 프레임 단위의 탐색을 요구할 때 250ms 이상의 시간 간격이 발생한다.

따라서, 웹 브라우저 상에서 플러그인 없이 미디어 스트림을 재생함과 동시에, 사용자로부터 탐색 요청이 있는 경우 프레임 단위로 세밀한 탐색을 가능하게 하는 기술이 고안될 필요가 있다.

미국특허등록 제9247317호

본 발명이 해결하고자 하는 과제는, 플러그인 및 비디오 태그의 API 사용 없이 프레임 단위로 미디어 탐색이 가능한 방법을 제공하는 것이다.

본 발명이 해결하고자 하는 다른 과제는, 현재 재생시점 이후의 미디어만을 버퍼링하는 단방향 버퍼로 인해 미디어 탐색의 방향을 현재 재생시점 이전으로 전환할 경우 또다시 버퍼링을 수행해야 하는 문제를 해결하는 것이다.

본 발명의 과제들은 이상에서 언급한 과제로 제한되지 않으며, 언급되지 않은 또 다른 과제들은 아래의 기재로부터 당업자에게 명확하게 이해될 수 있을 것이다.

상기 과제를 해결하기 위한 본 발명의 실시예에 따른 웹 브라우저에서 미디어를 재생하는 미디어 재생 장치는, 미디어 서비스 장치에서 생성된 미디어 데이터를 웹 서비스를 지원하는 통신 프로토콜을 이용하여 수신하는 수신부; 웹 브라우저에 임베드 된 디코더에 의해 상기 수신된 미디어 데이터를 디코드하도록 구성되는 제1 미디어 복원부; 웹 브라우저가 파싱(parsing)할 수 있는 스크립트로 작성된 디코더에 의해 상기 수신된 미디어 데이터를 디코드하도록 구성되는 제2 미디어 복원부; 상기 수신된 미디어 데이터에 대한 제어 명령을 사용자로부터 입력받도록 구성되는 사용자 인터페이스; 및 상기 제어 명령이 재생 명령이면 상기 제1 미디어 복원부가 상기 수신된 미디어 데이터를 디코드하도록 제어하고, 상기 제어 명령이 탐색 명령이면 상기 제2 미디어 복원부가 상기 수신된 미디어 데이터를 디코드하도록 제어하는 디코드 컨트롤러를 포함할 수 있다.

상기 과제를 해결하기 위한 본 발명의 실시예에 따른 실시간 라이브 비디오 또는 저장된 비디오를 상기 미디어 재생 장치에 실시간으로 전송하는 미디어 서비스 장치로서, 상기 실시간 라이브 비디오 또는 저장된 비디오를 상기 미디어 재생 장치의 웹 브라우저 상에서 재생하기 위해 필요한, 상기 웹 브라우저가 파싱(parsing)할 수 있는 스크립트 모듈을 저장하는 모듈 저장부; 상기 미디어 재생 장치의 접속에 응답하여 상기 스크립트 모듈을 상기 미디어 재생 장치에 전송하는 모듈 전송부; 상기 실시간 라이브 비디오 또는 저장된 비디오를 패킷화하여 전송 패킷을 생성하는 패킷화부; 및 상기 재생 장치와의 통신 세션을 형성하며, 상기 미디어 재생 장치로부터의 제어 명령에 따라, 상기 전송 패킷을 상기 미디어 재생 장치에 전송하는 웹 서버를 포함하되, 상기 스크립트 모듈은, 상기 미디어 재생 장치로부터 수신되는 제어 명령이 재생 명령인지 탐색 명령인지에 따라, 상기 미디어 재생 장치에서 실행되는 복수의 비디오 디코더 중에서 서로 다른 디코더에 의해 상기 전송 패킷을 디코드 하도록 제어하는 프로세스를 포함할 수 있다.

본 발명의 기타 구체적인 사항들은 상세한 설명 및 도면들에 포함되어 있다.

본 발명의 실시예들에 의하면 적어도 다음과 같은 효과가 있다.

본 발명은 플러그인의 사용 없이 미디어를 프레임 단위로 탐색하는 것을 가능하게 하므로 보안에 적합하며 웹 브라우저에서 플러그인이 배제되고 있는 추세에도 부합한다.

본 발명을 통해 사용자는 비디오 시퀀스의 최소 단위인 프레임 단위로 영상을 탐색하는 것이 가능하다. 즉 최고의 정밀도로 미디어를 탐색하는 것이 가능하므로 세밀한 영상 분석이 요구되는 영상감시시스템 등과 같은 분야에서 본 발명의 유용성이 극대화된다.

본 발명은 프레임 단위 탐색 시 탐색 방향을 바꾸더라도 추가적인 버퍼링이 요구되지 않는다. 따라서 최소한의 메모리 사용으로 넌 플러그인(non-plugin) 환경에 적합하게 가볍고 안정적인 미디어 탐색이 가능하다.

본 발명에 따른 효과는 이상에서 예시된 내용에 의해 제한되지 않으며, 더욱 다양한 효과들이 본 명세서 내에 포함되어 있다.

도 1은 미디어 재생 및 탐색을 위한 전체 시스템의 일 실시예를 나타낸다.
도 2는 기기들 간의 통신을 위해 계층적으로 정의되는 TCP/IP 4계층 모델을 보여주는 도면이다.
도 3은 미디어 서비스 장치(110)와 미디어 재생 장치(120)간의 웹소켓 연결이 이루어지는 과정을 나타낸다.
도 4는 웹소켓 연결을 통한 데이터의 송수신 과정의 일 예를 보여준다.
도 5는 네트워크 인터페이스(21)를 통해 전송되는 통신 패킷의 구조를 도시한 도면이다.
도 6은 미디어 서비스 장치(110)의 구성의 일 실시예를 나타낸다.
도 7은 미디어 서비스 장치(110)의 구성의 다른 실시예를 나타낸다.
도 8은 모듈 저장부(115)의 스크립트 모듈의 일 실시예를 나타낸다.
도 9는 모듈 저장부(115)의 스크립트 모듈의 다른 실시예를 나타낸다.
도 10은 미디어 재생 장치(120)의 일 실시예를 나타낸다.
도 11은 미디어 재생 장치(10)의 다른 실시예를 나타낸다.
도 12는 프레임 버퍼(123)와 버퍼리스트(151)의 일 실시예를 나타낸다.
도 13은 사용자 인터페이스(132)에 포함되는 GUI(211)의 일 실시예를 나타낸다.
도 14는 사용자의 입력에 따른 미디어 재생 장치(120)의 작동 과정을 나타낸다.
도 15는 본 발명의 일 실시예에 따른 자바스크립트로 구현된 스크립트 모듈을 생성하는 과정을 설명하기 위한 예시도이다.
도 16은 미디어 재생 장치(120)를 구현하기 위한 컴퓨팅 장치(400)의 예시도이다.

본 발명의 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 상세하게 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 그러나 본 발명은 이하에서 개시되는 실시예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있으며, 단지 본 실시예들은 본 발명의 개시가 완전하도록 하고, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 발명은 청구항의 범주에 의해 정의될 뿐이다. 명세서 전체에 걸쳐 동일 참조 부호는 동일 구성 요소를 지칭한다.

다른 정의가 없다면, 본 명세서에서 사용되는 모든 용어(기술 및 과학적 용어를 포함)는 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 공통적으로 이해될 수 있는 의미로 사용될 수 있을 것이다. 또 일반적으로 사용되는 사전에 정의되어 있는 용어들은 명백하게 특별히 정의되어 있지 않는 한 이상적으로 또는 과도하게 해석되지 않는다.

본 명세서에서 사용된 용어는 실시예들을 설명하기 위한 것이며 본 발명을 제한하고자 하는 것은 아니다. 본 명세서에서, 단수형은 문구에서 특별히 언급하지 않는 한 복수형도 포함한다. 명세서에서 사용되는 "포함한다(comprises)" 및/또는 "포함하는(comprising)"은 언급된 구성요소 외에 하나 이상의 다른 구성요소의 존재 또는 추가를 배제하지 않는다.

이하, 첨부된 도면을 참조하여 본 발명의 바람직한 실시예를 상세히 설명하기로 한다.

도 1은 미디어 재생 및 탐색을 위한 전체 시스템의 일 실시예를 나타낸다. 도 1의 전체 시스템은 미디어 서비스 장치(110)와 미디어 재생 장치(120) 및 두 장치를 연결하는 네트워크(430)로 이루어진다.

미디어 서비스 장치(110)는 하나 이상의 영상 재생 장치들에 대해 컴퓨팅 서비스를 제공할 수 있도록 적합한 컴퓨팅 또는 프로세싱 장치를 포함한다. 예를 들면, 미디어 서비스 장치(110)는 네트워크 카메라, 네트워크 비디오 레코더(NVR), 디지털 비디오 레코더(DVR) 등과 같이 영상 스트림을 생성하거나 저장하며 사용자 기기들에 전송할 수 있는 장치를 포함한다.

미디어 재생 장치(120)는 네트워크를 통해 미디어 서비스 장치(110)나 다른 컴퓨팅 사용자 기기들과 상호작용할 수 있도록 적합한 컴퓨팅 또는 프로세싱 장치를 포함한다. 예를 들면, 미디어 재생 장치(120)는 데스크톱 컴퓨터, 모바일 전화 또는 스마트폰, PDA(personal digital assistant), 랩톱 컴퓨터 및 타블릿 컴퓨터를 포함할 수 있다.

미디어 서비스 장치(110)에 의해 실시간 촬영 또는 저장된 미디어는 미디어 재생 장치(120)의 요청에 의해 네트워크(430)를 통해 전송된다. 사용자는 미디어 재생 장치(120)의 웹 브라우저(210)상에 구현된 사용자 인터페이스를 통해 전송된 미디어를 재생 또는 탐색하는 것이 가능하다. 이때, 웹 브라우저(210)는 구글 크롬, 마이크로소프트 익스플로러, 모질라의 파이어폭스, 애플의 사파리 등, 데스크톱 컴퓨터나 모바일 전화에 탑재되는 일반적으로 알려진 브라우저를 포함할 뿐만 아니라, 웹 브라우저의 리소스나 API를 이용하여 별도로 제작된 소프트웨어 어플리케이션까지 포괄 한다.

이하 도 2 내지 도 5를 통해 미디어 서비스 장치(110)와 미디어 재생 장치(120)사이의 네트워크 통신 방식인 웹소켓 상에서 전송되는 RTSP/RTP 프로토콜을 설명한다.

도 2는 기기들 간의 통신을 위해 계층적으로 정의되는 TCP/IP 4계층 모델을 보여주는 도면이다. 4계층은 네트워크 인터페이스 계층(21), 인터넷 계층(22), 전송 계층(23) 및 어플리케이션 계층(24)으로 이루어져 있다. 웹소켓 상에서 전송되는 RTSP/RTP 프로토콜에서 웹소켓 연결은 전송 계층(23) 연결의 상부에 위치하므로, 웹소켓 연결을 사용하기 위해서는, TCP 전송 연결이 미디어 서비스 장치(110)와 미디어 재생 장치(120) 사이에서 먼저 수립되어야 한다. 일단 웹소켓 연결이 예를 들어, 3-way 핸드쉐이크(hand-shake) 과정을 통해 미디어 서비스 장치(110)와 미디어 재생 장치(120)간에 수립되면, 웹소켓 통신은 웹소켓 패킷들을 전송함에 의해 수행된다. 웹소켓 연결 및 웹소켓 패킷은 이하 도 3 내지 도 5를 통해 자세히 설명한다.

도 3은 미디어 서비스 장치(110)와 미디어 재생 장치(120)간의 웹소켓 연결이 이루어지는 과정을 나타낸다. 미디어 재생 장치(120)는 미디어 서비스 장치(110)에 웹소켓 URI를 사용하여 웹소켓 연결을 개시하는 요청을 한다. 웹소켓 URI는 GetServiceCapabilities 명령을 사용하면 획득이 가능하다. 웹소켓 URI는 예를 들어 "ws://192.168.0.5/webSocketServer"와 같은 방식으로 표현된다(S1000).

미디어 재생 장치(120)는 미디어 서비스 장치(110)에 웹소켓 업그레이드 요청을 한다. 미디어 서비스 장치(120)는 프로토콜 전환 요청에 대해 승인한다는 상태코드인 101 코드로 응답한다(S1100).

미디어 서비스 장치(110)와 미디어 재생 장치(120)간에 웹소켓 연결이 이루어진 후부터는 HTTP/1.1 프로토콜이 아닌 웹소켓 상에서 전송되는 RTSP/RTP 프로토콜로 데이터를 주고받는다. 도 3의 DESCRIBE, SETUP, PLAY, PAUSE, TEARDOWN 은 RTSP의 명령어이다. DESCRIBE 요청에는 URL이 포함된다. DESCRIBE에 대한 응답 메시지에는 요청한 것에 대한 설명도 포함된다. SETUP 요청은 단일 미디어 스트림이 전송되어야 하는지 규정한다. PLAY 요청은 하나 또는 모든 미디어 스트림을 재생시키는 요청으로 다중 요청이 가능하다. PAUSE 요청은 하나 또는 모든 미디어 스트림에 대해서 일시 중지를 명령한다. PLAY 요청으로 다시 재시작 할 수 있다. TEARDOWN 요청은 세션을 종료하기 위한 명령어이다. TEARDOWN 요청에 의해 모든 미디어 스트림의 재생을 중단하고 관련 데이터에 걸린 모든 세션도 해제한다(S1200).

도 3에 도시된 웹소켓 연결 과정에서 미디어 재생 장치(120)에서 보내는 요청 메세지와 미디어 서비스 장치(110)의 응답 메세지의 예는 다음의 표 1에 기재된 바와 같다.

미디어 재생 장치(120) -> 미디어 서비스 장치(110)
GET /webSocketServer HTTP/1.1
Host: 192.168.0.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: rtsp.onvif.org
Sec-WebSocket-Version: 13.

미디어 서비스 장치(110) -> 미디어 재생 장치(120)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: rtsp.onvif.org

이러한 웹소켓 연결은 HTML5 표준인 웹소켓 프로토콜에 따라 이루어진다. 특히, 웹소켓 연결은 양방향 통신을 지속적으로 지원하기 때문에, 미디어 서비스 장치(110)와 미디어 재생 장치(120)간에 연결이 끊기지 않고 계속적으로 데이터를 송수신할 수 있도록 할 수 있다.

도 4는 웹소켓 연결을 통한 데이터의 송수신 과정의 일 예를 보여준다. 도 4를 참조하면 먼저, 미디어 재생 장치(120)는 미디어 서비스 장치(110)에 TCP/IP 연결 요청 메시지(TCP/IP connection request)을 전송하고, 미디어 서비스 장치(110)가 이를 수락하여 TCP 응답 메시지(SYN-ACK)를 미디어 재생 장치(120)에 전송하면 TCP/IP 연결이 수립된다. TCP 전송 연결은 로컬 TCP 소켓 및 원격 TCP 소켓의 페어(pair)에 의해 형성될 수 있는데, 각각의 TCP 소켓은 적어도 포트 번호와 IP 주소와 같은 식별자에 의하여 정의된다. 물론, 이러한 TCP/IP 기반의 연결 대신에 양자간에 UDP/IP 기반의 연결을 수립할 수도 있다.

이 후, 미디어 재생 장치(120)와 미디어 서비스 장치(110) 간에 핸드쉐이크 과정을 통해 양자간에 웹소켓 연결이 수립되면, 그 이후에는 양자간의 지속적인 데이터의 송수신이 가능해진다. 즉, 미디어 재생 장치(120)는 미디어 서비스 장치(110)에 미디어 스트리밍 요청을 전송 웹소켓 패킷(socket.send)의 형태로 전송하고, 미디어 서비스 장치(110)는 미디어 재생 장치(120)에 미디어 스트림을 응답 웹소켓 패킷(socket.onMessage)의 형태로 전송한다. 이러한 과정은 미디어 스트림 전송이 중지되거나 완료될 때까지 지속적으로 양자간에 이루어질 수 있다.

도 5는 네트워크 인터페이스(21)를 통해 전송되는 통신 패킷의 구조를 도시한 도면이다. 데이터(45)에 해당하는 RTP 페이로드에 RTP 헤더(44)가 부가 되면 RTP 패킷이 된다. RTP 패킷은 웹소켓 페이로드와 같으며 여기에 웹소켓 헤더(43)가 부가되어 웹소켓 패킷이 된다. 웹소켓 패킷은 TCP 페이로드와 같고 여기에 TCP 헤더(42)가 부가되어 TCP 패킷이 된다. 마지막으로 TCP 패킷은 IP 페이로드와 같고 여기에 IP 헤더(41)가 부가되면 최종적으로 통신 패킷, 즉 IP 패킷이 완성된다. 이와 같이 IP 패킷을 완성하는 과정 및 각각의 헤더를 제거하는 과정은 미디어 서비스 장치(110)와 미디어 재생 장치(120)에서 수행된다.

미디어 서비스 장치(110)와 미디어 재생 장치(120)간의 통신은 전술한 HTML5 기반의 웹소켓 프로토콜을 통해 이루어지기 때문에, RTSP/RTP 송수신 제어를 담당하는 모듈 및 디코더는 HTML5에서 파싱이 가능한 스크립트 코드에 의해 구현될 수 있다. 따라서, 종래와 같이 플러그인을 별도로 설치하지 않고도 RTSP/RTP 프로토콜을 이용한 미디어 재생이 HTML5 환경의 웹 브라우저 내에서 구현될 수 있다.

지금까지 미디어 서비스 장치(110)와 미디어 재생 장치(120)간의 네트워크 통신 방식을 살펴보았다. 이하 도 6 내지 도 16를 통해 미디어 서비스 장치(110)와 미디어 재생 장치(120)의 구성 및 작동 방식을 설명한다.

설명에 앞서 미디어 재생 및 탐색에 사용되는 용어를 정의하자면, 재생 명령은 사용자 의해 입력되는 명령으로 웹 브라우저에 디스플레이되는 미디어의 조작 방식인 재생, 정지, 일시정지, 되감기, 빨리감기를 포함한다. 탐색 명령은 재생 명령과 마찬가지로 사용자에 의해 입력되는 명령으로 웹 브라우저에 디스플레이되는 프레임의 탐색에 사용되는 스킵 탐색, 포워드 탐색, 백워드 탐색을 포함한다. 스킵 탐색은 임의의 프레임으로 탐색을 진행하는 것이고 포워드 탐색은 현재 디스플레이되는 프레임의 포워드 방향 탐색, 백워드 탐색은 현재 디스플레이되는 프레임의 백워드 방향 탐색을 의미한다.

도 6은 미디어 서비스 장치(110)의 구성의 일 실시예를 나타낸다. 일 실시예에서 미디어 서비스 장치(110)는 실시간 비디오 카메라(111), 인코더(112), 패킷화부(113), 웹 서버(114), 모듈 저장부(115), 모듈 전송부(116), 및 제어부(117)를 포함한다.

실시간 비디오 카메라(111)는 미디어를 실시간으로 촬영하는 수단으로 촬영은 비디오 캡쳐 및 오디오 녹음을 모두 진행하는 방식과 비디오 캡쳐만 이루어지는 방식을 포함한다.

인코더(112)는 실시간 비디오 카메라(111)에 의해 촬영된 미디어를 압축하여 부호화하는 기능을 수행한다. 인코더(112)에 의한 인코딩은 반드시 웹 브라우저에 임베드 된 디코더에서 지원하는 특정 코덱으로 이루어져야 하는 것은 아니며 임의의 코덱 형식으로 인코딩 하는 것이 가능하다.

패킷화부(113)는 인코딩된 미디어 데이터를 패킷화하여 전송 패킷을 생성한다. 패킷화란 미디어 데이터를 네트워크(430)를 통해 전송하는 것이 용이하도록 적당한 길이로 분할하거나 또는 미디어 데이터가 짧은 경우 적당한 길이로 일괄하여 그 각각에 수신되어야 할 주소 등의 제어정보를 부여하는 것을 뜻한다. 이 때 제어정보는 전송 패킷의 헤더에 위치하게 된다. 전송 패킷은 전술한 웹소켓 패킷의 형태로 이루어진다.

패킷화부(113)는 미디어 재생 장치(120)에서 요청하는 방식에 따라 미디어 데이터의 패킷화를 수행하는 기능을 포함한다. 미디어 재생 장치(120)에서 탐색 명령 입력에 따라 미디어를 요청한 경우 패킷화부(113)는 전송 패킷을 미디어 데이터의 프레임 단위로 생성한다. 미디어 재생 장치(120)에서 재생 명령 입력에 따라 미디어를 요청한 경우에는 패킷화부(113)는 전송 패킷을 복수의 프레임을 포함하는 청크 데이터인 컨테이너 형식으로 생성한다. 이는 탐색 명령에 따라 미디어 재생 장치(120)에서 프레임 단위로 디코딩을 처리하여 프레임 단위의 미디어 탐색이 가능하게 하고, 재생 명령의 경우 미디어 재생 장치(120)의 웹 브라우저에 임베드 된 디코더에서 지원하는 컨테이너 형식을 구성하기 위함이다. 예를 들면 웹 브라우저에 임베드 된 디코더로 비디오 태그를 사용하기 위해 비디오 태그에서 지원하는 MPEG-DASH 컨테이너 형식으로 미디어 데이터를 구성하는 경우이다.

웹 서버(114)는 미디어 재생 장치(120)와 통신 세션을 형성하는 기능을 수행한다. 즉, 미디어 서비스 장치(110)의 웹 서버(114)와 미디어 재생 장치(120) 간의 핸드쉐이크 과정을 통해 양자간에 웹소켓 연결이 수립된다. 이후 미디어 재생 장치(120)의 요청에 따라 패킷화부(113)에서 생성된 전송 패킷을 웹 서버(114)를 통해 전송하게 된다.

모듈 저장부(115)는 미디어 재생 장치(120)에서 미디어를 재생 및 탐색하는데 필요한 스크립트 모듈을 저장하는 모듈이다. 스크립트 모듈은 웹 브라우저에서 파싱 할 수 있는 스크립트로 작성된 코드로 미디어 재생 장치(120)에서 플러그인이나 별도의 응용프로그램 설치 없이 HTML5환경의 웹 브라우저에서 미디어 재생 및 탐색이 가능하도록 해주는 모듈이다. 스크립트 모듈은 일 실시예로 자바스크립트로 작성된 코드일 수 있다. 스크립트 모듈에 대해서는 도 8 및 도 9를 참조하여 후술한다.

모듈 전송부(116)는 모듈 저장부(115)에 저장된 스크립트 모듈을 미디어 재생 장치(120)로 전송하는 모듈이다. 모듈 전송부(116)는 미디어 재생 장치(120)가 네트워크(430)를 통해 미디어 서비스 장치(110)에 접속한 경우 이에 응답하여 스크립트 모듈을 전송한다.

제어부(117)는 미디어 서비스 장치(110)에서 다른 구성 모듈들을 제어하는 모듈이다. 예를 들어 네트워크(430)를 통해 웹 서버(114)에 미디어 재생 장치(120)의 접속이 이루어진 경우 모듈 저장부(115)에 저장된 스크립트 모듈이 모듈 전송부(116)를 통해 미디어 재생 장치(120)로 전송되는데, 제어부(117)는 각 모듈들로부터 신호를 주고 받아 해당 작업이 원활이 이루어지게끔 통제하는 역할을 수행한다.

도 7은 미디어 서비스 장치(110)의 구성의 다른 실시예를 나타낸다. 도 6의 미디어 서비스 장치(110)는 실시간 비디오 카메라(111)에 의해 실시간 라이브 미디어를 전송하기 위한 실시예이고, 도 7의 미디어 서비스 장치(110)는 미디어 저장부(118)에 저장된 미디어를 전송하기 위한 실시예를 나타낸다.

미디어 저장부(118)는 네트워크 비디오 레코더(NVR) 또는 개인용 녹화기(PVR)를 포함하나 도 7의 실시예에서는 네트워크 비디오 레코더인 경우를 예로 들어 설명한다. 미디어 저장부(118)는 카메라 또는 서버로부터 미디어 데이터를 전송받아 압축 저장한다. 미디어 재생 장치(120)로부터 저장된 미디어에 대한 전송요청이 있는 경우 미디어 서비스 장치(110)는 미디어 저장부(118)에 저장된 미디어를 패킷화부(113)에서 패킷화하여 웹 서버(114)를 통해 전송한다. 도 7의 실시예에서 미디어 서비스 장치(110) 구성모듈 중 패킷화부(113), 웹 서버(114), 모듈 저장부(115), 모듈 전송부(116), 제어부(117)는 도 6의 실시예에서 설명한 모듈들로 중복되는 설명은 생략한다.

도 8은 모듈 저장부(115)의 스크립트 모듈의 일 실시예를 나타낸다. 도 8은 미디어 탐색을 위한 스크립트 모듈 구성의 예이며 RTSP/RTP 클라이언트 모듈(121), 디패킷화 모듈(122), 프레임 버퍼(123), 디코더 모듈(124), 및 렌더러 모듈(125)로 구성된다. 또한 도 8의 일 실시예에서는 스크립트 모듈이 웹 브라우저에서 파싱할 수 있는 스크립트인 자바스크립트로 구현된다.

RTSP/RTP 클라이언트 모듈(121)은 미디어 서비스 장치(110)와 RTSP/RTP 통신을 지원하는 기능을 수행한다. 현재로서 플러그인 없이 웹 브라우저 상에서 RTSP/RTP에 따라 미디어를 처리하는 것이 가능하지 않은데, RTSP/RTP 클라이언트 모듈(121)을 이용하면 웹 브라우저에서 HTTP 방식을 이용함에도 안정적으로 RTSP/RTP 프로토콜로 전송된 데이터를 수신할 수 있다.

디패킷화 모듈(122)은 RTSP/RTP 클라이언트 모듈(121)로부터 전달받은 패킷을 디패킷화(depacketization)하는 모듈이다. 디패킷화란 패킷화의 반대되는 개념으로 패킷화가 미디어 데이터를 적당한 길이로 분할하여 패킷을 형성하는 것을 의미한다면 이를 다시 이어 붙여 패킷화 이전의 상태로 미디어 데이터를 복원해주는 것을 뜻한다.

프레임 버퍼(123)는 디패킷화된 프레임들을 일시 저장하는 모듈이다. 프레임 버퍼(123)는 현재 디스플레이되고 있는 프레임을 중심으로 포워드 및 백워드 위치의 인접 프레임들을 일시 저장하는 모듈로 자세한 설명은 도 12를 참조하여 후술한다.

디코더 모듈(124)은 인코딩된 미디어의 압축 및 부호화를 해제하는 것, 즉 디코딩을 수행하는 모듈이다. 디코더 모듈(124)은 스크립트 모듈의 다른 모듈들과 마찬가지로 자바스크립트로 구현된다. 디코더 모듈(124)을 자바스크립트로 구현하기 때문에 웹 브라우저에 임베드 된 디코더와 달리 코덱 형식에 제한 없이 임의의 코덱 형식에 대하여 디코딩이 가능하다. 또한 프레임 단위로 디코딩이 가능하다.

도 8의 일 실시예에 따라 디코더 모듈(124)을 자바스크립트로 구현하면 예를 들어 다음의 표 2 내지 표 4와 같은 코드로 표현될 수 있다(표 3 및 표 4는 표 2에서 계속되는 내용이다).

function HevcDecoder () {

var _name = "HevcDecoder";
var self = this;

this._decoderParameters = null;
this._isRequestActive = false;
this._player = null;
this._requestContext = null;
this._requestContextQueue = [];

this.pushRequestContext = function (requestContext) {
self._requestContextQueue.push(requestContext);
};

this.decode = function () {
if (self._isRequestActive) {
return;
}

if (self._requestContextQueue.length) {
self._isRequestActive = true;
self._requestContext = self._requestContextQueue.pop();
self._playStream(self._requestContext.stream);
}
};
this._createDecodeCanvas = function(parentElement) {
self.canvas = document.createElement("canvas");
self.canvas.style.display = "none";
self.canvas.id = "decode-canvas";
parentElement.appendChild(self.canvas);
self.ctx = self.canvas.getContext("2d");
};
this._playStream = function (buffer) {
this._reset();
this._handleOnLoad(buffer);
}
this._onImageDecoded = function (image) {
var width = image.get_width();
var height = image.get_height();
this.canvas.width = width;
this.canvas.height = height;
this._imageData = this.ctx.createImageData(width, height);

image.display(this._imageData, function (displayImageData) {
var itemId = self._requestContext.itemIds[self._requestContext.currentFrameIndex];
var payload = self._requestContext.payload;
if (height > payload.displayHeight) {
payload.displayHeight = height;
}
if (!(itemId in self._requestContext.dependencies)) {
if (width > payload.displayWidth) {
payload.displayWidth = width;
}
payload.frames.push({
canvasFrameData: displayImageData.data,
itemId: itemId,
width: width,
height: height
});
}
self._requestContext.currentFrameIndex++;

if (self._requestContext.currentFrameIndex >= self._requestContext.itemIds.length) {
self._requestContext.callback(payload);
self._isRequestActive = false;
self.decode(); // Decode next queued request
}
});
};

...

this._createDecodeCanvas(document.documentElement);
this._reset();
}

렌더러 모듈(125)은 디코딩 된 미디어를 렌더링하여 모니터 등과 같은 출력 기기에 디스플레이 되도록 하는 기능을 수행한다. 렌더러 모듈(125)은 WebGL을 이용하여 YUV 형식의 비디오 데이터를 RGB 형식으로 변환시킨다. WebGL이란 자바스크립트를 통해 사용이 가능하고 3D 그래픽 인터페이스를 만들 수 있게 해주는 웹 기반의 그래픽 라이브러리이다.

도 9는 모듈 저장부(115)의 스크립트 모듈의 다른 실시예를 나타낸다. 도 9는 미디어 재생을 위한 스크립트 모듈의 예로 스크립트 모듈은 RTSP/RTP 클라이언트 모듈(121), 디패킷화 모듈(122), 프레임 버퍼(123), 및 컨테이너 생성 모듈(127)을 포함한다. 또한 도 9의 실시예에서 스크립트 모듈은 자바스크립트로 구현된다. RTSP/RTP 클라이언트 모듈(121), 디패킷화 모듈(122), 및 프레임 버퍼(123)는 각각 도 8에서 설명한 모듈들이다.

도 9의 스크립트 모듈을 자세히 살펴보면 도 8의 경우와 다르게 컨테이너 생성 모듈(127)이 포함된 것을 볼 수 있다. 컨테이너 생성 모듈(127)은 미디어 데이터가 컨테이너 단위로 패키징이 이루어져 있지 않은 경우 프레임들을 모아 청크 데이터를 형성하는 기능을 수행한다.

청크 데이터는 MPEG-DASH 컨테이너 등 비디오 태그에서 지원하는 컨테이너를 의미한다. 컨테이너 생성 모듈(127)에서 비디오 태그와 호환되는 컨테이너 형식으로 미디어 데이터을 구성해주기 때문에 영상 촬영 장치에서 컨테이너 형식으로 미디어 데이터를 전송하지 않더라도 호환성 문제 없이 비디오 태그의 사용이 가능하다. 즉, 기존에 설치된 영상 촬영 장치의 수정 없이도 비디오 태그의 사용이 가능한 환경을 제공한다.

이상 도 8 및 도 9에서 설명한 스크립트 모듈은 미디어 재생 장치(120)가 미디어 서비스 장치(110)에 접속함에 따라 미디어 서비스 장치(110)에서 미디어 재생 장치(120)로 전송되어, 미디어 재생 장치(120)의 웹 브라우저(210)에서 플러그인 없이 미디어 재생 및 탐색이 가능한 환경을 제공한다. 즉, 스크립트 모듈은 미디어 재생 장치(120)에 설치되어 미디어 재생 및 탐색을 위한 시스템을 구성하게 된다. 스크립트 모듈이 설치된 미디어 재생 장치(120)의 실시예는 이하 도 10 및 도 11을 통해 살펴본다.

도 10은 미디어 재생 장치(120)의 일 실시예를 나타낸다. 도 10의 실시예는 미디어 데이터가 프레임 바이 프레임 형식으로 수신된 경우 미디어의 재생 및 탐색을 위한 미디어 재생 장치(120)를 도시한다.

미디어 재생 장치(120)는 수신부를 이루는 웹소켓 클라이언트(131)와 RTSP/RTP 클라이언트 모듈(121), 디패킷화 모듈(122), 프레임 버퍼(123), 제1 미디어 복원부(141), 제2 미디어 복원부(142), 버퍼 컨트롤러 모듈(126), 디코드 컨트롤러 모듈(128), 및 사용자 인터페이스(132)로 이루어진다. 이때, RTSP/RTP 클라이언트 모듈(121), 디패킷화 모듈(122), 프레임 버퍼(123), 제1 미디어 복원부(141)의 컨테이너 생성 모듈(127), 제2 미디어 복원부(142)의 디코더 모듈(124), 렌더러 모듈(125), 버퍼 컨트롤러 모듈(126), 및 디코드 컨트롤러 모듈(128)은 미디어 재생 장치(120)가 네트워크(430)를 통해 미디어 서비스 장치(110)에 접속함에 따라 이에 응답으로 스크립트 모듈을 수신하여 구성되는 모듈들이다. 도 10의 실시예에서 미디어 재생 장치(120)는 두 개의 비디오 디코더를 포함하며 제1 비디오 디코더는 제1 미디어 복원부(141)에, 제2 비디오 디코더는 제2 미디어 복원부(142)에 각각 포함된다.

웹소켓 클라이언트(131)와 RTSP/RTP 클라이언트 모듈(121)은 수신부를 구성한다. 웹소켓 클라이언트(131)는 미디어 서비스 장치(110)의 웹 서버(114)와 웹소켓 연결을 수립하는 모듈이다. 미디어 재생 장치(120)와 미디어 서비스 장치(110)는 각각 웹소켓 클라이언트(131)와 웹 서버(114)간의 핸드쉐이크를 거쳐 전송 패킷을 주고 받는다.

RTSP/RTP 클라이언트 모듈(121)은 도 8의 일 실시예에서 설명한 바와 같이 사용자의 웹 브라우저(210)에 RTSP/RTP 통신이 지원되도록 하는 기능을 수행한다. 따라서 사용자는 별도의 플러그인 설치 없이 RTSP/RTP 프로토콜을 사용하여 HTML5 환경의 웹 브라우저(210)를 통해 미디어를 재생하는 것이 가능하다.

웹소켓 클라이언트(131)와 RTSP/RTP 클라이언트 모듈(121)을 거친 전송 패킷은 디패킷화 모듈(122)에서 디패킷화된 뒤 프레임 버퍼(123)로 전달된다.

프레임 버퍼(123)와 버퍼 컨트롤러 모듈(126)을 설명하기 위해 도 12를 참조한다. 도 12는 프레임 버퍼(123)와 버퍼리스트(151)의 일 실시예를 나타낸다. 프레임 버퍼(123)는 디패킷화된 프레임들을 일시 저장하는 모듈이고, 버퍼리스트(151)는 프레임 버퍼(123)에 일시 저장된 프레임들의 식별자를 포함하는 모듈이다. 일 실시예에서 식별자는 프레임이 저장된 프레임 버퍼(123)의 메모리 주소이다.

도 12를 참조하면, 프레임n-1, 프레임n, 프레임n+1이 순차적으로 프레임을 구성하고, 각각의 프레임의 메모리 주소는 0x031F, 0x03AD, 0x0514이다. 프레임n은 재생이 중지되거나 탐색 명령에 의해 이동된 지점에 대응되는 프레임이고 프레임n+1은 포워드 방향의 최인접 프레임, 프레임 n-1은 백워드 방향의 최인접 프레임이다.

프레임 버퍼(123)는 프레임n 및 프레임n을 중심으로 포워드와 백워드 방향의 인접 프레임들을 버퍼링한다. 이때 포워드와 백워드 방향의 인접 프레임들은 그 수가 동일하게 버퍼링될 수 있다.

버퍼리스트(151)는 프레임 버퍼(123)에 일시 저장된 프레임들의 모든 식별자들을 리스트 형태로 일시 저장한다. 도 12에는 버퍼리스트(151)에 프레임n-1, 프레임n, 프레임n+1의 식별자들인 0x031F, 0x03AD, 0x0514가 리스트 형태로 저장되어 있는 것이 도시되어 있다.

버퍼 컨트롤러 모듈(126)은 재생 명령 또는 탐색 명령에 따라 프레임 버퍼(123)의 동작을 제어하는 모듈로 버퍼리스트(151)를 포함한다. 현재 디스플레이되고 있는 프레임n에서 사용자가 포워드 방향으로 탐색(152)을 명령한 경우 버퍼 컨트롤러 모듈(126)은 버퍼리스트(151)에서 프레임n의 식별자의 다음 식별자인 0x0514를 참조하여 프레임n의 포워드 방향 최인접 프레임인 프레임n+1을 포인터를 통해 탐색한다. 마찬가지로 프레임n에서 백워드 방향으로 탐색(153)이 입력된 경우 버퍼 컨트롤러 모듈(126)은 버퍼리스트(151)에서 프레임n의 식별자의 이전 식별자인 0x031F를 참조하여 포인터를 통해 프레임n-1을 탐색한다.

미디어 데이터의 탐색이 버퍼리스트(151)에 포함된 식별자의 끝단까지 진행된 경우 또는 사용자에 의해 프레임 버퍼(123)에 포함되지 않은 임의의 프레임으로 스킵 탐색이 이루어진 경우에는 끝단 식별자에 대응되는 프레임 또는 임의의 프레임을 중심으로 인접 프레임들을 프레임 버퍼(123)에 버퍼링하는 과정을 재개하여 원활한 탐색이 이루어질 수 있다.

프레임 버퍼(123)에 I 프레임(intra frame)을 선별적으로 버퍼링하도록 설정하면 사용자는 프레임들 중 I 프레임에 대한 포워드 탐색 및 백워드 탐색이 가능하다.

기존의 미디어 재생용 버퍼들은 현재 재생 시점 이후인 포워드 방향의 인접 프레임들을 일정량 일시 저장하는 방식으로, 탐색 방향이 백워드 방향으로 바뀌는 경우 다시 버퍼링을 진행하는 방식을 사용했다. 그러나 본 발명의 프레임 버퍼(123)는 현재 재생 시점의 포워드 및 백워드 방향의 인접 프레임들을 일시 저장하므로, 사용자가 재생방향과 반대로 탐색을 진행할 때 버퍼링을 추가로 수행하지 않아도 된다.

재생 명령에 따라 미디어가 재생되는 경우 프레임 버퍼(123)는 지터 버퍼의 역할을 할 수 있다. 따라서 오디오 트래픽의 전송 지연으로 인한 지터를 제거하여 부드러운 오디오 재생이 가능하다.

다시 도 10을 참조하면 프레임 버퍼(123)로부터 재생 또는 탐색하고자 하는 미디어가 제1 미디어 복원부(141) 또는 제2 미디어 복원부(142)로 전달된다.

제1 미디어 복원부(141)는 미디어 재생을 위한 모듈로 컨테이너 생성 모듈(127), MSE(134), 비디오 태그(135)로 구성되며 제1 비디오 디코더인 비디오 태그(135)에서 미디어 데이터를 디코딩한다.

컨테이너 생성 모듈(127)은 도 9에서 설명한대로 미디어 데이터가 컨테이너 형식으로 전송되지 않은 경우 프레임들을 모아 컨테이너 형식의 청크 데이터를 생성하는 기능을 수행한다. 컨테이너 생성 모듈(127)을 거친 미디어 데이터는 컨테이너 형식으로 인한 호환성 문제 없이 MSE(134)와 비디오 태그(135)로 전달된다.

MSE(134)는 HTTP 다운로드를 이용해 동영상 스트리밍 재생을 위해 만들어진 HTML5용 자바스크립트 API이다. W3C에 의해 표준화 된 이 기술은 엑스박스(Xbox)와 플레이스테이션4(PS4) 같은 콘솔 게임기나 크롬 캐스트 브라우저 등에서 스트리밍 재생을 가능하게 해준다.

비디오 태그(135)에서는 디코딩 및 렌더링을 수행하여 미디어가 웹 브라우저에 디스플레이 되도록 한다. 비디오 태그(135)의 디코더를 사용하면 자바스크립트의 동적 언어 특성으로 인해 한계를 지닌 디코더 모듈(124)보다 우수한 성능으로 디코딩이 가능하다. 즉, 고해상도 영상과 높은 fps의 디코딩이 가능하다.

제2 미디어 복원부는 미디어 탐색을 위한 모듈로 디코더 모듈(124), 렌더러 모듈(125), 캔버스 태그(133)로 이루어지며 제2 비디오 디코더인 자바스크립트로 구현된 디코더 모듈(124)을 통해 미디어 데이터를 디코딩한다.

디코더 모듈(124)에서 디코딩은 프레임 단위로 이루어진다. 사용자는 디코더 모듈(124)의 프레임 단위의 처리방식으로 인해 프레임 단위로 미디어를 탐색하는 것이 가능하다.

디코딩이 이루어진 미디어 데이터는 렌더러 모듈(125)과 캔버스 태그(Canvas Tag, 133)를 통해 웹 브라우저 상에 디스플레이 된다. 캔버스 태그(133)는 2D 모양 및 비트맵 이미지를 동적으로 렌더링할 수 있게 해주는 HTML5의 요소이다. 즉 웹 브라우저 위의 그림판 이라고 볼 수 있다. 최신 버전의 웹 브라우저는 대부분 지원하는 기능이므로 자바스크립트로 구현된 디코더에서 미디어 데이터를 프레임 단위로 처리하고 캔버스 태그(133)를 이용하여 웹 브라우저에 표시할 수 있다.

디코더 컨트롤러 모듈(128)은 사용자의 입력에 따라 미디어 데이터가 제1 미디어 복원부 또는 제2 미디어 복원부에서 디코딩 되도록 제어하는 모듈이다. 사용자에 의한 입력이 재생 명령인 경우 버퍼 컨트롤러 모듈(126)을 통해 프레임 버퍼(123)가 미디어 데이터를 제1 미디어 복원부(141)로 전달하도록 하고 제1 미디어 복원부(141)에서 미디어 데이터가 디코딩되어 웹 브라우저(210)에 디스플레이 되도록 한다. 사용자에 의한 입력이 탐색 명령인 경우 버퍼 컨트롤러 모듈(126)을 통해 프레임 버퍼(123)가 미디어 데이터를 제2 미디어 복원부(142)로 전달하도록 하고 제2 미디어 복원부(142)에서 미디어 데이터가 프레임 단위로 디코딩되어 웹 브라우저(210)에 디스플레이 되도록 한다.

본 발명에서 디코드 컨트롤러(128)는 CPU와 같은 하드웨어의 실행 명령(instruction)으로 구성될 수도 있지만, C 언어, C++이나 자바 스크립트와 같은 소프트웨어에서의 서브루틴으로 구현될 수도 있다.

재생 명령 도중 탐색 명령이 입력된 경우 디코더 컨트롤러 모듈(128)은 제1 미디어 복원부(141)에 의한 디코딩을 정지시키고 제2 미디어 복원부(142)로 미디어 데이터가 전달되어 자바스크립트로 구현된 디코더 모듈(124)에 의해 디코딩되도록 한다. 반대로 탐색 명령 도중 재생 명령이 입력된 경우 디코더 컨트롤러 모듈(128)은 제2 미디어 복원부(142)에 의한 디코딩을 정지시키고 제1 미디어 복원부(141)로 미디어 데이터가 전달되어 비디오 태그(135)에 의한 디코딩이 이루어지도록 한다.

도 10의 실시예에서 미디어 재생 장치(120)의 마지막 구성 모듈인 사용자 인터페이스(132)는 도 13을 참조하여 설명한다.

도 13은 사용자 인터페이스(132)에 포함되는 GUI(211)의 일 실시예를 나타낸다. 사용자 인터페이스(132)는 GUI(211)와 입력장치를 포함하며 도 13에서는 웹 브라우저(210)상에 구현된 GUI(211)를 도시한다.

사용자 인터페이스(132)의 입력장치가 터치스크린인 경우 사용자는 GUI(211)가 표시된 화면을 터치하여 시스템을 동작시킬 수 있고, 입력장치가 마우스인 경우에는 사용자는 마우스를 이용하여 GUI(211)의 각 버튼을 클릭 또는 드래그하여 시스템을 동작시킬 수 있다.

GUI(211)는 재생 명령 입력부(212)와 탐색 명령 입력부(213)를 포함한다. 사용자는 재생 명령 입력부(212)를 통해 재생, 일시정지, 정지 등의 재생 명령의 입력이 가능하다. 탐색 명령 입력부(213)를 이용하여 사용자는 탐색모드의 ON/OFF, 포워드 탐색, 백워드 탐색 등의 탐색 명령을 내릴 수 있다.

사용자가 탐색모드 토글 버튼(214)을 ON으로 설정하면 탐색모드가 시작된다. 현재 재생위치를 나타내는 포인터(217)양 옆으로 음영표시된 된 막대는 프레임 버퍼(123)에 현재 디스플레이되는 프레임과 포워드 및 백워드 방향의 인접 프레임들이 일시 저장되어 있는 것을 나타낸다. 사용자가 포워드 탐색 버튼(215)을 클릭하면 현재 디스플레이되는 프레임의 포워드 방향의 인접 프레임을 탐색하는 포워드 탐색이, 백워드 탐색 버튼(216)을 클릭하면 백워드 방향의 인접 프레임을 탐색하는 백워드 탐색이 수행된다. 또한 사용자는 포인터(217)를 드래그하여 임의의 프레임을 탐색하는 스킵 탐색을 수행할 수 있다. 이상의 도 13에서는 사용자가 탐색모드를 ON으로 설정할 때, 탐색모드로 전환되는 것으로 설명하였지만 이에 한하지 않고, 지정된 물체의 등장, 일정 크기 이상의 오디오 발생, 장면 전환 등 특정 이벤트 발생시에 자동으로 탐색모드로 전환되도록 구성할 수도 있다.

도 14를 참조하여 도 10의 실시예가 사용자의 입력에 따라 작동하는 과정을 살펴본다.

사용자 인터페이스(132)를 통해 재생 명령 중 재생이 입력된 경우, 디코드 컨트롤러 모듈(128)이 웹소켓 클라이언트(131)에 미디어 데이터를 요청하라는 지시를 내린다.

웹소켓 클라이언트 (131)에 미디어 데이터를 요청하라는 지시를 반드시 디코드 컨트롤러(128)가 내려야 하는 것은 아니며 디코드 컨트롤러(128)가 직접 별도의 통신 채널을 형성하여 미디어 데이터를 요청하는 등 시스템 구성에 따라 다르게 설정할 수도 있다. 도 14의 실시예에서는 웹소켓 클라이언트(131)가 미디어 서비스 장치(110)에 미디어 데이터를 요청한다.

미디어 서비스 장치(110)로부터 수신된 미디어 데이터는 프레임 버퍼(123)에 일시 저장과정을 거쳐 제1 미디어 복원부로 전달되고 제1 미디어 복원부의 비디오 태그(135)에서 디코딩을 거쳐 웹 브라우저(210)의 사용자 인터페이스(132)에 디스플레이된다(S2000).

사용자 인터페이스(132)에 일시정지 또는 정지와 같은 명령이 입력된 경우, 디코드 컨트롤러 모듈(128)은 제1 미디어 복원부(141)에 미디어 재생을 중지하라는 명령을 내리고 제1 미디어 복원부(141)는 이에 따라 재생 중이던 미디어를 중지시킨다(S2100).

사용자 인터페이스(132)에 탐색 명령이 입력된 경우, 디코드 컨트롤러(133)의 명령으로 웹소켓 클라이언트(131)는 미디어 서비스 장치(110)에 미디어 데이터를 요청한다. 이때 요청된 미디어 데이터는 프레임 바이 프레임 형식으로 생성된 전송 패킷으로 전송받을 수 있다. 수신된 미디어 데이터는 프레임 버퍼(123)에 일시 저장되고 탐색 대상이 되는 프레임은 제2 미디어 복원부(142)로 전달된다. 미디어 데이터는 제2 미디어 복원부(142)에서 자바스크립트로 구현된 디코더 모듈(124)에 의해 프레임 단위로 디코딩되는 과정을 거쳐 사용자 인터페이스(132)에 디스플레이된다(S2200).

다음으로 미디어 재생 장치(120)의 다른 실시예를 도 11을 통해 살펴본다. 도 10의 실시예가 프레임 바이 프레임 형식으로 수신된 미디어 데이터를 재생 및 탐색하기 위한 미디어 재생 장치(120)에 관한 것이라면, 도 11의 실시예는 복수의 프레임을 포함하는 청크 데이터의 형식으로 수신된 미디어 데이터를 재생 및 탐색하기 위한 미디어 재생장치(120)를 나타낸다.

도 11의 실시예는, 도 10의 실시예와 다르게 컨테이너 생성 모듈(129)이 포함되어 있지 않다. 대신에, 컨테이너 버퍼(129)는 컨테이너 형식, 즉 청크 데이터 단위로 미디어 데이터가 수신된 경우, 현재 디코딩되어 출력되는 청크 데이터를 버퍼링하는 역할을 수행한다. 이와 같이 수신된 미디어 데이터가 미디어 서비스 장치(110)에서 이미 컨테이너 형식으로 패키징되어 전송되는 경우에, 청크 데이터는 도 10과 같은 컨테이너 생성 모듈(127)을 거치지 않고 바로 MSE(134)에 입력된다.

컨테이너 버퍼(129)에서 버퍼링된 청크 데이터는 재생을 위하여 제1 미디어 복원부(141)로 입력되는 한편, 탐색을 위해서 프레임들로 분리된 후 프레임 버퍼(123)에 버퍼링될 수 있다. 이와 같이 프레임 버퍼(123)에 버퍼링된 프레임들은 도 10에서와 마찬가지로 제2 미디어 복원부(142)에서 디코딩 및 렌더링된다. 또한, 프레임 버퍼(123) 내에 저장된 프레임들은 사용자에 의해 양방향(백워드/포워드) 탐색이 용이하도록, 제2 미디어 복원부(142)에 입력되는 단계에서 양방향으로 버퍼링될 수 있다.

이하 도 11의 미디어 재생 장치(120)로 컨테이너 형식으로 수신된 청크 데이터를 재생 및 탐색하는 방법에 관해 살펴본다.

웹소켓 클라이언트(131)와 RTSP/RTP 클라이언트 모듈(121)로 구성된 수신부를 통해 수신된 미디어 데이터는 디패킷화 모듈(122)에서 디패킷화 과정을 거쳐 컨테이너 버퍼(129)로 전달된다.

사용자에 의해 미디어의 재생 입력이 내려진 경우, 컨테이너 버퍼(129)는 제1 미디어 복원부(141)로 미디어 데이터를 전달하여 MSE(134)와 비디오 태그(135)를 통해 미디어 데이터가 복원되어 출력되도록 한다.

사용자에 의해 미디어의 탐색 명령이 내려진 경우, 컨테이너 버퍼(129)는 프레임 버퍼(123)로 청크 데이터를 전달한다. 컨테이너 버퍼(129)에서 프레임 버퍼(123)로 연결된 화살표는 전달되는 청크 데이터를 의미한다.

프레임 버퍼(123)에서는 청크 데이터 형식의 미디어 데이터를 프레임 바이 프레임으로 변환하여 탐색 대상이 되는 프레임을 제2 미디어 복원부(142)에 제공한다.

제2 미디어 복원부(142)에서는 디코더 모듈(124)과 렌더러 모듈(125)을 통해 사용자의 탐색 명령의 대상이 되는 프레임의 디코딩 및 렌더링을 수행하여 출력한다.

사용자의 재생 및 탐색 명령에 따른 버퍼링과 미디어 복원에 관한 제어는 도 10의 실시예와 마찬가지로 디코드 컨트롤러 모듈(128)과 버퍼 컨트롤러 모듈(126)에 의해 이루어진다. 재생 명령 입력에 대하여 디코드 컨트롤러 모듈(128)은 제1 미디어 복원부(141)에 의한 미디어 데이터의 복원 및 출력이 이루어지도록 하고, 버퍼 컨트롤러 모듈(126)은 컨테이너 버퍼(129)에 의해 청크 데이터의 버퍼링이 이루어지도록 한다. 탐색 명령 입력에 대해서는 디코드 컨트롤러 모듈(128)은 제2 미디어 복원부(142)에 의해 미디어 데이터의 복원 및 출력이 이루어지도록 하고, 버퍼 컨트롤러 모듈(126)은 컨테이너 버퍼(129)로부터 청크 데이터가 프레임 버퍼(123)로 전달되도록 한다.

이상 살펴본 도 10과 도 11의 미디어 재생 장치(120)는 각각 프레임 바이 프레임 형식과 청크 데이터 형식의 미디어 데이터를 재생 및 탐색하기 위한 실시예로, 두 실시예를 조합하면 프레임 바이 프레임 형식과 청크 데이터 형식의 미디어 데이터를 모두 재생 및 탐색할 수 있는 미디어 재생 장치(120)를 구성할 수 있음은 자명하다 할 것이다.

도 15는 본 발명의 일 실시예에 따른 자바스크립트로 구현된 스크립트 모듈을 생성하는 과정을 설명하기 위한 예시도이다. 도 15를 참고하면 자바스크립트로 구현된 스크립트 모듈은 종래의 C와 C++의 네이티브 코드로 작성된 소스를 Emscripten과 같은 컨버터(converter)로 변환하여 브라우저에서 사용할 수 있는 자바스크립트 코드를 얻을 수 있다.

Emscripten과 같은 컨버터(converter)를 이용하면, 종래의 네이티브 코드로부터 자바스크립트로 구현된 디코더나 컨테이너를 얻을 수 있으므로 코덱 종속성을 낮출 수 있는 장점이 있다.

플러그인 대신에 자바스크립트 코드를 사용하므로 웹 브라우저 제작 업체의 지원 중단을 염려할 필요도 없다. 또한, 웹 브라우저에 따라 ActiveX 인터페이스를 사용할지 NPAPI 인터페이스를 사용할지 고민할 필요가 없다. 즉, 웹 브라우저 종속성을 낮출 수 있는 장점이 있다.

도 1에 도시된 미디어 재생 장치(120)는 예를 들어, 다음의 도 16에 도시된 컴퓨팅 장치(400)로 구현될 수 있다. 컴퓨팅 장치(400)는 모바일 핸드헬드 기기들(스마트 폰, 태블릿 컴퓨터 등), 랩톱 또는 노트북 컴퓨터, 분산된 컴퓨터 시스템, 컴퓨팅 그리드 또는 서버일 수 있으나 이에 한하지는 않는다. 컴퓨팅 장치(400)는 버스(440)를 통해 서로 간에 또는 다른 요소들과 통신하는 프로세서(401) 및 메모리(403) 및 스토리지(408)를 포함할 수 있다. 버스(440)는 디스플레이(432), 하나 이상의 입력 장치들(433), 하나 이상의 출력 장치들(434)과 연결될 수 있다.

이러한 모든 요소들은 버스에(400) 직접 또는 하나 이상의 인터페이스들 또는 어댑터들을 통하여 접속될 수 있다. 버스(440)는 광범위한 서브 시스템들과 연결된다. 버스(440)는 메모리 버스, 메모리 컨트롤러, 주변 버스(peripheral bus), 로컬 버스 및 이들의 조합을 포함할 수 있다.

프로세서 내지 CPU(401)는 인스트럭션, 데이터 또는 컴퓨터 주소들을 일시 저장하기 위한 로컬 스토리지인 캐쉬 메모리(402)를 선택적으로 포함한다. 프로세서(401)는 메모리(403) 또는 스토리지(408)와 같은 컴퓨터로 읽을 수 있는 저장 매체에 기록된 인스트럭션들(또는 소프트웨어 모듈들)을 실행한다. 컴퓨터로 읽을 수 있는 저장 매체는 특정 실시예들을 구현하는 소프트웨어 모듈들을 저장하고, 프로세서(401)는 저장된 소프트웨어 모듈들 실행할 수 있다.

메모리(403)는 RAM(404, random access memory), ROM(405, read-only component) 및 이들의 조합으로 구성될 수 있다. 또한, 컴퓨팅 장치(400) 내에서 부팅(booting)을 위해 필요한 기본 루틴들을 구비하는 바이오스(내지 펌웨어)가 메모리(403) 내에 포함될 수 있다.

스토리지(408)는 오퍼레이팅 시스템(409), 실행 가능한 파일들(EXEC, 410), 데이터(411), API 어플리케이션(412) 등을 저장하기 위해 사용된다. 스토리지(408)는 하드 디스크 드라이브, 광디스크 드라이브, SSD(solid-state memory device) 등을 포함할 수 있다.

컴퓨팅 장치(400)는 입력 장치(433)을 포함할 수 있다. 사용자는 입력 장치(433)를 통하여 컴퓨터 장치(400)에 명령 및/또는 정보를 입력할 수 있다. 입력 장치(433)의 예로는, 키보드, 마우스, 터치패드, 조이스틱, 게임패드, 마이크로폰, 광학 스캐너, 카메라 등이 있다. 입력 장치(433)는 직렬 포트, 병렬 포트, 게임 포트, USB 등을 포함하는 입력 인터페이스(423)를 통해 버스(440)에 접속될 수 있다.

특정 실시예에서, 컴퓨팅 장치(400)는 네트워크(430)에 연결된다. 컴퓨팅 장치(400)는 다른 장치들과 네트워크(430)를 통하여 연결된다. 이 때, 네트워크 인터페이스(420)는 네트워크(430)로부터 하나 이상의 패킷의 형태로 된 통신 데이터를 수신하고, 컴퓨팅 장치(400)는 프로세서(401)의 처리를 위해 상기 수신된 통신 데이터를 저장한다. 마찬가지로, 컴퓨팅 장치(400)는 전송한 통신 데이터를 하나 이상의 패킷 형태로 메모리(403) 상에 저장하고, 네트워크 인터페이스(420)는 상기 통신 데이터를 네트워크(430)로 전송한다.

네트워크 인터페이스(420)는 네트워크 인터페이스 카드, 모뎀 등을 포함할 수 있다. 네트워크(430)의 예로는, 인터넷, WAN(wide area network), LAN(local area network), 전화 네트워크, 직접 연결 통신 등이 있으며, 유선 및/또는 유선 통신 방식을 채용할 수 있다.

프로세서(401)에 의한 소프트웨어 모듈의 실행 결과는 디스플레이(432)를 통해 표시될 수 있다. 디스플레이(432)의 예로는, LCD(liquid crystal display), OLED(organic liquid crystal display), CRT(cathode ray tube), PDP(plasma display panel) 등이 있다. 디스플레이(432)는 비디오 인터페이스(422)를 통하여 버스(440)에 연결되고, 디스플레이(432)와 버스(440) 간의 데이터 전송은 그래픽 컨트롤러(421)에 의해 제어될 수 있다.

디스플레이(432)와 더불어, 컴퓨팅 장치(400)는 오디오 스피커, 프린터 등과 같은 하나 이상의 출력 장치(434)를 포함할 수 있다. 출력 장치(434)는 출력 인터페이스(424)를 통해 버스(440)와 연결된다. 출력 인터페이스(424)는 예를 들어, 직렬 포트, 병렬 포트, 게임 포트, USB 등이 있다.

본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명이 그 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 본 발명의 범위는 상기 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.

110: 미디어 서비스 장치 111: 카메라
112: 인코더 113: 패킷화부
114: 웹 서버 115: 모듈 저장부
116: 모듈 전송부 117: 제어부
120: 미디어 재생 장치 121: RTSP/RTP 클라이언트 모듈
122: 디패킷화 모듈 123: 프레임 버퍼
124: 디코더 모듈 125: 렌더러 모듈
126: 버퍼 컨트롤러 모듈 127: 컨테이너 생성 모듈
128: 디코드 컨트롤러 모듈 129: 컨테이너 버퍼
141: 제1 미디어 복원부 142: 제2 미디어 복원부
151: 버퍼 리스트 152: 포워드 방향 탐색
153: 백워드 방향 탐색 210: 웹 브라우저
211: GUI 212: 재생 명령 입력부
213: 탐색 명령 입력부 214: 탐색모드 토글 버튼
215: 포워드 탐색 버튼 216: 백워드 탐색 버튼
217: 포인터

Claims

미디어 서비스 장치에서 생성된 미디어 데이터를 웹 서비스를 지원하는 통신 프로토콜을 이용하여 수신하는 수신부;
웹 브라우저에 임베드 된 디코더에 의해 상기 수신된 미디어 데이터를 디코드하도록 구성되는 제1 미디어 복원부;
웹 브라우저가 파싱(parsing)할 수 있는 스크립트로 작성된 디코더에 의해 상기 수신된 미디어 데이터를 디코드하도록 구성되는 제2 미디어 복원부;
상기 수신된 미디어 데이터에 대한 제어 명령을 사용자로부터 입력받도록 구성되는 사용자 인터페이스; 및
상기 제어 명령이 재생 명령이면 상기 제1 미디어 복원부가 상기 수신된 미디어 데이터를 디코드하도록 제어하고, 상기 제어 명령이 탐색 명령이면 상기 제2 미디어 복원부가 상기 수신된 미디어 데이터를 디코드하도록 제어하는 디코드 컨트롤러를 포함하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제1항에 있어서,
상기 스크립트로 작성된 디코더에 의해 디코드 된 미디어 데이터를 렌더링 하는 렌더러를 더 포함하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제1항에 있어서,
상기 재생 명령에 따라 상기 제1 미디어 복원부가 상기 미디어 데이터를 디코드 하는 중에, 상기 탐색 명령이 입력되면 상기 디코드 컨트롤러는 상기 제1 미디어 복원부에 의한 디코딩 과정을 중지하고,
상기 탐색 명령에 따라 상기 제2 미디어 복원부가 상기 미디어 데이터를 디코드 하는 중에, 상기 재생 명령이 입력되면 상기 디코드 컨트롤러는 상기 제2 미디어 복원부에 의한 디코딩 과정을 중지하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제1항에 있어서,
상기 스크립트로 작성된 디코더는 자바스크립트로 작성된 디코더이고, 상기 웹 브라우저에 임베드 된 디코더는 HTML5에서 지원하는 비디오 태그인, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제1항에 있어서,
상기 탐색 명령은 스킵 탐색, 포워드 탐색 및 백워드 탐색 중 적어도 하나 이상을 포함하고,
상기 재생 명령은 재생, 정지, 일시정지, 되감기, 빨리감기 중 적어도 하나 이상을 포함하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제1항에 있어서,
상기 미디어 재생 장치는 상기 제2 미디어 복원부에서 상기 탐색 명령을 수행하기 위해 프레임들을 버퍼링하는 프레임 버퍼를 더 포함하고
상기 미디어 재생 장치는 상기 프레임 버퍼에 일시 저장되는 프레임들의 식별자를 포함하는 버퍼 리스트를 더 포함하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제6항에 있어서,
상기 미디어 재생 장치는 수신된 미디어 데이터가 복수의 프레임을 포함하는 청크 데이터로 구성된 경우, 상기 청크 데이터 단위로 버퍼링을 수행하는 컨테이너 버퍼를 더 포함하고,
상기 프레임 버퍼는, 상기 탐색 명령을 수행하기 위해 상기 청크 데이터에 포함된 복수의 프레임들을 버퍼링하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제6항에 있어서,
상기 버퍼 리스트는 상기 탐색 명령에 의해 상기 제1 미디어 복원부에 의한 재생이 중지된 지점 또는 상기 탐색 명령에 의해 이동된 지점에 대응되는 프레임을 중심으로 상기 프레임으로부터 포워드 및 백워드 위치의 인접 프레임들의 식별자들을 포함하여 구성되는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제8항에 있어서,
상기 대응되는 프레임 및 상기 인접 프레임들 중 상기 포워드 방향의 인접 프레임들과 상기 백워드 방향의 인접 프레임들의 수는 동일한, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제6항에 있어서,
상기 버퍼 리스트의 끝단 프레임까지 탐색이 완료된 경우, 상기 끝단 프레임을 중심으로 인접 프레임들의 일시 저장 과정이 재개되는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제8항에 있어서,
상기 대응되는 프레임 및 상기 인접 프레임들은 I 프레임(intra frame)인, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제1항에 있어서,
상기 제1 미디어 복원부는 상기 미디어 데이터를 복수의 프레임을 포함하는 컨테이너 단위로 디코드하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
제1항에 있어서,
상기 제2 미디어 복원부는 상기 미디어 데이터를 프레임 단위(frame-by-frame)로 디코드하는, 웹 브라우저 상에서 미디어를 재생하는 미디어 재생 장치.
실시간 라이브 비디오 또는 저장된 비디오를 미디어 재생 장치에 실시간으로 전송하는 미디어 서비스 장치로서,
상기 실시간 라이브 비디오 또는 저장된 비디오를 상기 미디어 재생 장치의 웹 브라우저 상에서 재생하기 위해 필요한, 상기 웹 브라우저가 파싱(parsing)할 수 있는 스크립트 모듈을 저장하는 모듈 저장부;
상기 미디어 재생 장치의 접속에 응답하여 상기 스크립트 모듈을 상기 미디어 재생 장치에 전송하는 모듈 전송부;
상기 실시간 라이브 비디오 또는 저장된 비디오를 패킷화하여 전송 패킷을 생성하는 패킷화부; 및
상기 재생 장치와의 통신 세션을 형성하며, 상기 미디어 재생 장치로부터의 제어 명령에 따라, 상기 전송 패킷을 상기 미디어 재생 장치에 전송하는 웹 서버를 포함하되,
상기 스크립트 모듈은, 상기 미디어 재생 장치로부터 수신되는 제어 명령이 재생 명령인지 탐색 명령인지에 따라, 상기 미디어 재생 장치에서 실행되는 복수의 비디오 디코더 중에서 서로 다른 디코더에 의해 상기 전송 패킷을 디코드 하도록 제어하는 프로세스를 포함하는 미디어 서비스 장치.
제14항에 있어서,
상기 복수의 비디오 디코더는, 상기 웹 브라우저에 내장된 제1 비디오 디코더와, 상기 웹 브라우저가 파싱할 수 있는 스크립트로 작성된 제2 비디오 디코더를 포함하는 미디어 서비스 장치.
제15항에 있어서, 상기 프로세스는
상기 제어 명령이 재생 명령이면 상기 제1 비디오 디코더에서 상기 전송 패킷을 디코드하고, 상기 제어 명령이 탐색 명령이면 상기 제2 비디오 디코더에서 상기 전송 패킷을 디코드하도록 제어하는 미디어 서비스 장치.
제14항에 있어서,
상기 패킷화부는, 상기 제어 명령이 재생 명령이면 상기 전송 패킷을 컨테이너 형식으로 생성하고, 상기 제어 명령이 탐색 명령이면 상기 전송 패킷을 프레임 바이 프레임 형식으로 생성하는 미디어 서비스 장치.
제14항에 있어서,
상기 미디어 서비스 장치는 실시간 비디오 카메라 또는 네트워크 비디오 레코더를 포함하고, 상기 미디어 재생 장치는 웹 브라우저를 포함하는 미디어 서비스 장치.
제18항에 있어서,
상기 실시간 비디오 카메라에 의해 캡쳐된 비디오를 압축 부호화하는 미디어 인코더를 더 포함하는 미디어 서비스 장치.
제14항에 있어서, 상기 스크립트 모듈은
상기 미디어 서비스 장치와의 RTSP/RTP 통신을 지원하는 RTSP/RTP 클라이언트 모듈, 상기 패킷화된 전송 패킷을 디패킷화(depecketization)하는 디패킷화 모듈, 상기 디패킷화를 통해 얻어지는 비디오 프레임들을 일시 저장하는 프레임 버퍼, 상기 디패킷화를 통해 얻어지는 비디오 프레임들을 디코드하여 상기 비디오를 복원하는 디코더 모듈, 상기 비디오 프레임들이 컨테이너 단위로 패키징되어 있지 않은 경우 컨테이너 단위로 패키징하는 컨테이너 생성 모듈, 상기 디코드된 전송 패킷을 렌더링하는 렌더러 모듈 및 상기 미디어 재생 장치에 구비되는 복수의 디코더 중에서 어느 디코더로 디코딩을 수행할지를 제어하는 디코드 컨트롤러 모듈 중에서 적어도 하나 이상의 모듈을 포함하는 미디어 서비스 장치.