WO2020042060A1 - 一种实现网页版的视频录像与储存的方法 - Google Patents

Abstract

本发明涉及网页视频录像与存储的技术领域，特别涉及一种实现网页版的视频录像与储存的方法。本发明方法步骤是：1、定义视频录像页面需要的标签；2、引用RecordRTC.js；3、调用电脑摄像头；4、利用RecordRTC进行视频录像；5、设置保存视频的格式、名称；6、将录制好视频存储到本地；本发明实现了一种方便快捷、成本低的视频录制与保存的方法，解决了传统的在电脑进行视频录制需要安装软件、插件等实现视频录制与保存的功能。

Description

一种实现网页版的视频录像与储存的方法

技术领域

本发明涉及网页视频录像与存储技术领域， 特别涉及一种实现 网页版的视频录像与储存的方法。

背景技术

视频录像与保存的功能在人们的生活中无处不在， 随着人们的 生活水平的提高， 越来越多的人选择录制视频并保存， 记录生活的 点点滴滴。

电脑的摄像头又称为电脑相机、 电脑眼、 电子眼等， 是一种视 频输入设备， 被广泛的运用于视频会议， 远程医疗及实时监控等方 面。

但是， 目前面临的主要问题有：

现有的许多能在电脑提供视频录像与保存功能的都是基于某种 插件或软件进行视频录制与保存的， 这插件与软件的繁琐安装步骤 无疑会让人们感觉烦躁， 特别在安装出错或失败时， 找不着原因以 至于不能进行视频录像等问题。

发明内容

本发明实现了一种方便快捷、 成本低的视频录制与保存的方 法， 解决了传统的在电脑进行视频录制需要安装软件、 插件等实现 视频录制与保存的问题。 本发明解决上述技术问题的技术方案是：

所述的方法包含以下几个步骤：

步骤一、 定义视频录像页面需要的标签；

步骤二、 引用 RecordRTC.js;

步骤三、 调用电脑摄像头；

步骤四、 利用 RecordRTC进行视频录像；

步骤五、 设置保存视频的格式、 名称；

步骤六、 将录制好视频存储到本地。

本发明的有益效果： 提供了一种实现网页版的视频录像与储存 的方法， 这种方法实现了一种方便快捷、 成本低的视频录制与保存 的方法， 解决了传统的在电脑进行视频录制需要安装软件、 插件等 实现视频录制与保存的问题。

附图说明

下面结合附图对本发明进一步说明：

图 1为本发明的方法流程图。

具体实施方式

如图 1所示， 本发明采用如下步骤可以实现一种实现网页版的视 频录像与储存的方法。

步骤一、 定义视频录像页面需要的标签。 在视频录制的 html页面 中定义调用视频的 video标签、 播放视频的按钮标签 button

(start Video 停止并保存视频的标签 button(saveVideo)， 页面加载 时若浏览器版本过低， 提示更新。 ávideo width=^M800^M height=^MM id='’video">您的浏览器版本过 低， 请更新 !</video>

ábutton id=" start V ideo” >开始 á/button ñ

ábutton id=" save Video” ñ停止与保存 á/button ñ

步骤二、 引用 RecordRTC.js是。 在 html视频录制页面中引用 RecordRTCjs, 因为它是我们实现调用摄像头在网页中进行录像的 主力。

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

步骤三、 调用电脑摄像头。 navigator.mediaDevices.getUserMedia 提示用户给予使用媒体输入的许可， 媒体输入产生一个

MediaStream, 里面包含了请求的媒体类型的轨道， 当无法正常获取 媒体设备时将会友好的发出错误提示。

navigator.mediaDevices.getUserMedia({

audio: true,

video: true

}).then(function(camera) {

callback(camera);

}).catch(function(error) {

alert ('无法捕抓您的摄像头， 请查看控制台曰 console log(error);

}) 步骤四、 利用 RecordRTC进行视频录像。 调用的摄像头以流的形 式传递给页面中的 video元素， 并调用 RecordRTC的 startRecor ding方 法进行视频录制， 并实时的将视频显示在录制页面的 video元素中。

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;

})；

步骤五、 设置保存视频的格式、 名称。

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

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

Var fileName = timestamp + num +‘.webm’；

步骤六、 将录制好视频存储到本地。 调用 recordRTC的

invokeSaveAsDialog方法将已记录的视频保存到磁盘中。

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

});

invokeSaveAsDialog(file, file.name)。

Claims

权 利 要 求 书

1、 一种实现网页版的视频录像与储存的方法， 其特征在于： 所 述的方法包含以下几个步骤：

步骤一、 定义视频录像页面需要的标签；

步骤二、 引用 RecordRTC.js;

步骤三、 调用电脑摄像头；

步骤四、 利用 RecordRTC进行视频录像；

步骤五、 设置保存视频的格式、 名称；

步骤六、 将录制好视频存储到本地。

2、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法， 其特征在于： 所述的步骤一中， 需要在视频录制的 html页面 中定义调用视频的 video标签、 播放视频的按钮标签 button

（ start Video）、 停止并保存视频的标签 button（save Video）。

3、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法， 其特征在于： 所述的步骤二中， 需要引用 RecordRTC. js， RecordRTC是一个基于 JavaScript的媒体录音库， 用于现代网络浏览 器 （支持 WebRTC getUserMedia API）; 它针对不同的设备和浏览器进 行了优化， 将所有客户端 （无插件） 录制解决方案集中在一个地 方。

4、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法， 其特征在于： 所述的步骤三中， 利用

替换页（细则第 26条） navigator.mediaDevices.getUserMedia()方法调用电脑摄像头， 当无法 调用摄像头时， 及时提示用户调用摄像头失败。

5、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法， 其特征在于： 所述的步骤四中， 将调用的摄像头以流的形式 传递给页面中的 video元素， 并调用 RecordRTC的 startRecording方法 进行视频录制。

6、 根据权利要求 1所述的一种实现网页版的视频录像与储存的 方法， 其特征在于： 所述的步骤五中和步骤六中， 当停止与保存视 频的按钮被点击时停止录像， 选取要保存视频的格式， 填写名称， 将已经录好的视频保存到本地。

替换页 (细则第 26条)