H5 web player easyplayer How does JS realize live video real-time recording?

EasyPlayer The series has been done for a whole 8 Years. , From the very beginning EasyPlayerRTSP edition , To the later RTMP edition 、Pro edition 、js edition , There are countless audiences , hope EasyPlayer Can continue to be excellent as always .

lately , There is a user on our EasyCVR Put forward a demand for real-time video player . According to the previous concept , How can web pages be like C/S The client does real-time video recording like that ？ Because it is almost impossible for browsers to write local files .

In the past practice , Realize this user demand , Basically, it adopts “ Back end + front end ” Cooperate to realize this video recording function . The back end receives the instruction of the front end to record , A copy of the audio and video data to be sent to the front end is stored in the server , After receiving the stop recording instruction from the front end , Then put the whole cached data , Package into MP4, For users to download .

in fact , This way is actually very unreasonable . Just imagine , If there are thousands of users using this function , The server should not only cache data , And encapsulate data , And maintenance Session and Download data （ Actually, this data has been output from the live broadcast to the client once ）. This practice is a waste of traffic , It is also a waste of computing resources , It is not in line with the craftsman thought of technology developers .

about “ Back end + front end ” This unreasonable way of real-time video recording , We need to find ways to improve , Adopt a more reasonable “ De centralization ” practice .

therefore , After a lot of research and development , We have found out a way to adopt wasm front end “ transcoding + synthesis ” The plan , We go through wasm（WebAssembly） take ES Stream is transcoded and encapsulated , Become MP4 Video required “H.264/H.265+AAC” The data of , Again from BLOB Download the synthesized data ！ This is really a great feature ！

our EasyPlayer Video streaming media series player , Can support H.264/H.265 Video coding , And has multiple versions , Include EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro etc. , Users can carry out secondary development or independent integration according to their own needs . Interested users can go to the official website to download 、 Deployment and testing .