详解js的视频和音频采集


Posted in Javascript onAugust 09, 2018

今天要写的,不是大家平时会用到的东西。因为兼容性实在不行,只是为了说明下前端原来还能干这些事。
大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来,再为所欲为的么。或者说我想把我canvas画板的内容录制成一个视频,这些看似js应该做不到的事情,其实都是可以做到的,不过兼容性不好。我在这里都是以chrome浏览器举的例子。

这里先把用到的api列一下:

  • getUserMedia:打开摄像头和麦克风的接口(文档链接)
  • MediaRecorder:采集音视频流(文档链接)
  • srcObject:video标签可直接播放视频流,这是一个大家应该很少用到其实兼容性很好的属性,推荐大家了解(文档链接)
  • captureStream:可以将canvas输出流,其实不单单是canvas这里只是举有这个功能,具体的可以看文档(文档链接)

1、从摄像头展示视频

一、打开摄像头

// 这里是打开摄像头和麦克设备(会返回一个Promise对象)
navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
}).then(stream => {
 console.log(stream) // 放回音视频流
}).catch(err => {
 console.log(err) // 错误回调
})

上面我们成功打开了摄像头和麦克风,并获取到视频流。那接下来就是要把流呈现到交互界面中了。

二、展示视频

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <video id="video" width="500" height="500" autoplay></video>
</body>
<script>
 var video = document.getElementById('video')
 navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
 }).then(stream => {
 // 这里就要用到srcObject属性了,可以直接播放流资源
 video.srcObject = stream
 }).catch(err => {
 console.log(err) // 错误回调
 })
</script>

效果如下图:

详解js的视频和音频采集

到这里为止我们已经成功的将我们的摄像头在页面展示了。下一步就是如何将采集视频,并下载视频文件。

2、从摄像头采集视频

这里用到的是MediaRecorder对象:

创建一个新的MediaRecorder对象,返回一个MediaStream 对象用来进行录制操作,支持配置项配置容器的MIME type (例如"video/webm" or "video/mp4")或者音频的码率视频码率

MediaRecorder接收两个参数第一个是stream音视频流,第二个是option配置参数。下面我们可以把上面摄像头获取的流加入MediaRecorder中。

var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
}).then(stream => {
 // 这里就要用到srcObject属性了,可以直接播放流资源
 video.srcObject = stream
 var mediaRecorder = new MediaRecorder(stream, {
 audioBitsPerSecond : 128000, // 音频码率
 videoBitsPerSecond : 100000, // 视频码率
 mimeType : 'video/webm;codecs=h264' // 编码格式
 })
}).catch(err => {
 console.log(err) // 错误回调
})

在上面我们创建了MediaRecorder的实例mediaRecorder。接下来就是控制mediaRecorder的开始采集和停止采集的方法了。
MediaRecorder提供了一些方法和事件供我们使用:

  • MediaRecorder.start(): 开始录制媒体,这个方法调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.
  • MediaRecorder.stop(): 停止录制. 同时触发dataavailable事件,返回一个存储Blob内容的录制数据.之后不再记录
  • ondataavailable事件: MediaRecorder.stop触发该事件,该事件可用于获取记录的媒体(Blob在事件的data属性中可用作对象)
// 这里我们增加两个按钮控制采集的开始和结束
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
 audio: true,
 video: true
}).then(stream => {
 // 这里就要用到srcObject属性了,可以直接播放流资源
 video.srcObject = stream
 var mediaRecorder = new MediaRecorder(stream, {
 audioBitsPerSecond : 128000, // 音频码率
 videoBitsPerSecond : 100000, // 视频码率
 mimeType : 'video/webm;codecs=h264' // 编码格式
 })
 // 开始采集
 start.onclick = function () {
 mediaRecorder.start()
 console.log('开始采集')
 }
 // 停止采集
 stop.onclick = function () {
 mediaRecorder.stop()
 console.log('停止采集')
 }
 // 事件
 mediaRecorder.ondataavailable = function (e) {
 console.log(e)
 // 下载视频
 var blob = new Blob([e.data], { 'type' : 'video/mp4' })
 let a = document.createElement('a')
 a.href = URL.createObjectURL(blob)
 a.download = `test.mp4`
 a.click()
 }
}).catch(err => {
 console.log(err) // 错误回调
})

ok,现在执行一波操作;

详解js的视频和音频采集

上图可以看到结束采集后ondataavailable事件返回的数据中有一个Blob对象,这就是视频资源了,再接下来我们就可以通过URL.createObjectURL()方法将Blob为url下载到本地了。视频的采集到下载就结束了,很简单粗暴。

上面是视频采集下载的例子,如果只要音频采集的,同样道理的设置“mimeType”就好了。这里我就不举例了。下面我在介绍将canvas录制为一个视频文件

2、canvas输出视频流

这里用到的是captureStream方法,将canvas输出流,再用video展现,或者用MediaRecorder采集资源也是可以的。

// 这里就闲话少说直接上重点了因为和上面视频采集的是一样的道理的。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <canvas width="500" height="500" id="canvas"></canvas>
 <video id="video" width="500" height="500" autoplay></video>
</body>
<script>
 var video = document.getElementById('video')
 var canvas = document.getElementById('canvas')
 var stream = $canvas.captureStream(); // 这里获取canvas流对象
 // 接下来你先为所欲为都可以了,可以参考上面的我就不写了。
</script>

下面我再贴一个gif(这是结合我上次写的canvas事件的demo结合这次视频采集的结合)传送门(Canvas事件绑定)

希望大家可以实现下面的效果,其实还可以在canvas视频里插入背景音乐什么的,这些都比较简单。

详解js的视频和音频采集

Javascript 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 #Javascript
深入理解Promise.all
Aug 08 #Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 #Javascript
vue devtools的安装与使用教程
Aug 08 #Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 #jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 #jQuery
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 #Javascript
You might like
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python 解析XML文件
2009/04/15 Python
python 获取本机ip地址的两个方法
2013/02/25 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
甜品店创业计划书
2014/09/21 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
户外拓展训练感想
2015/08/07 职场文书
决心书格式范文
2015/09/23 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB