Article catalog
1. INTRODUCTION 1. Problem 3. Solution 3.1 Solution 1: Develop your own browser ~~ 3.2 Program 2: Front-end JS decoding + Canvas Show ~~~ 3.3 Program 3: Front-end Webassembly Transcoding + Video Show ~~ 3.4 4: Front-end WebAssembly Decoding + Canvas Display 3.5 Summary
4. Related information 5. Reference materials
1 Introduction
The project requires that H265 video is supported on the browser, but Even if the current latest Chrome 85.0.4183.121 does not support the H265 decoding.
So, can you solve the H265 decoding and display on your browser? The answer is yes.
2. Problem
H265 is supported on your browser, you need to add two questions on your browser:
Decoding H265 video stream display H265 video stream
3. Solution
After some online search and research, there are approximately four options:
3.1 Program 1: Develop your own browser
Develop your own browser
Realization H265 decoding in the bottom layer in the video label supports the display of H265 video streams
At present, the company has developed its own browser, based on Chrome 83, and increases FFMPEG's codec for HEVC, and the test can be perfectly solved and displayed. However, due to the existence of a copyright risk, it is currently only internally used.
The program is feasible, playing 16-channel H265 video on the test machine (i7-9700 / 32g), the overall is smooth, but other mainstream browsers still do not support H265, but also the solution that does not support H265 browsers.
3.2 Scenary 2: Front-end JS Decoding + Canvas Display
Related documents: web end H.265 player R & D decryption https://blog.csdn.net/weixin_34379433/Aarticle/details/89535511 Example https://sparkmorry.github.io/mse-learning/H265/ https: // Github.com/sparkmorry/mse-learning
The program is tested, and the JS decoding compares the decoding scheme of WebAssembly, which will be relatively poor, abandoned from performance.
3.3 Scheme 3: Front-end WebAssembly Transcoding + Video Display
From a transcoded example seen from FFMPEGWASM, since the Video tab cannot play the H265 video, first turn the H265 video from H264, then you can play via the video label.
Example https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/examples/browser/transcode.html
The program tested, a few seconds of video transfer of H264 need for a few minutes, and performance is not required to give up.
3.4 Program 4: Front-end Webasembly Decoding + Canvas Display
Related Documents: Web End H.265 Player R & D Decryption Https://blog.csdn.Net/weixin_34379433/Article/details/89535511 Related Example: H265 Player (1) https://g.AlicDn.com/Videox/ MP4-H265 / 1.0.2 / index.html (2) https://static-assets.cyt-rain.cn/h265/index.html A comparison H265 player https://github.com/goldvideo/ H265Player Based on WASM-based H265 Web Player
Document https://www.pianshen.com/Article/3192218495/ Source Https://github.com/sonysuqin/wasmvideoplayer example https://roblin.cn/wasm/
The program tested, the program personal feels that the performance is better, playing 6-channel H265 video on the test machine (i7-9700 / 32g), which is more smooth.
3.5 Summary
The browser supports H265 decoding, the primary plan:
Support H265 browser, such as: Koda browser, direct use of the browser's own decoding scheme (hard solution or soft decoding), then display it through the video label; not supporting the H265 browser, using WebAssemblyMbly Technology, compile FFMPEG to WASM, when the H265 code stream is received, the FFMPEG is called, and then the video screen is displayed by Canvas;
4. Related information
Janus-Gateway negotiation about AV1 and H265 https://github.com/metecho/janus-gateway/pull/2120 how to enable hevc / h265 and av1 in #Webrtc in Your Browser https://webrtcbydraalex.com/index. PHP / 2020/04/28 / How-to-enable-hevc-h265-and-av1-in-webRTC-in-Your-Browser /
5. Reference
Chromium Media Element Source Code https://github.com/chromium/chromium/tree/master/media webassembly https://webassembly.org/ Excellent open source audio processing frame ffmpeg https://www.ffmpeg.org/ https: //github.com/FFmpeg/FFmpeg https://github.com/ffmpegwasm/ffmpeg.wasm LLVM-based compiler of WebAssembly packaging toolset Emscripten https://emscripten.org/index.html based WebAssembly of ogg player https: //github.com/brion/ogv.js simple player Based on FFMPEG https://github.com/leixiaohua1020/simplest_ffmpeg_player
Our other product:
