Web Client Audio Video Playback Without Browser Plug-ins

Resolve Bottlenecks,
Find Innovative Solutions
Generate Solutions

Solution Overview

Problem

Existing Web clients require browser plug-ins to play audio and video data, which can be prohibited in some cases, posing a challenge for seamless playback.

Innovation Solution

A method where a Web client's main thread obtains and decapsulates audio and video data from a server, sends it to a sub-thread for decoding, and then renders the data using the browser's rendering module, allowing playback without plug-ins through WebSocket communication and WebAssembly (WASM) for decapsulation and decoding.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If browser plug-ins are used for audio and video playback, then playback functionality is achieved, but system complexity increases and accessibility decreases when plug-ins are prohibited

Engineering Contradiction:
Improveplayback compatibilityVSAvoidsystem complexity
Core Design Contradiction:
Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent replaces the traditional plug-in-based playback mechanism (ActiveX/NPAPI) with a browser-native WebSocket communication scheme. The WebAssembly module executes decoding algorithms directly in the browser without requiring external plug-ins, substituting the mechanical plug-in architecture with a web-standard-based architecture that eliminates the need for separate plug-in installations while maintaining playback functionality

Inventive Principle:
Principle #28Mechanics substitution (Replace mechanical system)

Solution Approach 2:

The patent creates a universal playback solution that works across different browsers and environments without requiring browser-specific plug-ins. The WebSocket-based communication and WebAssembly decoding provide a platform-independent interface, allowing the same system to function universally across Chrome, Firefox, Safari, and other modern browsers, thereby improving adaptability while reducing system complexity

Inventive Principle:
Principle #6Universality (Multi-functionality)

2Ease of operation

If plug-ins are installed in browser for decoding and rendering, then audio and video playback is enabled, but ease of operation deteriorates when plug-ins are prohibited

Engineering Contradiction:
Improveplayback accessibilityVSAvoidplayback reliability
Core Design Contradiction:
Ease of operationVSReliability

Solution Approach 1:

The patent implements self-service by enabling the browser itself to handle audio and video decoding and rendering without requiring external plug-ins. The WebAssembly module provides decoding capabilities directly within the browser environment, and the browser's native rendering module handles display, making the system self-sufficient and eliminating dependency on separate plug-in installations while maintaining reliable playback

Inventive Principle:
Principle #25Self-service

Solution Approach 2:

The patent introduces WebSocket as an intermediary communication protocol between the server and client, replacing the plug-in-mediated communication of traditional architectures. This intermediary provides a reliable, standardized communication channel that works without plug-ins, improving ease of operation while maintaining playback reliability through established web protocols

Inventive Principle:
Principle #24Intermediary (Mediator)

Data Source

PatentEP3813379B1Data processing method and apparatus, electronic device, system, and storage medium
Publication Date: 2024.02.14 HANGZHOU HIKVISION DIGITAL TECHNOLOGY CO LTD
  • EP3813379B1 patent drawingFigure 1~2
  • EP3813379B1 patent drawingFigure 3~4
  • EP3813379B1 patent drawingFigure 5

AI summary

A data processing method and apparatus, and an electronic device, a system and a storage medium are provided. The method is applicable to a main thread in a Web client and includes: obtaining audio and video data of a target video from a server decapsulating the obtained audio and video data to obtain first audio and video data; sending the first audio and video data to a target sub-thread in the Web client, so that the target sub-thread decodes the first audio and video data to obtain second audio and video data and sends the second audio and video data to the main thread; receiving the second audio and video data sent by the target sub-thread; and rendering video data in the second audio and video data by using a rendering module of a browser of the Web client, and taking the rendered video data and audio data in the second audio and video data as to-be-played data for the target video. The technical solution according to the embodiment of the present application allows a Web client to play audio and video data without browser plug-ins.