KR20140093849A - Method and system for web screen streaming based on dom mutation event - Google Patents

Method and system for web screen streaming based on dom mutation event Download PDF

Info

Publication number
KR20140093849A
KR20140093849A KR1020130005852A KR20130005852A KR20140093849A KR 20140093849 A KR20140093849 A KR 20140093849A KR 1020130005852 A KR1020130005852 A KR 1020130005852A KR 20130005852 A KR20130005852 A KR 20130005852A KR 20140093849 A KR20140093849 A KR 20140093849A
Authority
KR
South Korea
Prior art keywords
web page
streaming
dom
web
storing
Prior art date
Application number
KR1020130005852A
Other languages
Korean (ko)
Other versions
KR101480214B1 (en
Inventor
김상태
김재정
이수빈
Original Assignee
한국과학기술원
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 한국과학기술원 filed Critical 한국과학기술원
Priority to KR20130005852A priority Critical patent/KR101480214B1/en
Publication of KR20140093849A publication Critical patent/KR20140093849A/en
Application granted granted Critical
Publication of KR101480214B1 publication Critical patent/KR101480214B1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

A document object model (DOM) mutation event based web screen streaming method and a system thereof are disclosed. A web screen streaming method comprises the steps of: detecting a DOM mutation event generated between a previous frame and a present frame of a web page rendered in a first device; storing a part area of the web page according to the DOM mutation event; and providing the part area of the web page to partially stream the web page.

Description

ＤＯＭ 변이 이벤트 기반 웹 화면 스트리밍 방법 및 시스템{METHOD AND SYSTEM FOR WEB SCREEN STREAMING BASED ON DOM MUTATION EVENT}[0001] METHOD AND SYSTEM FOR WEB SCREEN STREAMING BASED ON DOM MUTATION EVENT [0002]

본 발명의 실시예들은 웹 컨텐츠의 부분적인 공유 및 이동을 지원하는 웹 화면 스트리밍 기술에 관한 것이다.Embodiments of the present invention are directed to web screen streaming techniques that support partial sharing and movement of web content.

웹 기반 서비스는 HTTP(hyper text transfer protocol)에 의하여 전송되는 HTML(hyper text markup language) 문서를 통해 인터페이스가 이루어지는 것을 특징으로 한다. HTML 문서는 미리 정의된 정적인 태그(tag)를 이용한 표현과 스크립트(JavaScript)를 통해 표현된 컨텐츠의 동적인 변환이 가능하다. 이러한 스크립트는 HTML 태그를 통해 표현된 문서에 대한 DOM(Document Object Model) 객체를 지원함으로써 쉽고 자유로운 변환을 가능하게 한다.The web-based service is characterized in that an interface is made through an HTML (hyper text markup language) document transmitted by hyper text transfer protocol (HTTP). The HTML document is capable of expressing using a predefined static tag and dynamically converting the content expressed through a script (JavaScript). These scripts support Document Object Model (DOM) objects for documents rendered through HTML tags, making it easy and free to transform.

그러나, HTML 문서는 하나의 디바이스에서 표현되는 것을 가정으로 W3C(world wide web consortium) 표준 규약이 정해져 있기 때문에 현재 표현되고 있는 웹 서비스의 일부 영역에 대한 공유, 이동, 결합을 수행하고자 하는 경우 서비스 자체적으로 이러한 기능을 지원하지 않는다면 불가능하다는 한계를 갖는다. 예를 들어, 서비스 자체적으로 공유되는 DB(데이터베이스)를 통한 이동 및 공유를 지원하는 'Google Docs' 서비스의 경우 원격의 접속자간에 공동작업이 가능하지만 협업을 지원하지 않는 일반적인 사이트(예컨대, Naver Map, Google Map 등)의 경우 접속된 사용자간 웹 컨텐츠의 공유가 불가능하다.However, since the W3C (World Wide Web Consortium) standard protocol is defined assuming that the HTML document is expressed in one device, if the user wishes to share, move, and combine the presently expressed part of the Web service, If you do not support these features, you have a limit. For example, the 'Google Docs' service, which supports moving and sharing through a DB (database) that is shared by the service itself, is a common site that can collaborate between remote users but does not support collaboration (eg, Naver Map, Google Map, etc.), it is impossible to share web contents among connected users.

컨텐츠 공유를 위한 한가지 방법으로, 한국공개특허 제10-2010-0092712호(공개일 2010년 08월 23일)에서는 단순하게 제1 단말기의 화면 상에서 소정 영역의 정보를 캡쳐하여 캡쳐된 정보를 이미지 데이터로 변환하여 제2 단말기로 전송하는 데이터 공유 기술이 개시되어 있다.In Korean Patent Laid-Open No. 10-2010-0092712 (published on Aug. 23, 2010), as one method for content sharing, information of a predetermined area is simply captured on the screen of the first terminal, And transmits the data to the second terminal.

또한, 컨텐츠 공유를 위한 다른 하나의 방법으로, 현재 렌더링 되고 있는 페이지에 대한 화면 스트리밍을 통한 공유 방법이 있지만 이는 스트리밍의 높은 프로세싱이 요구되고, 특히 프레임간 픽셀 변화량에 기초한 실시간 동영상 인코딩/디코딩 방식의 경우 웹 상에서 구동되기에는 높은 대역폭 및 CPU 점유율을 요구하게 된다.In addition, there is a sharing method through screen streaming for currently rendered pages as another method for contents sharing. However, this requires high processing of streaming, and in particular, a real-time video encoding / decoding method based on inter- It requires high bandwidth and CPU share to run on the web.

따라서, 본 명세서에서는 웹 컨텐츠의 부분적인 공유 및 이동을 지원하는 웹 화면 스트리밍 기술을 제안한다.Therefore, in the present specification, a web screen streaming technology that supports partial sharing and movement of web contents is proposed.

웹 이벤트 기반의 선택적인 스트리밍을 통해 웹 상황에 최적화 된 웹 컨텐츠의 부분적인 공유 및 이동을 지원하는 웹 화면 스트리밍 방법 및 시스템을 제공한다.A web screen streaming method and system for supporting partial sharing and movement of web contents optimized for web situation through selective streaming based on web events are provided.

협업 기능을 지원하지 않는 웹 서비스에 대하여 사용자 간 또는 디바이스 간 부분적 공유, 이동, 결합 서비스를 지원하는 웹 화면 스트리밍 방법 및 시스템을 제공한다.A web screen streaming method and system for partially sharing, moving, and combining services between users or between devices for a web service that does not support a collaboration function are provided.

본 발명에 실시예에 따르면, 웹 화면 스트리밍 방법은, 제1 디바이스에 렌더링(rendering) 되는 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM(document object model) 변이 이벤트(mutation event)를 검출하는 단계; 상기 DOM 변이 이벤트에 따라 상기 웹 페이지의 일부 영역을 저장하는 단계; 및 상기 웹 페이지에 대한 부분적인 스트리밍을 위해 상기 웹 페이지의 일부 영역을 제공하는 단계를 포함할 수 있다.According to an embodiment of the present invention, a web screen streaming method includes: detecting a document object model (DOM) mutation event occurring between a previous frame and a current frame of a web page rendered on a first device; ; Storing a part of the web page according to the DOM mutation event; And providing a portion of the web page for partial streaming to the web page.

일 측면에 따르면, 상기 DOM 변이 이벤트를 검출하는 단계는, 상기 제1 디바이스에 설치된 브라우저(browser)의 확장 기능(extension) 또는 플러그인(plug-in)을 이용하여 상기 웹 페이지에 해당되는 HTML(hyper text transfer protocol) 문서의 DOM 트리 상의 변화를 나타내는 상기 DOM 변이 이벤트를 검출할 수 있다.According to an aspect of the present invention, the step of detecting the DOM mutation event may include detecting an HTML mutation event by using an extension or a plug-in of a browser installed in the first device, text transfer protocol) < / RTI > document.

다른 측면에 따르면, 상기 브라우저의 확장 기능 또는 플러그인은 자바스크립트(JavaScript)를 기반으로 하는 확장 프로그램을 의미할 수 있다.According to another aspect, the browser extensions or plug-ins may refer to extensions based on JavaScript.

또 다른 측면에 따르면, 상기 브라우저의 확장 기능 또는 플러그인은 C 언어를 확장한 객체 지향 프로그래밍 언어인 C++(C plus plus)를 기반으로 하는 확장 프로그램을 의미할 수 있다.According to another aspect, the browser extension function or plug-in may refer to an extension program based on C ++ (C plus plus), which is an object-oriented programming language extending C language.

