用浏览器轻松录制音频、视频—

原文链接

浏览器有个强大而且简单的API —— MediaRecorder，顾名思义，可以用来录制音频和视频。闲话不说，先上demo ——

#demo1: 录制语音

< 微信(66)哈哈哈···

说话

按住说话

show in codepen

#demo2: 录制视频

< 微信(66)哈哈哈···

拍段视频吧

按住拍视频

show in codepen

看完demo，再来看看怎么实现吧 ——

#简介

API可以说是相当简单粗暴了

#一个构造函数 MediaRecorder()

创建一个新的MediaRecorder对象，用来进行录制操作。

上面的demo只用到了两个方法和两个事件 ——

#两个方法start、stop

#start()

开始录制媒体。

可以设置一个参数，录制的媒体会按照设置的值进行分割成一个个单独的区块，而不是以默认的方式录制一个非常大的整块内容。

#stop()

停止录制，同时触发dataavailable事件，返回一个存储Blob内容的录制数据。

#三个事件start、stop、dataavailable

#onstart

录制开始时触发

#onstop

录制结束时触发

#ondataavailable

录制结束时同时触发，事件对象中返回录制的媒体数据

#代码片段

demo中用到的部分代码：

获取用户媒体权限，创建媒体录制对象：

requestMediaAccess () {//获取用户媒体权限，视频的话参数{audio: true, video: true}navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {//创建媒体录制对象this.recorder = new window.MediaRecorder(stream);this.bindEvents();}, error => {alert('出错，请确保已允许浏览器获取录音权限');});
}

绑定事件，处理录制数据：

bindEvents () {this.recorder.ondataavailable = this.getRecordingData;this.recorder.onstop = this.saveRecordingData;
},getRecordingData (e) {//录制的数据this.chunks.push(e.data);
},//保存音频数据
saveRecordingData  () {let blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' }),audioStream = URL.createObjectURL(blob),//估算时长duration = parseInt(blob.size / 6600);if(duration <= 0) {alert('说话时间太短');return;}if(duration > 60) {duration = 60;}this.chunkList.push({duration: duration, stream: audioStream});this.chunks = [];
},//视频的话：保存视频数据
saveRecordingData  () {let blob = new Blob(this.chunks, { 'type' : 'video/webm' }),videoStream = URL.createObjectURL(blob);this.chunkList.push({stream: videoStream});this.onCapture(this.index);        this.chunks = [];
},//视频：获取视频截图
onCapture (index) {let item = this.chunkList[index];this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);this.canvas.toBlob((blob) => {let src = URL.createObjectURL(blob);this.$set(item, 'poster', src);});//索引后移this.index ++;//隐藏videothis.showVideo(false);this.video.srcObject = null;
}

注意

估算时长那块是我拍脑袋瞎弄的

用浏览器轻松录制音频、视频—— MediaRecorder API相关推荐

浏览器怎么录制网页视频？3种网页视频录制方法
我们每天都会在浏览器上观看大量的视频,尤其是在爱奇艺.腾讯.哔哩哔哩等网页上.有时候就会观看到一些精彩的视频画面,就想要将这些画面给下载. 那怎么把网页视频录制下来?今天本文就给大家分享3种有效的网页 ...
Android音频处理知识（一）MediaRecorder录制音频
在Android中处理音频方面的知识一直是一块很重要的知识,正好最近公司做一个关于打卡的内容,所以正好总结一下相应的知识,其实这块的知识挺杂挺乱的,所以这个不打算一次讲解完,分开给大家讲解,如果有什么 ...
Android录制音频方式AudioRecorder和MediaRecorder
AudioRecorder和MediaRecorder AudioRecord和MediaRecorder两种都可以录制音频,MediaRecorder已实现大量的封装,操作起来更加简单,而Audio ...
html5视频常用API接口
一.虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名="属性值")格式,避免出现错误 (下面加粗的属性为常用属性) 属性值功能描述 controls co ...
HTML5媒体（音频/视频）
摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...
HTML-参考手册: HTML 音频/视频
ylbtech-HTML-参考手册: HTML 音频/视频 1.返回顶部 1. HTML 音频/视频 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> ...
video/audio 音频/视频标签详解
video <video> 标签定义视频,比如电影片段或其他视频流. 可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <vid ...
平凡前端之路_03.HTML5的音频视频多媒体
文章目录 HTML5音频视频 HTML5音频 HTML5视频 HTML5音频视频常用属性 HTML5音频视频常用方法 HTML5音频视频常用事件 HTML5音频视频特殊属性浏览器不支持音频视频自动播 ...
HTML 事件、音频/视频
HTML 事件属性全局事件属性 HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript. 如果你想学习更多关于事件 ...

用浏览器轻松录制音频、视频—— MediaRecorder API