Service Background

In hybrid mode, the player is provided by native, and H5 calls native capabilities through Jsbridge to realize business interaction on the player’s life cycle (creation, streaming, destruction), behavior (vertical and horizontal screen, video recording, resolution switching, camera device communication) and other services. The problem that the player is provided by the native player is that the player does not exist in the H5 Webview hierarchy and is independent of each other. The native player only communicates with each other through the Webview javascriptBridge. As the native player floats above the H5 hierarchy, it is inevitable that the player will block the H5 hierarchy. The same layer rendering of the player is intended to solve the problem that the player is in the H5 hierarchy, allowing H5 to unify the WebView hierarchy and the native player hierarchy.

Practice process

Scheme 1: native embedded in a h5 hierarchy

Ios solution introduction, with the help of ios hosting webView scroll area to generate a specific WKChildScroll feature.
1. H5 set the player area with a width of 16:9, set the outer two layers of boxes, and make the inner layer have a rolling area. 2. Ios can obtain the WKChildScroll of the view layer of the scroll area through view debugging (as shown below). Due to the poor performance of the long list of H5 scroll areas, IOS hosts the generation of specific WKChildScroll by default to optimize the performance, which is a common problem in the development process. 3. IOS mounts the native component to the WKChildScrollView node as its child View. 4. The event response is handled natively and transparently transmitted to the native component.Copy the code

Risks of the ios solution
1. Is there any change in the level of horizontal and vertical screen switching? 2. The original toast in the view may be blocked and cannot be seen. 3. Multiple WKChildScrollViews exist in one interface 4. 5. WkchildScrollView and native view declare cycles out of sync resulting in memory leaks, should ensure that the wkchildScrollView created before the native view, after the destruction of the native view. 7. The wkchildScrollView node was not rendered when the player was created. WkchildScrollView was rendered after the player was created. 8. Switch between front and back to see if the element is released. 9. A critical problem is caused by incompatible versions. Ios12 version Event response Normal iOS13.6 subview events do not respondCopy the code
Android Solution Introduction
1. Create a Embed DOM node on the WebView side and specify the component type; 2. The Chromium kernel creates a WebPlugin instance and generates a RenderLayer; 3. The Android client initializes a corresponding native component. 4. The Android client draws the screen of the native component onto the SurfaceTexture bound to the RenderLayer created in Step 2. 5. Notify the Chromium kernel to render the RenderLayer; 6. Chromium renders the Embed node and displays it.Copy the code
Risk analysis of Android solution
1. It is difficult to implement and the cycle is too long. 2. Large factories generally develop andorid kernel by themselves, and professionals maintain and upgrade it iteratively. Small factories are not recommended. 3. Compatibility is difficult to guaranteeCopy the code
H5 Risk analysis analysis

Obviously, android and ios schemes need two sets of code to write compatibility for H5, and the pain is self-evident. Maintenance costs are simply not too high in the later iterations of functionality.

Scheme 2: native at the bottom of the WebView.

1. Native native controls are created under the H5 webView. 2. H5 adds transparency to all webView levels above the player to display. 3. Native intercept the event behavior of H5 on the player and deliver it to the player. 4. Native is completely separate from the player hierarchy, and native doesn't have to deal with much detail.Copy the code
H5 code introduction

1. Extract hooks to set the transparency of player placeholder area when player page route is cut into animation

/* * @Author: [email protected] * @Date: * Copyright © Leedarson. All rights reserved. */ import {useEffect} from 'react'; const PLAYER_SIGN = 'player_sign'; const useSameLayerRender = ({ pathname = 'IPC/Live/', hideSelf = true, Sign}) = > {/ / player in the most through solving the problem of rendering with screen layer at the bottom of the hierarchy (player) useEffect (() = > {the if (Object. The prototype. The hasOwnProperty. Call (window, '_routerTransiting')) { Object.defineProperty(window, '_routerTransiting', { set: O = > {/ / end of the animation set player upper transparent if h5 (window. The location. The pathname. Includes (pathname) &&! o) { let whileRoot = false; let node = document.querySelector('.native-video-player'); if (hideSelf) { node.style.background = 'transparent'; } while (! whileRoot) { const { parentElement } = node; if (parentElement.id === 'root') { whileRoot = true; return; } parentElement.style.background = 'transparent'; node = parentElement; }}}}); } }, [hideSelf, pathname]); UseEffect (() => {if (sign) {sessionStorage.setitem (PLAYER_SIGN, sign); useEffect(() => {if (sign) {sessionStorage.setitem (PLAYER_SIGN, sign); } }, [sign]); }; export default useSameLayerRender;Copy the code

2. Call hooks

const { cloudLimitToast } = useSubscription(); UseSameLayerRender ({pathName: 'IPC/CloudPlayback/', sign}); // 2. PlayerBackData - Cloud playback data const playerBackData = useCloudPlaybackState(); // 3. Styled - Placeholder element const Placeholder = useMemo(() => styled. Div 'width: 100%; Padding - top: 56.25%; background: transparent; `, []);Copy the code
Advantages and disadvantages analysis

Advantages:

1. Android and ios schemes are unified, h5 does not need to be compatible with multiple sets, low maintenance cost; 2. Small change impact point, small change momentum, controllable risk; 3. Small development cycle; 4. Good compatibility, basically no compatibility problems;Copy the code

Disadvantages:

1. Not true same-layer rendering, just a solution to the current same-layer rendering problem encountered. 2. Native event interception through recursive call, when the WebView hierarchy is too much, the stack overhead is large, coupled with frequent clicks, will occupy the main thread too long, poor performance.Copy the code