Websocket Media Streaming in Web Browsers

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Conventional HTTP connection methods are not suitable for continuous media streaming like video and audio, requiring frequent connection establishment and termination, which is resource-intensive and insecure, especially in embedded systems like network cameras, necessitating a method to stream media without plugins.

Innovation Solution

Implementing a websocket connection between the web browser and media service unit for continuous, full-duplex communication using the HTML5 standard, enabling real-time streaming of video and audio without the need for additional plugins by utilizing the TCP/IP model and RTSP/RTP protocols within the web browser.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Reliability

If conventional HTTP connection method is used for media streaming, then connection can be established for specific events, but connection requires frequent establishment and termination which increases overhead and resource consumption

Engineering Contradiction:

Improveconnection stabilityVSAvoidresource consumption

Core Design Contradiction:

ReliabilityVSUse of energy by moving object

Solution Approach 1:

The patent applies WebSocket technology to establish a persistent, long-lived connection between the web browser and media service unit, allowing continuous media streaming without repeated connection establishment and termination. This continuous connection eliminates the overhead of frequent HTTP request-response cycles while maintaining reliable data transmission for real-time video and audio streaming.

Inventive Principle:

Principle #20Continuity of useful action

2Adaptability or versatility

If plug-in is installed in web browser to process RTP/RTSP protocols, then video streaming function can be achieved, but security vulnerabilities and excessive resource consumption occur

Engineering Contradiction:

Improveprotocol support capabilityVSAvoidsecurity

Core Design Contradiction:

Adaptability or versatilityVSReliability

Solution Approach 1:

The patent extracts the RTP/RTSP protocol processing capability from external plug-ins and integrates it directly into the web browser's native functionality. By embedding the protocol stack within the browser itself, the system eliminates security vulnerabilities associated with external plug-ins while maintaining full support for real-time media streaming protocols.

Inventive Principle:

Principle #2Taking out (Extraction)

3Adaptability or versatility

If plug-in is installed to enable media streaming function, then video and audio can be transmitted and received, but web browser functionality is limited and resources are excessively consumed

Engineering Contradiction:

Improvemedia streaming functionVSAvoidbrowser functionality

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent merges multiple functions including HTTP communication, WebSocket connection management, RTP packet handling, and media playback into a unified native browser implementation. This integration eliminates the need for separate plug-in components, reducing system complexity while enhancing media streaming capabilities through seamless collaboration between network layers and application protocols.

Inventive Principle:

Principle #5Merging (Combining)

4Ease of operation

If HTTP connection is established for each specific event, then connection can be terminated when event ends, but connection overhead occurs due to repeated information exchanges

Engineering Contradiction:

Improveconnection managementVSAvoidconnection establishment time

Core Design Contradiction:

Ease of operationVSLoss of time

Solution Approach 1:

The patent establishes a persistent WebSocket connection in advance before media streaming begins, performing the connection setup operation once rather than repeatedly for each media event. This preliminary action includes negotiating the WebSocket protocol handshake and establishing the underlying TCP connection, thereby eliminating subsequent connection establishment delays and reducing overall latency in media playback.

Inventive Principle:

Principle #10Preliminary action

Data Source

PatentEP3229476B1Method and apparatus for playing media stream on web browser

Publication Date: 2022.12.07 HANWHA VISION CO LTD

Figure 1
Figure 2~3
Figure 4

AI summary

A media stream playing apparatus for receiving a media stream transmitted from a media service unit and playing the media stream on a web browser is provided. The media stream playing apparatus includes a transmission module configured to establish a communication connection at a transport layer level with the media service unit, a websocket module configured to establish a websocket connection with the media service unit via a handshake procedure based on the communication connection and transmit or receive websocket packets to or from the media service unit while maintaining the websocket connection, a streaming module configured to receive Real-time Transport Protocol (RTP) packets carried by the websocket packets, a media decoder configured to decode the media stream obtained from the RTP packets to reconstruct video, and an output device configured to display the reconstructed video on a screen by embedding the reconstructed video in the web browser.