또 다른 측면에 따르면, 상기 DOM 변이 이벤트는 HTML 5 규약에 의해 정의된 이벤트 타입인 DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified 중 적어도 하나의 이벤트를 의미할 수 있다.According to another aspect, the DOM mutation event may be at least one of an event type defined by HTML 5 protocol, DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified.

또 다른 측면에 따르면, 상기 웹 페이지의 일부 영역을 저장하는 단계는, 상기 웹 페이지의 일부 영역에 대한 비트맵 이미지를 저장할 수 있다.According to another aspect, storing a portion of the web page may store a bitmap image for a portion of the web page.

또 다른 측면에 따르면, 상기 웹 페이지의 일부 영역을 저장하는 단계는, 상기 웹 페이지의 일부 영역에 대한 HTML DOM 정보를 저장할 수 있다.According to another aspect, the step of storing the partial area of the web page may store the HTML DOM information of the partial area of the web page.

또 다른 측면에 따르면, 상기 제1 디바이스의 사용자에 의해 상기 웹 페이지에서 상기 일부 영역이 선택될 수 있으며, 이때 상기 웹 페이지의 일부 영역을 저장하는 단계는, 상기 DOM 변이 이벤트가 상기 일부 영역 내에서 발생하는 경우 상기 웹 페이지의 일부 영역을 저장할 수 있다.According to another aspect, the partial region may be selected by the user of the first device in the web page, wherein storing the partial region of the web page further comprises: And may store a part of the web page if it occurs.

또 다른 측면에 따르면, 상기 웹 페이지의 일부 영역을 저장하는 단계는, 상기 웹 페이지에 해당되는 HTML 문서의 DOM 트리 상에서 변화가 발생된 특정 DOM 노드가 검출되면 상기 특정 DOM 노드의 좌표 정보를 통해 상기 웹 페이지의 일부 영역을 결정할 수 있다.According to another aspect of the present invention, the step of storing the partial region of the web page includes the steps of: when a specific DOM node in which a change occurs on the DOM tree of the HTML document corresponding to the web page is detected, You can determine some areas of the web page.

또 다른 측면에 따르면, 상기 웹 페이지의 일부 영역을 저장하는 단계는, 상기 특정 DOM 노드 및 상기 특정 DOM 노드의 하위 노드 중 적어도 하나의 노드에서 일정 개수 이상의 상기 DOM 변이 이벤트가 검출되는 경우 상기 웹 페이지의 일부 영역을 저장할 수 있다.According to another aspect of the present invention, the step of storing a partial region of the web page includes the steps of: when a predetermined number of DOM transition events are detected in at least one of the specific DOM node and the child nodes of the specific DOM node, And the like.

또 다른 측면에 따르면, 상기 웹 페이지의 일부 영역을 제공하는 단계는, 상기 웹 페이지의 일부 영역을 상기 웹 페이지에 대한 화면 스트리밍을 서비스 하는 스트리밍 서버로 전송할 수 있으며, 이때 상기 웹 페이지의 일부 영역은 상기 스트리밍 서버에 접속된 제2 디바이스로 전송되어 상기 제2 디바이스 상에서 렌더링 될 수 있다.According to another aspect of the present invention, the step of providing a partial area of the web page may transmit a partial area of the web page to a streaming server that provides screen streaming for the web page, May be transmitted to a second device connected to the streaming server and rendered on the second device.

본 발명에 실시예에 따르면, 웹 화면 스트리밍 장치는, 제1 디바이스에 렌더링 되는 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 검출하는 검출부; 상기 DOM 변이 이벤트에 따라 상기 웹 페이지의 일부 영역을 저장하는 저장부; 및 상기 웹 페이지의 일부 영역을 상기 웹 페이지에 대한 화면 스트리밍을 서비스 하는 스트리밍 서버로 전송하는 전송부를 포함할 수 있으며, 이때 상기 웹 페이지의 일부 영역은 상기 스트리밍 서버에 접속된 제2 디바이스로 전송되어 상기 제2 디바이스 상에서 렌더링 될 수 있다.According to an embodiment of the present invention, a web screen streaming apparatus includes: a detecting unit detecting a DOM mutation event occurring between a current frame and a previous frame of a web page rendered in a first device; A storage unit for storing a part of the web page according to the DOM mutation event; And a transmitting unit for transmitting a portion of the web page to a streaming server that provides screen streaming for the web page, wherein a portion of the web page is transmitted to a second device connected to the streaming server And may be rendered on the second device.

본 발명에 실시예에 따르면, 웹 화면 스트리밍 서버는, 제1 디바이스로부터 상기 제1 디바이스에 렌더링 되는 웹 페이지의 일부 영역을 수신하는 수신부; 및 상기 웹 페이지에 대한 부분적인 스트리밍을 위해 상기 웹 페이지의 일부 영역을 제2 디바이스로 전송하는 전송부를 포함할 수 있으며, 이때 상기 웹 페이지의 일부 영역은 상기 제1 디바이스에서 상기 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 기반으로 결정될 수 있다.According to an embodiment of the present invention, a web screen streaming server comprises: a receiving unit for receiving, from a first device, a part of a web page rendered on the first device; And a transmitter for transmitting a portion of the web page to a second device for partial streaming of the web page, wherein a portion of the web page is transmitted from the first device to a previous frame of the web page, Can be determined based on the DOM mutation event occurring between the current frame and the current frame.

본 발명의 실시예에 따르면, 공유, 이동, 결합을 지원하지 않는 웹 서비스들에 있어서 부분적인 웹 서비스 영역의 이동을 지원함으로써 디바이스 간에 서비스의 자유로운 이동을 지원할 수 있다.According to the embodiment of the present invention, it is possible to support partial movement of a web service area in web services that do not support sharing, movement, and combination, thereby supporting free movement of services between devices.

본 발명의 실시예에 따르면, 웹 사용 상황에서 일반적으로 낮은 빈도수를 가지는 DOM 변이 이벤트를 기반으로 선택적인 스트리밍을 제공함으로써 하드웨어 및 네트워크 점유율을 낮추면서 웹 컨텐츠에 대한 공유 기능을 효과적으로 지원할 수 있다.According to embodiments of the present invention, it is possible to effectively support the sharing function for web contents while reducing the hardware and network share by providing selective streaming based on the DOM mutation event having a generally low frequency in the web use situation.

도 1은 본 발명의 일 실시예에 있어서, 웹 컨텐츠의 부분적인 공유 및 이동을 지원하는 웹 화면 스트리밍 기술을 설명하기 위한 개념도이다.
도 2는 본 발명의 일 실시예에 있어서, 웹 페이지에 대한 부분적인 스트리밍을 위해 웹 페이지의 일부 영역을 선택하는 웹 화면 스트리밍 방법을 도시한 순서도이다.
도 3은 본 발명의 일 실시예에 있어서, 웹 페이지에 대한 부분적인 스트리밍을 위해 웹 페이지의 일부 영역을 선택하는 웹 화면 스트리밍 장치의 내부 구성을 도시한 블록도이다.
도 4는 본 발명의 일 실시예에 있어서, 디바이스 간에 웹 페이지에 대한 부분적인 스트리밍을 서비스 하는 웹 화면 스트리밍 서버의 내부 구성을 도시한 블록도이다.FIG. 1 is a conceptual diagram for explaining a web screen streaming technique for supporting partial sharing and movement of web contents in an embodiment of the present invention. Referring to FIG.
FIG. 2 is a flowchart illustrating a web screen streaming method for selecting a partial area of a web page for partial streaming of a web page in an exemplary embodiment of the present invention. Referring to FIG.
3 is a block diagram illustrating an internal configuration of a web screen streaming apparatus for selecting a portion of a web page for partial streaming of a web page in an exemplary embodiment of the present invention.
4 is a block diagram illustrating an internal configuration of a web screen streaming server that provides partial streaming of web pages among devices in an embodiment of the present invention.

이하, 본 발명의 실시예를 첨부된 도면을 참조하여 상세하게 설명한다.
DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS Hereinafter, embodiments of the present invention will be described in detail with reference to the accompanying drawings.

본 실시예에서는 웹 이벤트 기반의 선택적인 스트리밍을 통해 웹 상황에 최적화 된 웹 컨텐츠의 부분적인 공유, 이동, 결합 등을 지원하는 웹 화면 스트리밍 기술을 제안한다.The present embodiment proposes a web screen streaming technique that supports partial sharing, movement, and combination of web contents optimized for web situations through selective streaming based on web events.

