WO2020042060A1 - Method for realizing webpage video recording and storage - Google Patents
Method for realizing webpage video recording and storage Download PDFInfo
- Publication number
- WO2020042060A1 WO2020042060A1 PCT/CN2018/103169 CN2018103169W WO2020042060A1 WO 2020042060 A1 WO2020042060 A1 WO 2020042060A1 CN 2018103169 W CN2018103169 W CN 2018103169W WO 2020042060 A1 WO2020042060 A1 WO 2020042060A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- video
- video recording
- storage
- recording
- recordrtc
- Prior art date
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/433—Content storage operation, e.g. storage operation in response to a pause request, caching operations
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N5/00—Details of television systems
- H04N5/76—Television signal recording
- H04N5/765—Interface circuits between an apparatus for recording and another apparatus
- H04N5/77—Interface circuits between an apparatus for recording and another apparatus between a recording apparatus and a television camera
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N5/00—Details of television systems
- H04N5/76—Television signal recording
- H04N5/91—Television signal processing therefor
Definitions
- 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.
- Computer cameras also called computer cameras, computer eyes, electronic eyes, etc.
- Computer cameras are video input devices that are widely used in video conferencing, telemedicine, and real-time monitoring.
- 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.
- 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.
- FIG. 1 is a flowchart of a method of the present invention.
- 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
- 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.
- Step 3 Call the computer camera. navigator.mediaDevices.getUserMedia prompts the user for permission to use media input. Media input generates a
- 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.
- Step 5 Set the format and name of the saved video.
- Var fileName timestamp + num + ‘. Webm’
- Step 6. Store the recorded video locally.
- the invokeSaveAsDialog method saves the recorded video to disk.
- var file new F ile ([recordRT C. getBlob ()], fileName, ⁇ type: 'video / webm'
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;
步骤二、 引用 RecordRTC.js; Step 2: Reference RecordRTC.js;
步骤三、 调用电脑摄像头; Step 3: Call the computer camera;
步骤四、 利用 RecordRTC进行视频录像; 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:
图 1为本发明的方法流程图。 FIG. 1 is a flowchart of a method of the present invention.
具体实施方式 detailed description
如图 1所示, 本发明采用如下步骤可以实现一种实现网页版的视 频录像与储存的方法。 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.
步骤一、 定义视频录像页面需要的标签。 在视频录制的 html页面 中定义调用视频的 video标签、 播放视频的按钮标签 button 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 停止并保存视频的标签 button(saveVideo), 页面加载 时若浏览器版本过低, 提示更新。
ávideo width=M800M height=MM id='’video">您的浏览器版本过 低, 请更新 !</video> (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” >开始 á/button ñ ábutton id = "start V ideo"> Start á / button ñ
ábutton id=" save Video” ñ停止与保存 á/button ñ ábutton id = "save Video" ñStop and save á / button ñ
步骤二、 引用 RecordRTC.js是。 在 html视频录制页面中引用 RecordRTCjs, 因为它是我们实现调用摄像头在网页中进行录像的 主力。 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> áscript src = "RecordRTC.is"> </ script>
步骤三、 调用电脑摄像头。 navigator.mediaDevices.getUserMedia 提示用户给予使用媒体输入的许可, 媒体输入产生一个 Step 3. Call the computer camera. navigator.mediaDevices.getUserMedia prompts the user for permission to use media input. Media input generates a
MediaStream, 里面包含了请求的媒体类型的轨道, 当无法正常获取 媒体设备时将会友好的发出错误提示。 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({ navigator.mediaDevices.getUserMedia ({
audio: true, audio: true,
video: true video: true
}).then(function(camera) { }). then (function (camera) {
callback(camera); callback (camera);
}).catch(function(error) { }). catch (function (error) {
alert ('无法捕抓您的摄像头, 请查看控制台曰 console log(error); alert ('Unable to capture your camera, please see console log (error);
})
步骤四、 利用 RecordRTC进行视频录像。 调用的摄像头以流的形 式传递给页面中的 video元素, 并调用 RecordRTC的 startRecor ding方 法进行视频录制, 并实时的将视频显示在录制页面的 video元素中。 }) 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’’); var video = document.getElementById ("video’ ’);
captureCamera(function(camera) { captureCamera (function (camera) {
setSrcObject(camera, video); setSrcObject (camera, video);
video .playQ; video .playQ;
recordRTC = RecordRTC(camera, { recordRTC = RecordRTC (camera, {
type: 'video' type: 'video'
}); });
recordRTC. startRecor ding(); recordRTC. startRecor ding ();
}); });
recordRTC. stopRecording(function(audioVideoWebMURL) { video src = audioVideoWebMURL; 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 timestamp = Date.parse (new Date ());
var num = parseInt(Math.random() * 10000); var num = parseInt (Math.random () * 10000);
Var fileName = timestamp + num +‘.webm’; Var fileName = timestamp + num + ‘. Webm’;
步骤六、 将录制好视频存储到本地。 调用 recordRTC的 Step 6. Store the recorded video locally. Call recordRTC
invokeSaveAsDialog方法将已记录的视频保存到磁盘中。 The invokeSaveAsDialog method saves the recorded video to disk.
var file = new F ile( [recordRT C . getBlob()] , fileName, {
type: 'video/webm' var file = new F ile ([recordRT C. getBlob ()], fileName, { type: 'video / webm'
}); });
invokeSaveAsDialog(file, file.name)。
invokeSaveAsDialog (file, file.name).
Claims
1、 一种实现网页版的视频录像与储存的方法, 其特征在于: 所 述的方法包含以下几个步骤: 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;
步骤二、 引用 RecordRTC.js; Step 2: Reference RecordRTC.js;
步骤三、 调用电脑摄像头; Step 3: Call the computer camera;
步骤四、 利用 RecordRTC进行视频录像; 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、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法, 其特征在于: 所述的步骤一中, 需要在视频录制的 html页面 中定义调用视频的 video标签、 播放视频的按钮标签 button 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)、 停止并保存视频的标签 button(save Video)。 (Start Video), stop and save the video button button (save Video).
3、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法, 其特征在于: 所述的步骤二中, 需要引用 RecordRTC. js, RecordRTC是一个基于 JavaScript的媒体录音库, 用于现代网络浏览 器 (支持 WebRTC getUserMedia API); 它针对不同的设备和浏览器进 行了优化, 将所有客户端 (无插件) 录制解决方案集中在一个地 方。 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、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法, 其特征在于: 所述的步骤三中, 利用 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
替换页(细则第 26条)
navigator.mediaDevices.getUserMedia()方法调用电脑摄像头, 当无法 调用摄像头时, 及时提示用户调用摄像头失败。 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、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法, 其特征在于: 所述的步骤四中, 将调用的摄像头以流的形式 传递给页面中的 video元素, 并调用 RecordRTC的 startRecording方法 进行视频录制。 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、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法, 其特征在于: 所述的步骤五中和步骤六中, 当停止与保存视 频的按钮被点击时停止录像, 选取要保存视频的格式, 填写名称, 将已经录好的视频保存到本地。 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.
替换页 (细则第 26条)
Replacement page (Article 26)
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
PCT/CN2018/103169 WO2020042060A1 (en) | 2018-08-30 | 2018-08-30 | Method for realizing webpage video recording and storage |
CN201880001206.2A CN112640441A (en) | 2018-08-30 | 2018-08-30 | Method for realizing video recording and storage of webpage version |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
PCT/CN2018/103169 WO2020042060A1 (en) | 2018-08-30 | 2018-08-30 | Method for realizing webpage video recording and storage |
Publications (1)
Publication Number | Publication Date |
---|---|
WO2020042060A1 true WO2020042060A1 (en) | 2020-03-05 |
Family
ID=69642614
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
PCT/CN2018/103169 WO2020042060A1 (en) | 2018-08-30 | 2018-08-30 | Method for realizing webpage video recording and storage |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN112640441A (en) |
WO (1) | WO2020042060A1 (en) |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102307289A (en) * | 2010-09-17 | 2012-01-04 | 苏州阔地网络科技有限公司 | Method for recording video |
CN102316298A (en) * | 2010-09-17 | 2012-01-11 | 苏州阔地网络科技有限公司 | Method for realizing audio and video recording |
CN104982002A (en) * | 2013-01-30 | 2015-10-14 | 柯布朗·德杰 | Video signature system and method |
CN108616709A (en) * | 2018-05-05 | 2018-10-02 | 珠海横琴盛达兆业科技投资有限公司 | A method of realizing video record and the storage of webpage version |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130018955A1 (en) * | 2011-07-14 | 2013-01-17 | Salesforce.Com, Inc. | Computer implemented methods and apparatus for implementing a social network information feed as a platform |
-
2018
- 2018-08-30 CN CN201880001206.2A patent/CN112640441A/en active Pending
- 2018-08-30 WO PCT/CN2018/103169 patent/WO2020042060A1/en unknown
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102307289A (en) * | 2010-09-17 | 2012-01-04 | 苏州阔地网络科技有限公司 | Method for recording video |
CN102316298A (en) * | 2010-09-17 | 2012-01-11 | 苏州阔地网络科技有限公司 | Method for realizing audio and video recording |
CN104982002A (en) * | 2013-01-30 | 2015-10-14 | 柯布朗·德杰 | Video signature system and method |
CN108616709A (en) * | 2018-05-05 | 2018-10-02 | 珠海横琴盛达兆业科技投资有限公司 | A method of realizing video record and the storage of webpage version |
Non-Patent Citations (2)
Title |
---|
ENIGMA: "RecordRTC opens the device to record and compress files", CSDN BLOG, 9 October 2017 (2017-10-09), XP055696892, Retrieved from the Internet <URL:https://blog.csdn.net/qq_34527715/article/details/78181305> * |
LUCIA_HUANG: "RecordRTC: Use WebRTC to record video on the web", JIANSHU.COM, 13 July 2018 (2018-07-13), XP055696890, Retrieved from the Internet <URL:https://www.jianshu.com/p/6971dbdfbcc2> * |
Also Published As
Publication number | Publication date |
---|---|
CN112640441A (en) | 2021-04-09 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9699409B1 (en) | Recording web conferences | |
US20170205978A1 (en) | Virtual Tabs Supporting Web Content Suspension | |
US9934214B2 (en) | DOM snapshot capture | |
EP2179583B1 (en) | Method and apparatus for automated content marking | |
CN104636435A (en) | Cloud terminal screen recording method | |
US8683263B2 (en) | Cooperative client and server logging | |
CN105975470B (en) | Historical record processing method and device | |
WO2020134956A1 (en) | Video recommendation method and apparatus | |
CN102253900B (en) | Memory optimization method under Windows CE operating system | |
WO2022036865A1 (en) | Method and apparatus for automatically capturing log file, and computer device | |
CN103826164A (en) | Method and device for recording video watching | |
US20120254759A1 (en) | Browser-based recording of content | |
JP2007279991A (en) | Log management program and recording medium | |
CN105812845A (en) | Media resource pushing method, media resource pushing system, and media player based on Android system | |
WO2015143854A1 (en) | Data acquisition and interaction method, set top box, server and multimedia system | |
WO2020042060A1 (en) | Method for realizing webpage video recording and storage | |
GB2603228A (en) | Adding audio content to digital works | |
CN111475423A (en) | Data entry method and device, electronic equipment and readable storage medium | |
US20110025698A1 (en) | Process management system | |
CN108616709A (en) | A method of realizing video record and the storage of webpage version | |
WO2013188590A2 (en) | Context-aware video api systems and methods | |
CN113591000B (en) | Browser engine switching method, device and equipment | |
CN114546775A (en) | Web monitoring method, device, equipment and medium based on client application | |
CN106557398A (en) | Information uploading method and device | |
JP5490325B2 (en) | Autonomous intelligent content items |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
NENP | Non-entry into the national phase |
Ref country code: DE |