WO2020042060A1 - Method for realizing webpage video recording and storage - Google Patents

Abstract

The present invention relates to the technical field of webpage video recording and storage, in particular, to a method for realizing webpage video recording and storage. The method in the present invention comprises the steps: 1. defining a tag required by a video recording page; 2. using RecordRTC.js; 3. calling a computer camera; 4. using RecordRTC for video recording; 5. setting a format and a name of a saved video; 6. storing a recorded video locally. By means of the present invention, a convenient and low-cost video recording and storage method is realized, and the problem that conventional video recording of a computer requires installation of software and plug-ins and the like to realize video recording and storage functions is solved.

Description

 Method for realizing webpage version video recording and storage

Technical field

 The invention relates to the technical field of webpage video recording and storage, in particular to a method for implementing webpage version video recording and storage.

Background technique

 The functions of video recording and saving are ubiquitous in people's lives. With the improvement of people's living standards, more and more people choose to record videos and save them, recording every bit of life.

 Computer cameras, also called computer cameras, computer eyes, electronic eyes, etc., are video input devices that are widely used in video conferencing, telemedicine, and real-time monitoring.

 However, the main problems currently facing are:

 Many existing ones that can provide video recording and saving functions on the computer are based on some kind of plug-in or software for video recording and saving. The tedious installation steps of this plug-in and software will undoubtedly make people feel irritable, especially if the installation is wrong or fails At times, there is no reason why the video recording cannot be performed.

Summary of the Invention

The present invention implements a convenient, fast, and low-cost method for video recording and saving, and solves the problem of traditional software that requires software, plug-ins, etc. to implement video recording and saving for video recording on a computer. The technical solution of the present invention to solve the above technical problems is:

 The described method includes the following steps:

 Step 1. Define the tags required on the video recording page;

 Step 2: Reference RecordRTC.js;

 Step 3: Call the computer camera;

 Step 4. Use RecordRTC for video recording;

 Step 5. Set the format and name of the saved video;

 Step 6. Store the recorded video locally.

 Beneficial effects of the present invention: A method for implementing video recording and storage of a webpage version is provided. This method realizes a convenient, fast, and low-cost method for video recording and storage, and solves the traditional video recording on a computer Need to install software, plug-ins and other issues to achieve video recording and saving.

BRIEF DESCRIPTION OF THE DRAWINGS

 The present invention is further described below with reference to the drawings:

 FIG. 1 is a flowchart of a method of the present invention.

detailed description

 As shown in FIG. 1, the present invention adopts the following steps to implement a method for implementing video recording and storage of a webpage version.

 Step 1. Define the tags required on the video recording page. Define the video tag for calling the video and the button tag for playing the video in the html page of the video recording

(start Video Stop and save the video button button (saveVideo). If the browser version is too low when the page loads, an update will be prompted. ávideo width = ^M 800 ^M height = ^MM id = `` video "> Your browser version is too low, please update! </ video>

 ábutton id = "start V ideo"> Start á / button ñ

 ábutton id = "save Video" ñStop and save á / button ñ

 Step 2. Reference RecordRTC.js. RecordRTCjs is referenced in the html video recording page, because it is the main force that we use to call the camera to record in the webpage.

 áscript src = "RecordRTC.is"> </ script>

 Step 3. Call the computer camera. navigator.mediaDevices.getUserMedia prompts the user for permission to use media input. Media input generates a

MediaStream, which contains the track of the requested media type, will prompt a friendly error when the media device cannot be obtained normally.

 navigator.mediaDevices.getUserMedia ({

 audio: true,

 video: true

 }). then (function (camera) {

 callback (camera);

 }). catch (function (error) {

 alert ('Unable to capture your camera, please see console log (error);

}) Step 4. Use RecordRTC for video recording. The called camera is passed to the video element in the page in the form of a stream, and the startRecording method of RecordRTC is called for video recording, and the video is displayed in the video element of the recording page in real time.

 var video = document.getElementById ("video’ ’);

 captureCamera (function (camera) {

 setSrcObject (camera, video);

 video .playQ;

 recordRTC = RecordRTC (camera, {

 type: 'video'

 });

 recordRTC. startRecor ding ();

 });

 recordRTC. stopRecording (function (audioVideoWebMURL) {video src = audioVideoWebMURL;

 });

 Step 5. Set the format and name of the saved video.

 var timestamp = Date.parse (new Date ());

 var num = parseInt (Math.random () * 10000);

 Var fileName = timestamp + num + ‘. Webm’;

 Step 6. Store the recorded video locally. Call recordRTC

The invokeSaveAsDialog method saves the recorded video to disk.

var file = new F ile ([recordRT C. getBlob ()], fileName, { type: 'video / webm'

});

invokeSaveAsDialog (file, file.name).

Claims

Claim 1. A method for implementing video recording and storage of a webpage version, characterized in that the method includes the following steps:  Step 1. Define the tags required on the video recording page;  Step 2: Reference RecordRTC.js;  Step 3: Call the computer camera;  Step 4. Use RecordRTC for video recording;  Step 5. Set the format and name of the saved video;  Step 6. Store the recorded video locally.  2. A method for implementing video recording and storage of a webpage version according to claim 1, characterized in that: in the first step, a video tag for calling a video needs to be defined in an html page of the video recording, and a video is played Button label  (Start Video), stop and save the video button button (save Video).  3. A method for implementing video recording and storage of a webpage version according to claim 1, characterized in that: in said step 2, RecordRTC.js needs to be referenced, RecordRTC is a JavaScript-based media recording library, For modern web browsers (supports the WebRTC getUserMedia API); it is optimized for different devices and browsers, and integrates all client (no plug-in) recording solutions in one place.  4. The method for implementing video recording and storage of a webpage version according to claim 1, characterized in that: in the third step, using Replacement page (Article 26) The navigator.mediaDevices.getUserMedia () method calls the computer camera. When the camera cannot be called, it prompts the user to fail to call the camera in time.  5. A method for implementing video recording and storage of a webpage version according to claim 1, characterized in that: in said step 4, the called camera is passed to the video element on the page in the form of a stream, and Call RecordRTC's startRecording method for video recording.  6. A method for implementing video recording and storage of a webpage version according to claim 1, characterized in that: in said step 5 and step 6, when a button for stopping and saving a video is clicked, the recording is stopped, Select the format of the video to be saved, fill in the name, and save the recorded video to the local. Replacement page (Article 26)