본 명세서에서, '디바이스'는 스마트폰(smart phone), 노트북 컴퓨터(laptop computer), 디지털 방송용 단말기, 태블릿(tablet) 등과 같이 유선 또는 무선 통신 네트워크를 통해 웹 기반 서비스의 이용이 가능한 모든 단말기를 의미할 수 있다.Herein, the term 'device' refers to all terminals capable of using a web-based service through a wired or wireless communication network, such as a smart phone, a laptop computer, a digital broadcasting terminal, a tablet, can do.

도 1은 본 발명의 실시예에 따른 웹 컨텐츠에 대한 부분적인 스트리밍 기술의 개념을 나타내는 도면이다.1 is a diagram illustrating a concept of a partial streaming technique for web contents according to an embodiment of the present invention.

도 1을 참조하면, 스트리밍 서버(100)는 디바이스(101)(102) 간에 웹 화면에 대한 스트리밍을 통해 웹 컨텐츠의 부분적인 공유를 지원할 수 있다. 이때, 스트리밍 서버(100)는 일대일(1:1)은 물론 다대일(N:1), 일대다(1:N), 다대다(N:N) 환경에서 웹 화면 스트리밍을 제공할 수 있다.Referring to FIG. 1, a streaming server 100 may support partial sharing of web contents through streaming of a web screen between devices 101 and 102. At this time, the streaming server 100 can provide web screen streaming in a one-to-one (1: 1), as well as many-to-one (N: 1), one-to-many (1: N) and many-to-many (N: N) environment.

