Computers are rarely used to record videos. When necessary, I can find various software and tools, and I will always find free ones. There must be many that meet the needs in the market now, but only occasionally, and when the usage scenarios are not so demanding, is it very nice to directly record the screen of a web page online?
I worked on live video products a long time ago. At that time, I considered WebRTC, but it was not mature enough at that time. Video streaming or streaming was still embedded development, using RTMP and HLS protocols. With the increase of real-time and interactive requirements, the browser launched WebRTC:
WebRTC (Web Real-Time Communication), that is, "webpage instant communication", WebRTC is an open source protocol that supports browsers for real-time voice and video conversations. Currently, mainstream browsers support WebRTC, even in the case of normal network signals. Better stability, WebRTC can realize peer-to-peer communication, and the delay between the communication parties is low, so that users can communicate in real time without downloading and installing any plug-ins.
Before the release of WebRTC, the cost of developing real-time audio and video interactive applications was very high, and there were many technical issues to be considered, such as audio and video codec issues, data transmission issues, delay, packet loss, jitter, echo processing and elimination, etc. If To be compatible with real-time audio and video communication on the browser side, additional plug-ins need to be installed. WebRTC greatly reduces the threshold for audio and video development. Developers only need to call WebRTC API to quickly build audio and video applications.
In November 2017, the W3C WebRTC 1.0 draft was officially finalized. In January 2021, WebRTC was published as an official standard (WebRTC 1.0: Real-Time Communication Between Browsers) by W3C and IETF. Several advantages of WebRTC:
-
Real-time: Allows network applications or sites to establish a peer-to-peer (Peer-to-Peer) connection between browsers without mediation, and realize the transmission of video streams and (or) audio streams or other arbitrary data.
-
No dependencies: No need to install any plug-ins or third-party software.
-
Protocol: It includes multiple protocol standards including media, encryption, transport layer, etc., and a set of JavaScript-based APIs, which includes functions such as audio and video collection, codec, network transmission, and display.
-
Compatibility: All major browsers support the WebRTC standard API.
The introduction of WebRTC, I think it will be the mainstream of real-time communication in the future. Today, it is mainly to realize online video recording of a web page, and WebRTC will not be introduced in depth. If there is a need for this project, more in-depth research is needed, and video recording is very shallow.
In fact, two APIs are used:
-
navigator.mediaDevices.getDisplayMedia: prompts the user to select and authorize capture of displayed content or parts of content (such as a window) in a MediaStream. This media stream can then be recorded using the MediaStream Recording API or transmitted as part of a WebRTC session.
-
MediaRecorder: The MediaStream Recording API consists of one main interface, MediaRecorder, which does all the work of getting data from a MediaStream and passing it to you for processing. The data is passed through a series of dataavailable events in the format you declared when you created the MediaRecorder. You can then process the data further, or write it to a file if desired.
Implemented functions:
You can choose to record the entire screen, a certain window, or a certain tab of the browser. It is very friendly. After the recording is over, use the a tag to download the recorded video. You can see the demo (WebRTC can only be https): https://www
. discountspig.com/game/record.html
The code can be viewed on my GitHub:
https://github.com/wade3po/demoCode/blob/main/record.html
Welcome to pay attention to personal subscription number coding personal notes