스트리밍 서버(100)는 적어도 하나의 제1 디바이스(101)의 브라우저에서 렌더링 되고 있는 웹 화면(A)의 일부 영역(a)을 적어도 하나의 제2 디바이스(102)를 대상으로 스트리밍 할 수 있다. 이때, 제1 디바이스(101)와 제2 디바이스(102)는 동일 기종의 통신 단말이거나 이기종의 통신 단말일 수 있으며, 또한 동일 사용자의 통신 단말이거나 서로 다른 사용자의 통신 단말일 수 있다.The streaming server 100 may stream a partial area a of the web screen A being rendered in the browser of the at least one first device 101 to at least one second device 102. [ At this time, the first device 101 and the second device 102 may be communication terminals of the same model, different communication terminals, communication terminals of the same user, or communication terminals of different users.

통신 단말의 브라우저 상에서는 클라이언트 소켓(client socket)으로 실행되므로 웹 컨텐츠의 부분적인 공유를 위해서는 서버 소켓(server socket)으로 실행될 수 있는 중계 서버로서 스트리밍 서버(100)를 적용할 수 있다.The streaming server 100 can be applied as a relay server that can be executed as a server socket in order to partially share web contents because it is executed as a client socket on the browser of the communication terminal.

도 1에 도시한 바와 같이, 제1 디바이스(101)와 제2 디바이스(102)의 브라우저 상에서 ID/PW 입력창이 웹 화면(A)의 일부 영역(a)으로서 부분적인 공유가 일어난다고 가정할 때 다음과 같은 과정을 거치게 된다.Assuming that an ID / PW input window on the browser of the first device 101 and the second device 102 is partially shared as a partial area (a) of the web screen A, as shown in Fig. 1 The following process is performed.

1. 제1 디바이스(101)의 브라우저에서 네이버 URL(https://www.naver.com)에 접속하여 해당 서비스 화면을 렌더링 하게 된다.1. The browser of the first device 101 accesses the Naver URL (https://www.naver.com) to render the corresponding service screen.

2. 제1 디바이스(101)의 브라우저 상에 렌더링 된 서비스 화면의 일부 영역인 ID/PW 입력창에 대한 이미지 또는 DOM 정보가 스트리밍 서버(100)로 전송된다.2. The image or DOM information about the ID / PW input window, which is a part of the service screen rendered on the browser of the first device 101, is transmitted to the streaming server 100.

3. 제2 디바이스(102)의 브라우저가 스트리밍 서버(100)와의 접속 시 네이버의 ID/PW 입력창에 대한 이미지 또는 DOM 정보가 제2 디바이스(102)의 브라우저에 전송되어 렌더링 된다.3. When the browser of the second device 102 connects with the streaming server 100, the image or DOM information of the ID / PW input window of the neighbor is transmitted to the browser of the second device 102 and rendered.

본 실시예에서 스트리밍 서버(100)는 제1 디바이스(101)의 브라우저에서 DOM 변이 이벤트 발생 시 렌더링 된 화면 정보의 일부를 제2 디바이스(102)를 대상으로 스트리밍 함으로써 제1 디바이스(101)와 제2 디바이스(102) 간의 입출력 정보 연계를 통한 이동 연속성을 지원할 수 있다.In the present embodiment, the streaming server 100 streams a part of the screen information rendered when the DOM mutation event is generated in the browser of the first device 101 to the second device 102, Output information linkage between the first device 102 and the second device 102.

이하에서는 HTML DOM 구조 상의 DOM 변이 이벤트를 기반으로 한 선택적인 스트리밍을 통해 웹 기반 서비스의 부분적인 공유 기능을 지원하는 과정을 구체적으로 설명하기로 한다.Hereinafter, the process of supporting the partial sharing function of the Web-based service through the selective streaming based on the DOM mutation event on the HTML DOM structure will be described in detail.

도 2는 본 발명의 일 실시예에 있어서, 웹 페이지에 대한 부분적인 스트리밍을 위해 웹 페이지의 일부 영역을 선택하는 웹 화면 스트리밍 방법을 도시한 순서도이다.FIG. 2 is a flowchart illustrating a web screen streaming method for selecting a partial area of a web page for partial streaming of a web page in an exemplary embodiment of the present invention. Referring to FIG.

일 실시예에 따른 웹 화면 스트리밍 방법은 이하에서 설명하게 될 웹 화면 스트리밍 장치에 의해 각각의 단계가 수행될 수 있다. 이때, 웹 화면 스트리밍 방법을 수행하기 위한 하드웨어 주체인 웹 화면 스트리밍 장치는 웹 기반의 서비스 화면을 렌더링 할 수 있는 브라우저가 설치된 모든 디바이스 상에 구현될 수 있다.The web screen streaming method according to an exemplary embodiment may be performed by a web screen streaming apparatus, which will be described below. At this time, a web screen streaming device, which is a hardware entity for performing a web screen streaming method, can be implemented on all devices having a browser capable of rendering a web-based service screen.

단계(S210)에서 웹 화면 스트리밍 장치는 브라우저에 렌더링 되는 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 검출할 수 있다. 이때, 웹 화면 스트리밍 장치는 브라우저의 확장 기능 또는 플러그인을 이용하여 해당 HTML 문서 내에서 DOM 트리 상의 변화를 나타내는 DOM 변이 이벤트를 검출할 수 있다.In step S210, the web screen streaming apparatus can detect a DOM mutation event occurring between a previous frame and a current frame of a web page rendered in the browser. At this time, the web screen streaming device can detect a DOM mutation event indicating a change in the DOM tree in the corresponding HTML document by using an extension function or plug-in of the browser.

본 실시예에서 DOM 변이 이벤트의 검출 역할을 하는 브라우저의 확장 기능 또는 플러그인은 자바스크립트(JavaScript)를 기반으로 하는 확장 프로그램이거나, C 언어를 확장한 객체 지향 프로그래밍 언어인 C++(C plus plus)를 기반으로 하는 확장 프로그램일 수 있다.In this embodiment, the browser extension function or plug-in serving as a DOM mutation event is an extension program based on JavaScript or C ++ (C plus plus) which is an object-oriented programming language that extends C language As shown in FIG.

HTML DOM은 HTML을 통해 표현되는 정보들을 트리 구조로 계층화 한 객체 모델(object model)이다. 이러한 DOM 트리 상에서 상위 계층의 DOM 노드들이 페이지의 레이아웃을 정하고 있다면 하위 노드로 갈수록 세부 정보를 담고 있으며 이들의 위치는 상위 노드에 의해 상대적으로 결정되는 것이다. 본 실시예에서 DOM 변이 이벤트는 HTML 5 규격 내에 정의된 이벤트로서 동적인 웹 페이지에서 DOM 트리 상의 변화가 있을 경우 발생되는 이벤트를 의미할 수 있다.The HTML DOM is an object model in which information expressed through HTML is layered in a tree structure. If the DOM nodes of the upper layer in the DOM tree define the layout of the page in this DOM tree, the details are contained in the descending node, and their positions are determined relatively by the upper node. In the present embodiment, the DOM mutation event is an event defined in the HTML 5 standard, which may be an event that occurs when there is a change in the DOM tree in a dynamic web page.

결과적으로는 DOM 트리 상의 변화는 브라우저에 렌더링 된 화면에 표시되는 정보의 변화를 의미하고, 본 실시예에서는 이러한 변화가 있을 때마다 스트리밍 이벤트를 발생시킴에 따라 불필요한 스트리밍 이벤트를 줄이는 것이 본 발명의 목적 중 하나라고 할 수 있다. 스트리밍 이벤트는 1차적으로 웹 화면의 일부 영역에 대한 사용자의 선택에 의해 생성되며, 이후에는 DOM 변이 이벤트의 발생 위치 또는 발생 빈도에 따라 스트리밍 이벤트에 대한 업데이트 여부가 결정되는 것이다.As a result, a change in the DOM tree means a change in information displayed on the screen rendered by the browser. In this embodiment, it is possible to reduce unnecessary streaming events by generating a streaming event every time there is such a change, . The streaming event is primarily generated by the user's selection of a part of the web screen, and then whether or not the streaming event is updated is determined according to the occurrence position or occurrence frequency of the DOM mutation event.

이에, 웹 화면 스트리밍 장치에서는 HTML 5에 의해 정의된 아래 표 1의 이벤트 중 적어도 하나의 DOM 변이 이벤트를 이용하여 웹 화면에 대한 정보 변화를 검출할 수 있다.Accordingly, in the web screen streaming apparatus, it is possible to detect a change in the information about the web screen by using at least one DOM transition event defined in HTML 5 defined in Table 1 below.

이벤트 타입Event type 설명Explanation DOMAttrModifiedDOMAttrModified 노드의 속성이 변경될 때 발생하는 이벤트Events that occur when a node's attributes change DOMAttributeNameChangedDOMAttributeNameChanged 노드의 속성을 규정하는 이름(AttributeName)이 교체될 때 발생하는 이벤트The event that occurs when the name (AttributeName) that defines the attributes of the node is replaced DOMCharacterDataModifiedDOMCharacterDataModified 노드의 캐릭터데이터(CharacterData)가 수정될 때 발생하는 이벤트The event that occurs when the node's character data (CharacterData) is modified DOMElementNameChangedDOMElementNameChanged 노드의 요소를 규정하는 이름(ElementName)이 교체될 때 발생하는 이벤트The event that occurs when the name (ElementName) that defines the element of the node is replaced DOMNodeInsertedDOMNodeInserted 노드가 다른 노드의 자식으로 추가될 때 발생하는 이벤트Events that occur when a node is added as a child of another node DOMNodeInsertedIntoDocumentDOMNodeInsertedIntoDocument 노드가 하위 노드에 삽입되거나 문서에 삽입될 때 발생하는 이벤트Events that occur when a node is inserted into a child node or inserted into a document DOMNodeRemovedDOMNodeRemoved 노드가 상위 노드에서 제거될 때 발생하는 이벤트Events that occur when a node is removed from an ancestor DOMNodeRemovedFromDocumentDOMNodeRemovedFromDocument 노드가 하위 노드에서 제거되거나 문서에서 제거될 때 발생하는 이벤트Events that occur when a node is removed from a child node or removed from a document DOMSubtreeModifiedDOMSubtreeModified 문서의 모든 변경 사항에 대한 알림을 나타내는 이벤트Events representing notifications of all changes to the document

단계(S220)에서 웹 화면 스트리밍 장치는 브라우저를 통해 렌더링 되는 웹 페이지에서 검출된 DOM 변이 이벤트를 기준으로 해당 웹 페이지의 일부 영역을 저장할 수 있다. 이때, 웹 페이지의 일부 영역에 대한 저장은 렌더링 된 화면의 일부 영역이 비트맵 이미지로 저장되는 것을 의미하거나, 렌더링 된 화면의 일부 영역이 HTML DOM 정보로 저장되는 것을 의미할 수 있다.In step S220, the web screen streaming apparatus can store a part of the web page based on the DOM mutation event detected in the web page rendered through the browser. At this time, the storage of a part of the web page means that a part of the rendered screen is stored as a bitmap image, or a part of the rendered screen is stored as HTML DOM information.

일 예로, 웹 화면 스트리밍 장치에서는 웹 페이지에 해당되는 HTML 문서의 DOM 트리 상에서 변화가 발생된 특정 DOM 노드가 검출되면 특정 DOM 노드의 좌표 정보를 통해 부분적인 스트리밍을 위한 웹 페이지의 일부 영역을 결정할 수 있다. 해당 DOM 변이 이벤트가 사용자에 의해 사전에 설정된 관심 영역, 즉 웹 페이지의 일부 영역 안에서 발생된 것인지에 따라 해당 웹 페이지의 일부 영역에 대한 저장 여부가 결정될 수 있다. 다시 말해, DOM 변이 이벤트의 발생 위치가 사용자에 의해 사전에 설정된 영역 안에서 발생하는 경우에는 해당 웹 페이지의 일부 영역을 저장하고 그렇지 않은 경우에는 해당 웹 페이지의 일부 영역을 저장하지 않는다. 이때, DOM 트리 상에서 변화가 발생된 특정 DOM 노드 및 특정 DOM 노드의 하위 노드 중 적어도 하나의 노드에서 일정 개수 이상의 DOM 변이 이벤트가 검출되는 경우에 해당 웹 페이지의 일부 영역에 대한 저장이 이루어질 수 있다. DOM 변이 이벤트를 통해 어떤 노드가 추가, 또는 삭제, 또는 변경 등이 발생되었는지 여부를 확인할 수 있고 페이지 전체적으로 몇 개의 이벤트가 발생했는지 혹은 노드 각각의 위치 정보를 통해 화면의 어떤 영역에서 변화가 발생했는지 등을 확인할 수 있다. 이러한 방식으로 특정 DOM 노드가 선택되었을 때(위의 예시와 같이 ID/PW창과 관련된 노드) 해당 노드의 좌표 정보를 통해 영역을 결정하고, 예컨대 해당 노드의 하위 노드들에서 1개 이상의 DOM 변이 이벤트가 발생할 때 해당 영역에 대한 정보를 업데이트 하게 된다.For example, in the web screen streaming apparatus, when a specific DOM node in which a change occurs in a DOM tree of an HTML document corresponding to a web page is detected, a partial region of the web page for partial streaming can be determined through the coordinate information of a specific DOM node have. Whether or not the DOM mutation event is stored in a certain area of the web page may be determined depending on whether the DOM mutation event has occurred in a predetermined area of interest set by the user, i.e., within a certain area of the web page. In other words, when the occurrence position of the DOM mutation event occurs within a preset area by the user, a part of the web page is stored, and otherwise, a part of the web page is not stored. At this time, when a certain number of DOM transition events are detected in at least one of the specific DOM node in which the change has occurred on the DOM tree and the lower node of the specific DOM node, storage can be performed on a part of the web page. You can check whether a node has been added, deleted, or changed through the DOM mutation event, and how many events have occurred throughout the page, or what area of the screen has changed through the location information of each node can confirm. In this way, when a specific DOM node is selected (the node related to the ID / PW window as in the above example), the region is determined through the coordinate information of the corresponding node, and for example, one or more DOM mutation events And updates information about the area when it occurs.

단계(S230)에서 웹 화면 스트리밍 장치는 브라우저를 통해 렌더링 되는 웹 페이지에 대한 부분적인 스트리밍을 위해 상기 단계(S220)에서 저장된 웹 페이지의 일부 영역을 제공할 수 있다. 일 예로, 웹 화면 스트리밍 장치는 상기 저장된 웹 페이지의 일부 영역을 해당 웹 페이지에 대한 화면 스트리밍을 서비스 하는 스트리밍 서버로 전송할 수 있으며, 이때 웹 화면 스트리밍 장치에서 전송된 웹 페이지의 일부 영역은 스트리밍 서버를 통해 접속 상태의 다른 디바이스로 전송되어 해당 디바이스의 브라우저를 통해 렌더링 될 수 있다.In step S230, the web screen streaming apparatus may provide a partial area of the web page stored in step S220 for partial streaming of the web page rendered through the browser. For example, the web screen streaming device may transmit a portion of the stored web page to a streaming server that provides screen streaming for the web page. At this time, a portion of the web page transmitted from the web screen streaming device may include a streaming server To another device in the connected state and can be rendered through the browser of the device.

상기한 과정의 웹 화면 스트리밍 방법에 대하여 다시 도 1을 참조하여 정리하면, 제1 디바이스(101)의 사용자가 제1 디바이스(101) 상에 렌더링 된 서비스 화면에서 관심 영역, 즉 ID/PW 입력창을 선택하게 되면 ID/PW 입력창에 대하여 제2 디바이스(102)로의 스트리밍이 이루어진다. 이러한 스트리밍 이벤트는 제1 디바이스(101)의 사용자가 웹 화면(A)에서 미리 설정해 놓은 관심 영역에 대하여 제2 디바이스(102)를 대상으로 스트리밍이 일어나는 과정에서 DOM 변이 이벤트가 해당 영역 내에서 일정 정도 이상 발생할 경우 스트리밍 이벤트를 업데이트 하는 형태로 이루어지게 된다. 다시 말해, 관심 영역은 사용자가 제1 디바이스(101) 상에 렌더링 된 웹 화면(A)에서 설정한 일부 영역(a)이고, 초기 연결 시 해당 영역(a)에 대하여 사용자에 의해 선택된 시점의 이미지나 DOM 정보가 중계 서버를 거쳐 다른 디바이스의 브라우저로 전송되게 되고, 이후에는 DOM 변이 이벤트에 대한 감시를 통해 해당 영역(a) 안에서의 화면 변화가 감지될 때마다 스트리밍 이벤트를 업데이트 하게 된다. 만약, 웹 화면(A)에서 DOM 변이 이벤트가 발생하더라도 해당 이벤트가 사용자에 의해 선택된 일부 영역(a)이 아닌 위치에서 발생할 경우에는 스트리밍 이벤트가 업데이트 되지 않는 것이다.1, the user of the first device 101 displays a stream of interest on the service screen rendered on the first device 101, that is, an ID / PW input window The streaming to the second device 102 is performed with respect to the ID / PW input window. Such a streaming event is generated when a user of the first device 101 performs streaming of the ROI to the second device 102 with respect to the ROI preset in the web screen A, The streaming event is updated. In other words, the ROI is a partial area (a) set by the user on the web screen A rendered on the first device 101, and the image of the point of time selected by the user with respect to the area (a) The DOM information is transmitted to the browser of the other device through the relay server, and then the streaming event is updated every time a screen change in the corresponding region (a) is detected through monitoring of the DOM mutation event. Even if a DOM mutation event occurs in the web screen A, the streaming event is not updated if the event occurs in a location other than the selected area a selected by the user.

상기에서는 제1 디바이스(101)를 중심으로 설명하였으나, 제2 디바이스(102) 또한 브라우저에서 렌더링 되고 있는 웹 화면에 대하여 DOM 변이 이벤트를 이용한 부분적인 스트리밍 동작을 수행할 수 있다.Although the first device 101 has been described above, the second device 102 can also perform a partial streaming operation using a DOM mutation event on a web screen rendered in a browser.

따라서, 본 실시예에서는 공유, 이동, 결합을 지원하지 않는 웹 서비스들에 있어서 DOM 변이 이벤트를 기반으로 디바이스 간에 선택적인 스트리밍을 지원할 수 있으며, 관심 영역 내에서의 변화가 있을 때 스트리밍 이벤트를 업데이트 함으로써 불필요한 스트리밍 이벤트를 줄일 수 있다.Accordingly, in this embodiment, selective streaming between devices can be supported based on the DOM mutation event in Web services that do not support sharing, movement, and combination, and updating of streaming events when there is a change in the ROI You can reduce unnecessary streaming events.

도 3은 본 발명의 일 실시예에 있어서, 웹 페이지에 대한 부분적인 스트리밍을 위해 웹 페이지의 일부 영역을 선택하는 웹 화면 스트리밍 장치의 내부 구성을 도시한 블록도이다.3 is a block diagram illustrating an internal configuration of a web screen streaming apparatus for selecting a portion of a web page for partial streaming of a web page in an exemplary embodiment of the present invention.

도 3에 도시한 바와 같이, 일 실시예에 따른 웹 화면 스트리밍 장치(300)는 검출부(310), 저장부(320), 및 전송부(330)를 포함하여 구성될 수 있다.3, the web screen streaming apparatus 300 according to an exemplary embodiment of the present invention may include a detection unit 310, a storage unit 320, and a transmission unit 330.

검출부(310)는 브라우저에 렌더링 되는 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 검출하는 역할을 수행한다. 일 예로, 검출부(310)는 브라우저의 확장 기능 또는 플러그인을 이용하여 해당 HTML 문서 내에서 DOM 트리 상의 변화를 나타내는 DOM 변이 이벤트를 검출할 수 있다. 이때, 브라우저의 확장 기능 또는 플러그인은 자바스크립트를 기반으로 하는 확장 프로그램이거나, C 언어를 확장한 객체 지향 프로그래밍 언어인 C++를 기반으로 하는 확장 프로그램일 수 있다. 본 실시예에서, DOM 변이 이벤트는 동적인 웹 페이지에서 DOM 트리 상의 변화가 있을 경우 발생되는 이벤트로서, HTML 5 규약에 의해 정의된 이벤트 타입인 DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified 중 적어도 하나의 이벤트를 포함할 수 있다.The detecting unit 310 detects a DOM mutation event occurring between a previous frame and a current frame of a web page rendered in the browser. For example, the detecting unit 310 may detect a DOM mutation event indicating a change on a DOM tree in a corresponding HTML document using a browser extension function or a plug-in. At this time, the browser extension or plug-in may be an extension based on JavaScript, or an extension based on C ++, an object-oriented programming language that extends C language. In this embodiment, the DOM mutation event is an event that occurs when there is a change on the DOM tree in a dynamic web page. The event type DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified. ≪ / RTI >

저장부(320)는 웹 페이지에서 검출된 DOM 변이 이벤트를 기준으로 해당 웹 페이지의 일부 영역을 저장할 수 있다. 일 예로, 저장부(320)는 웹 페이지에 해당되는 HTML 문서의 DOM 트리 상에서 변화가 발생된 특정 DOM 노드가 검출되면 특정 DOM 노드의 좌표 정보를 통해 부분적인 스트리밍을 위한 웹 페이지의 일부 영역을 결정할 수 있다. 다시 말해, 저장부(320)는 DOM 변이 이벤트의 발생 위치에 따라 해당 웹 페이지의 일부 영역에 대한 저장 여부를 결정할 수 있다. 이때, DOM 트리 상에서 변화가 발생된 특정 DOM 노드 및 특정 DOM 노드의 하위 노드 중 적어도 하나의 노드에서 일정 개수 이상의 DOM 변이 이벤트가 검출되는 경우에 해당 웹 페이지의 일부 영역에 대한 저장이 이루어질 수 있다. 그리고, 저장부(320)는 DOM 변이 이벤트를 기준으로 결정된 웹 페이지의 일부 영역에 대한 비트맵 이미지(캡쳐된 영상) 및 HTML DOM 정보 중 적어도 하나를 저장할 수 있다.The storage unit 320 may store a part of the web page based on the DOM mutation event detected in the web page. For example, when a specific DOM node in which a change occurs in the DOM tree of the HTML document corresponding to the web page is detected, the storage unit 320 determines a partial region of the web page for partial streaming through the coordinate information of the specific DOM node . In other words, the storage unit 320 may determine whether to store the partial region of the web page according to the occurrence position of the DOM mutation event. At this time, when a certain number of DOM transition events are detected in at least one of the specific DOM node in which the change has occurred on the DOM tree and the lower node of the specific DOM node, storage can be performed on a part of the web page. The storage unit 320 may store at least one of a bitmap image (captured image) and HTML DOM information for a part of the web page determined based on the DOM mutation event.

전송부(330)는 저장부(320)에 저장된 웹 페이지의 일부 영역을 해당 웹 페이지에 대한 화면 스트리밍을 지원하는 스트리밍 서버로 전송할 수 있다. 이때, 상기 전송된 웹 페이지의 일부 영역은 스트리밍 서버를 통해 접속 상태의 다른 디바이스로 전송되어 해당 디바이스의 브라우저를 통해 렌더링 될 수 있다.The transmission unit 330 may transmit a part of the web page stored in the storage unit 320 to a streaming server supporting screen streaming for the web page. At this time, a part of the transmitted web page may be transmitted to another connected device through a streaming server and rendered through a browser of the corresponding device.

도 4를 참조하면, 웹 화면에 대한 부분적인 스트리밍을 위해 디바이스 간에 중계 역할을 하는 스트리밍 서버(400)는 기본적으로 수신부(410)와 전송부(420)를 포함하여 구성될 수 있다. 이때, 스트리밍 서버(400)는 디바이스 간에 웹 컨텐츠에 대한 공유, 이동, 결합을 지원하지 않는 웹 기반 서비스에 있어서 해당 웹 서비스를 제공하는 웹 서버에 포함되도록 하여 웹 서버와 하나의 시스템으로 구성되거나, 웹 서버와 별개의 구성으로 구현될 수 있으며 서비스 구현이나 필요에 따라 웹 서버와의 연동이 가능한 형태로 구성될 수 있다.Referring to FIG. 4, a streaming server 400 serving as a relay between devices for partially streaming a web screen may include a receiving unit 410 and a transmitting unit 420 basically. At this time, the streaming server 400 may be configured as a web server and a single system so as to be included in a web server providing the web service in a web-based service that does not support sharing, movement, It can be implemented as a separate configuration from the web server, and can be configured in a form that can be interworked with the web server according to service implementation or need.

수신부(410)는 적어도 하나의 제1 디바이스로부터 제1 디바이스의 브라우저를 통해 렌더링 되는 웹 페이지의 일부 영역을 수신할 수 있다. 이때, 상기 수신된 웹 페이지의 일부 영역은 제1 디바이스에서 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 기반으로 결정된 것이다.The receiving unit 410 may receive a part of the web page rendered through the browser of the first device from the at least one first device. At this time, a part of the received web page is determined based on a DOM mutation event occurring between the previous frame and the current frame of the web page in the first device.

전송부(420)는 디바이스 간의 부분적인 스트리밍을 위해 제1 디바이스로부터 수신된 웹 페이지의 일부 영역을 적어도 하나의 제2 디바이스로 전송하는 역할을 수행할 수 있다. 다시 말해, 제2 디바이스가 스트리밍 서버(400)에 접속하게 되면 전송부(420)에서 제1 디바이스에 렌더링 되는 웹 화면의 일부 영역에 대한 이미지 또는 DOM 정보를 제2 디바이스로 전달할 수 있으며, 이에 웹 기반 서비스에 대해 디바이스 간 웹 화면에 대한 선택적인 스트리밍이 지원될 수 있다.The transmitting unit 420 may transmit a partial area of the web page received from the first device to at least one second device for partial streaming between the devices. In other words, when the second device is connected to the streaming server 400, the transmitting unit 420 may transmit image or DOM information about a part of the web screen rendered on the first device to the second device, Selective streaming to the inter-device web screen for the underlying service may be supported.

이와 같이, 본 발명의 실시예에 따르면, 공유, 이동, 결합을 지원하지 않는 웹 서비스들에 있어서 부분적인 웹 서비스 영역의 이동을 지원함으로써 디바이스 간에 서비스의 자유로운 이동을 지원할 수 있다. 더욱이, 본 발명의 실시예에 따르면, 웹 사용 상황에서 일반적으로 낮은 빈도수를 가지는 DOM 변이 이벤트를 기반으로 선택적인 스트리밍을 제공함으로써 하드웨어 및 네트워크 점유율을 낮추면서 웹 컨텐츠에 대한 공유 기능을 효과적으로 지원할 수 있다.As described above, according to the embodiment of the present invention, it is possible to support free movement of services between devices by supporting partial web service area movement in web services that do not support sharing, movement, or combination. Furthermore, according to embodiments of the present invention, it is possible to effectively support the sharing function for web contents while reducing hardware and network share by providing selective streaming based on a DOM mutation event having a generally low frequency in a web use situation .

이상에서 설명된 장치는 하드웨어 구성요소, 소프트웨어 구성요소, 및/또는 하드웨어 구성요소 및 소프트웨어 구성요소의 조합으로 구현될 수 있다. 예를 들어, 실시예들에서 설명된 장치 및 구성요소는, 예를 들어, 프로세서, 콘트롤러, ALU(arithmetic logic unit), 디지털 신호 프로세서(digital signal processor), 마이크로컴퓨터, FPA(field programmable array), PLU(programmable logic unit), 마이크로프로세서, 또는 명령(instruction)을 실행하고 응답할 수 있는 다른 어떠한 장치와 같이, 하나 이상의 범용 컴퓨터 또는 특수 목적 컴퓨터를 이용하여 구현될 수 있다. 처리 장치는 운영 체제(OS) 및 상기 운영 체제 상에서 수행되는 하나 이상의 소프트웨어 애플리케이션을 수행할 수 있다. 또한, 처리 장치는 소프트웨어의 실행에 응답하여, 데이터를 접근, 저장, 조작, 처리 및 생성할 수도 있다. 이해의 편의를 위하여, 처리 장치는 하나가 사용되는 것으로 설명된 경우도 있지만, 해당 기술분야에서 통상의 지식을 가진 자는, 처리 장치가 복수 개의 처리 요소(processing element) 및/또는 복수 유형의 처리 요소를 포함할 수 있음을 알 수 있다. 예를 들어, 처리 장치는 복수 개의 프로세서 또는 하나의 프로세서 및 하나의 콘트롤러를 포함할 수 있다. 또한, 병렬 프로세서(parallel processor)와 같은, 다른 처리 구성(processing configuration)도 가능하다.The apparatus described above may be implemented as a hardware component, a software component, and / or a combination of hardware components and software components. For example, the apparatus and components described in the embodiments may be implemented within a computer system, such as, for example, a processor, a controller, an arithmetic logic unit (ALU), a digital signal processor, a microcomputer, a field programmable array (FPA) A programmable logic unit (PLU), a microprocessor, or any other device capable of executing and responding to instructions. The processing device may execute an operating system (OS) and one or more software applications running on the operating system. The processing device may also access, store, manipulate, process, and generate data in response to execution of the software. For ease of understanding, the processing apparatus may be described as being used singly, but those skilled in the art will recognize that the processing apparatus may have a plurality of processing elements and / As shown in FIG. For example, the processing unit may comprise a plurality of processors or one processor and one controller. Other processing configurations are also possible, such as a parallel processor.

소프트웨어는 컴퓨터 프로그램(computer program), 코드(code), 명령(instruction), 또는 이들 중 하나 이상의 조합을 포함할 수 있으며, 원하는 대로 동작하도록 처리 장치를 구성하거나 독립적으로 또는 결합적으로(collectively) 처리 장치를 명령할 수 있다. 소프트웨어 및/또는 데이터는, 처리 장치에 의하여 해석되거나 처리 장치에 명령 또는 데이터를 제공하기 위하여, 어떤 유형의 기계, 구성요소(component), 물리적 장치, 가상 장치(virtual equipment), 컴퓨터 저장 매체 또는 장치, 또는 전송되는 신호 파(signal wave)에 영구적으로, 또는 일시적으로 구체화(embody)될 수 있다. 소프트웨어는 네트워크로 연결된 컴퓨터 시스템 상에 분산되어서, 분산된 방법으로 저장되거나 실행될 수도 있다. 소프트웨어 및 데이터는 하나 이상의 컴퓨터 판독 가능 기록 매체에 저장될 수 있다.The software may include a computer program, code, instructions, or a combination of one or more of the foregoing, and may be configured to configure the processing device to operate as desired or to process it collectively or collectively Device can be commanded. The software and / or data may be in the form of any type of machine, component, physical device, virtual equipment, computer storage media, or device , Or may be permanently or temporarily embodied in a transmitted signal wave. The software may be distributed over a networked computer system and stored or executed in a distributed manner. The software and data may be stored on one or more computer readable recording media.

실시예에 따른 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 실시예를 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. 상기된 하드웨어 장치는 실시예의 동작을 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.The method according to an embodiment may be implemented in the form of a program command that can be executed through various computer means and recorded in a computer-readable medium. The computer-readable medium may include program instructions, data files, data structures, and the like, alone or in combination. The program instructions to be recorded on the medium may be those specially designed and configured for the embodiments or may be available to those skilled in the art of computer software. Examples of computer-readable media include magnetic media such as hard disks, floppy disks and magnetic tape; optical media such as CD-ROMs and DVDs; magnetic media such as floppy disks; Magneto-optical media, and hardware devices specifically configured to store and execute program instructions such as ROM, RAM, flash memory, and the like. Examples of program instructions include machine language code such as those produced by a compiler, as well as high-level language code that can be executed by a computer using an interpreter or the like. The hardware devices described above may be configured to operate as one or more software modules to perform the operations of the embodiments, and vice versa.

이상과 같이 실시예들이 비록 한정된 실시예와 도면에 의해 설명되었으나, 해당 기술분야에서 통상의 지식을 가진 자라면 상기의 기재로부터 다양한 수정 및 변형이 가능하다. 예를 들어, 설명된 기술들이 설명된 방법과 다른 순서로 수행되거나, 및/또는 설명된 시스템, 구조, 장치, 회로 등의 구성요소들이 설명된 방법과 다른 형태로 결합 또는 조합되거나, 다른 구성요소 또는 균등물에 의하여 대치되거나 치환되더라도 적절한 결과가 달성될 수 있다.While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments. For example, it is to be understood that the techniques described may be performed in a different order than the described methods, and / or that components of the described systems, structures, devices, circuits, Lt; / RTI > or equivalents, even if it is replaced or replaced.

그러므로, 다른 구현들, 다른 실시예들 및 특허청구범위와 균등한 것들도 후술하는 특허청구범위의 범위에 속한다.Therefore, other implementations, other embodiments, and equivalents to the claims are also within the scope of the following claims.

300: 웹 화면 스트리밍 장치
310: 검출부
320: 저장부
330: 전송부300: Web screen streaming device
310:
320:
330:

Claims (14)

제1 디바이스에 렌더링(rendering) 되는 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM(document object model) 변이 이벤트(mutation event)를 검출하는 단계;
상기 DOM 변이 이벤트에 따라 상기 웹 페이지의 일부 영역을 저장하는 단계; 및
상기 웹 페이지에 대한 부분적인 스트리밍을 위해 상기 웹 페이지의 일부 영역을 제공하는 단계
를 포함하는 웹 화면 스트리밍 방법.Detecting a document object model (DOM) mutation event occurring between a previous frame and a current frame of a web page rendered in the first device;
Storing a part of the web page according to the DOM mutation event; And
Providing a portion of the web page for partial streaming to the web page
The web page streaming method comprising: 제1항에 있어서,
상기 DOM 변이 이벤트를 검출하는 단계는,
상기 제1 디바이스에 설치된 브라우저(browser)의 확장 기능(extension) 또는 플러그인(plug-in)을 이용하여 상기 웹 페이지에 해당되는 HTML(hyper text transfer protocol) 문서의 DOM 트리 상의 변화를 나타내는 상기 DOM 변이 이벤트를 검출하는 것
을 특징으로 하는 웹 화면 스트리밍 방법.The method according to claim 1,
Wherein the detecting the DOM mutation event comprises:
The DOM variation indicating a change in a DOM tree of a hypertext transfer protocol (HTML) document corresponding to the web page by using an extension or a plug-in of a browser installed in the first device, Detecting events
Wherein the streaming method comprises the steps of: 제2항에 있어서,
상기 브라우저의 확장 기능 또는 플러그인은 자바스크립트(JavaScript)를 기반으로 하는 확장 프로그램인 것
을 특징으로 하는 웹 화면 스트리밍 방법.3. The method of claim 2,
The browser extension or plug-in is an extension based on JavaScript
Wherein the streaming method comprises the steps of: 제2항에 있어서,
상기 브라우저의 확장 기능 또는 플러그인은 C 언어를 확장한 객체 지향 프로그래밍 언어인 C++(C plus plus)를 기반으로 하는 확장 프로그램인 것
을 특징으로 하는 웹 화면 스트리밍 방법.3. The method of claim 2,
The browser extension or plug-in is an extension program based on C ++ (C plus plus), an object-oriented programming language that extends C language
Wherein the streaming method comprises the steps of: 제1항에 있어서,
상기 DOM 변이 이벤트는 HTML 5 규약에 의해 정의된 이벤트 타입인 DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified 중 적어도 하나의 이벤트인 것
을 특징으로 하는 웹 화면 스트리밍 방법.The method according to claim 1,
The DOM mutation event is at least one of the following event types defined by the HTML 5 protocol: DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified
Wherein the streaming method comprises the steps of: 제1항에 있어서,
상기 웹 페이지의 일부 영역을 저장하는 단계는,
상기 웹 페이지의 일부 영역에 대한 비트맵 이미지를 저장하는 것
을 특징으로 하는 웹 화면 스트리밍 방법.The method according to claim 1,
Wherein the step of storing a portion of the web page comprises:
Storing a bitmap image for a portion of the web page
Wherein the streaming method comprises the steps of: 제1항에 있어서,
상기 웹 페이지의 일부 영역을 저장하는 단계는,
상기 웹 페이지의 일부 영역에 대한 HTML DOM 정보를 저장하는 것
을 특징으로 하는 웹 화면 스트리밍 방법.The method according to claim 1,
Wherein the step of storing a portion of the web page comprises:
Storing HTML DOM information for a part of the web page
Wherein the streaming method comprises the steps of: 제1항에 있어서,
상기 제1 디바이스의 사용자에 의해 상기 웹 페이지에서 상기 일부 영역이 선택되며,
상기 웹 페이지의 일부 영역을 저장하는 단계는,
상기 DOM 변이 이벤트가 상기 일부 영역 내에서 발생하는 경우 상기 웹 페이지의 일부 영역을 저장하는 것
을 특징으로 하는 웹 화면 스트리밍 방법.The method according to claim 1,
The partial area is selected in the web page by the user of the first device,
Wherein the step of storing a portion of the web page comprises:
Storing a partial area of the web page when the DOM mutation event occurs in the partial area
Wherein the streaming method comprises the steps of: 제1항에 있어서,
상기 웹 페이지의 일부 영역을 저장하는 단계는,
상기 웹 페이지에 해당되는 HTML 문서의 DOM 트리 상에서 변화가 발생된 특정 DOM 노드가 검출되면 상기 특정 DOM 노드의 좌표 정보를 통해 상기 웹 페이지의 일부 영역을 결정하는 것
을 특징으로 하는 웹 화면 스트리밍 방법.The method according to claim 1,
Wherein the step of storing a portion of the web page comprises:
If a specific DOM node in which a change has occurred on the DOM tree of the HTML document corresponding to the web page is detected, a part of the web page is determined through the coordinate information of the specific DOM node
Wherein the streaming method comprises the steps of: 제9항에 있어서,
상기 웹 페이지의 일부 영역을 저장하는 단계는,
상기 특정 DOM 노드 및 상기 특정 DOM 노드의 하위 노드 중 적어도 하나의 노드에서 일정 개수 이상의 상기 DOM 변이 이벤트가 검출되는 경우 상기 웹 페이지의 일부 영역을 저장하는 것
을 특징으로 하는 웹 화면 스트리밍 방법.10. The method of claim 9,
Wherein the step of storing a portion of the web page comprises:
And storing a part of the web page when a certain number or more of the DOM mutation events are detected in at least one of the specific DOM node and the lower node of the specific DOM node
Wherein the streaming method comprises the steps of: 제1항에 있어서,
상기 웹 페이지의 일부 영역을 제공하는 단계는,
상기 웹 페이지의 일부 영역을 상기 웹 페이지에 대한 화면 스트리밍을 서비스 하는 스트리밍 서버로 전송하고,
상기 웹 페이지의 일부 영역은 상기 스트리밍 서버에 접속된 제2 디바이스로 전송되어 상기 제2 디바이스 상에서 렌더링 되는 것
을 특징으로 하는 웹 화면 스트리밍 방법.The method according to claim 1,
Wherein providing a portion of the web page comprises:
Transmitting a part of the web page to a streaming server that provides screen streaming for the web page,
Wherein a portion of the web page is transmitted to a second device connected to the streaming server and rendered on the second device
Wherein the streaming method comprises the steps of: 컴퓨터 시스템이 웹 화면에 대한 부분적인 스트리밍을 제공하도록 제어하는 명령을 포함하는 컴퓨터 판독가능 저장 매체로서,
상기 명령은,
제1 디바이스에 렌더링 되는 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 검출하는 단계;
상기 DOM 변이 이벤트에 따라 상기 웹 페이지의 일부 영역을 저장하는 단계; 및
상기 웹 페이지의 일부 영역을 상기 웹 페이지에 대한 화면 스트리밍을 서비스 하는 스트리밍 서버로 전송하는 단계
를 포함하는 방법에 의하여 상기 컴퓨터 시스템을 제어하며,
상기 웹 페이지의 일부 영역은 상기 스트리밍 서버에 접속된 제2 디바이스로 전송되어 상기 제2 디바이스 상에서 렌더링 되는 것
을 특징으로 하는, 컴퓨터 판독가능 저장 매체.21. A computer readable storage medium comprising instructions for controlling a computer system to provide partial streaming to a web screen,
The command includes:
Detecting a DOM mutation event occurring between a current frame and a previous frame of a web page rendered in the first device;
Storing a part of the web page according to the DOM mutation event; And
Transmitting a portion of the web page to a streaming server that serves screen streaming for the web page
Said computer system controlling said computer system,
Wherein a portion of the web page is transmitted to a second device connected to the streaming server and rendered on the second device
Gt; computer-readable < / RTI > 제1 디바이스에 렌더링 되는 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 검출하는 검출부;
상기 DOM 변이 이벤트에 따라 상기 웹 페이지의 일부 영역을 저장하는 저장부; 및
상기 웹 페이지의 일부 영역을 상기 웹 페이지에 대한 화면 스트리밍을 서비스 하는 스트리밍 서버로 전송하는 전송부
를 포함하고,
상기 웹 페이지의 일부 영역은 상기 스트리밍 서버에 접속된 제2 디바이스로 전송되어 상기 제2 디바이스 상에서 렌더링 되는 것
을 특징으로 하는 웹 화면 스트리밍 장치.A detecting unit detecting a DOM mutation event occurring between a previous frame and a current frame of a web page rendered in the first device;
A storage unit for storing a part of the web page according to the DOM mutation event; And
A transmitting unit for transmitting a part of the web page to a streaming server that serves screen streaming for the web page,
Lt; / RTI >
Wherein a portion of the web page is transmitted to a second device connected to the streaming server and rendered on the second device
And the web screen streaming device. 제1 디바이스로부터 상기 제1 디바이스에 렌더링 되는 웹 페이지의 일부 영역을 수신하는 수신부; 및
상기 웹 페이지에 대한 부분적인 스트리밍을 위해 상기 웹 페이지의 일부 영역을 제2 디바이스로 전송하는 전송부
를 포함하고,
상기 웹 페이지의 일부 영역은 상기 제1 디바이스에서 상기 웹 페이지의 이전 프레임과 현재 프레임 간에 발생하는 DOM 변이 이벤트를 기반으로 결정되는 것
을 특징으로 하는 웹 화면 스트리밍 서버.A receiving unit for receiving a part of a web page rendered from the first device to the first device; And
A transmission unit for transmitting a part of the web page to a second device for partial streaming of the web page,
Lt; / RTI >
Wherein a portion of the web page is determined based on a DOM mutation event occurring between a previous frame and a current frame of the web page in the first device
Wherein the server is a web server.
KR20130005852A 2013-01-18 2013-01-18 Method and system for web screen streaming based on dom mutation event KR101480214B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR20130005852A KR101480214B1 (en) 2013-01-18 2013-01-18 Method and system for web screen streaming based on dom mutation event

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR20130005852A KR101480214B1 (en) 2013-01-18 2013-01-18 Method and system for web screen streaming based on dom mutation event

Publications (2)

Publication Number Publication Date
KR20140093849A true KR20140093849A (en) 2014-07-29
KR101480214B1 KR101480214B1 (en) 2015-01-08

Family

ID=51739829

Family Applications (1)

Application Number Title Priority Date Filing Date
KR20130005852A KR101480214B1 (en) 2013-01-18 2013-01-18 Method and system for web screen streaming based on dom mutation event

Country Status (1)

Country Link
KR (1) KR101480214B1 (en)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016017953A1 (en) * 2014-07-30 2016-02-04 엔트릭스 주식회사 System for cloud streaming service, method for still image-based cloud streaming service and apparatus therefor
WO2016017952A1 (en) * 2014-07-30 2016-02-04 엔트릭스 주식회사 System for cloud streaming service, method for same using still-image compression technique and apparatus therefor
KR20160044732A (en) * 2014-10-16 2016-04-26 엔트릭스 주식회사 System for cloud streaming service, method of cloud streaming service based on still image and apparatus for the same
US10462200B2 (en) 2014-07-30 2019-10-29 Sk Planet Co., Ltd. System for cloud streaming service, method for still image-based cloud streaming service and apparatus therefor
US10652591B2 (en) 2014-07-30 2020-05-12 Sk Planet Co., Ltd. System for cloud streaming service, method for same using still-image compression technique and apparatus therefor
CN113094006A (en) * 2020-01-08 2021-07-09 北京搜狗科技发展有限公司 Data processing method and device and electronic equipment

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005092258A (en) * 2003-09-11 2005-04-07 Ricoh Co Ltd Picture sharing system
US7814410B2 (en) * 2005-09-12 2010-10-12 Workman Nydegger Initial server-side content rendering for client-script web pages
KR20080027813A (en) * 2008-03-10 2008-03-28 (주)씨에스랩글로벌 The method and process of sharing window for screen sharing in multipoint conference system

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016017953A1 (en) * 2014-07-30 2016-02-04 엔트릭스 주식회사 System for cloud streaming service, method for still image-based cloud streaming service and apparatus therefor
WO2016017952A1 (en) * 2014-07-30 2016-02-04 엔트릭스 주식회사 System for cloud streaming service, method for same using still-image compression technique and apparatus therefor
US10462200B2 (en) 2014-07-30 2019-10-29 Sk Planet Co., Ltd. System for cloud streaming service, method for still image-based cloud streaming service and apparatus therefor
US10652591B2 (en) 2014-07-30 2020-05-12 Sk Planet Co., Ltd. System for cloud streaming service, method for same using still-image compression technique and apparatus therefor
KR20160044732A (en) * 2014-10-16 2016-04-26 엔트릭스 주식회사 System for cloud streaming service, method of cloud streaming service based on still image and apparatus for the same
CN113094006A (en) * 2020-01-08 2021-07-09 北京搜狗科技发展有限公司 Data processing method and device and electronic equipment

Also Published As

Publication number Publication date
KR101480214B1 (en) 2015-01-08

Similar Documents

Publication Publication Date Title
KR101480214B1 (en) Method and system for web screen streaming based on dom mutation event
CN107766359B (en) Method and device for converting page content into picture and computing equipment
US10289659B2 (en) Delivery and display of page previews using shadow DOM
US8868637B2 (en) Page rendering for dynamic web pages
CN106575298B (en) Rapid presentation of web sites containing dynamic content and stale content
JP5022301B2 (en) Proxy server, communication relay program, and communication relay method
US8825749B2 (en) Method of tracking offline user interaction in a rendered document on a mobile device
US10389792B2 (en) Output function dividing system
US20160352803A1 (en) Reconstruction of web pages based on dom serialization
US20120304068A1 (en) Presentation format for an application tile
US20140229818A1 (en) Dynamic generation of mobile web experience
EP2937796A1 (en) Information processing terminal, display terminal, and display method
US20090085921A1 (en) Populate Web-Based Content Based on Space Availability
CN108416021B (en) Browser webpage content processing method and device, electronic equipment and readable medium
US20170031877A1 (en) Web Page Design System
JP6291961B2 (en) Information processing system, information processing terminal, content management apparatus, and information processing method
EP3813326B1 (en) Method and apparatus for processing webpage, device, and storage medium
CN114297544A (en) Remote browsing method, device, equipment and storage medium
CN105051713A (en) System and method of web-based keyboard, video and mouse (kvm) redirection and application of the same
JP5303534B2 (en) Appearance information processing apparatus and method
US20120216132A1 (en) Embedding User Selected Content In A Web Browser Display
US8856653B2 (en) Video display apparatus, video display management apparatus, video display method and video display management method
JP2019079401A (en) Generating apparatus, terminal apparatus, sharing page generating system, generating method, and control program
CN113760281A (en) Transition animation realization method and device, terminal equipment and storage medium
US20150127719A1 (en) Information processing system, proxy apparatus, information processing method, and computer program product

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20171124

Year of fee payment: 4

LAPS Lapse due to unpaid annual fee