js的视频和音频采集

  • 今天要写的,不是大家平时会用到的东西。因为兼容性实在不行,只是为了说明下前端原来还能干这些事。

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

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

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

1、从摄像头展示视频

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

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

二、展示视频
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <video id="video" width="500" height="500" autoplay></video>
  11. </body>
  12. <script>
  13. var video = document.getElementById('video')
  14. navigator.mediaDevices.getUserMedia({
  15. audio: true,
  16. video: true
  17. }).then(stream => {
  18. // 这里就要用到srcObject属性了,可以直接播放流资源
  19. video.srcObject = stream
  20. }).catch(err => {
  21. console.log(err) // 错误回调
  22. })
  23. </script>

效果如下图:



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

2、从摄像头采集视频

这里用到的是MediaRecorder对象:

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

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

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

在上面我们创建了MediaRecorder的实例mediaRecorder。接下来就是控制mediaRecorder的开始采集和停止采集的方法了。

MediaRecorder提供了一些方法和事件供我们使用:

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

ok,现在执行一波操作;

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

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

2、canvas输出视频流

  • 这里用到的是captureStream方法,将canvas输出流,再用video展现,或者用MediaRecorder采集资源也是可以的。
  1. // 这里就闲话少说直接上重点了因为和上面视频采集的是一样的道理的。
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <canvas width="500" height="500" id="canvas"></canvas>
  12. <video id="video" width="500" height="500" autoplay></video>
  13. </body>
  14. <script>
  15. var video = document.getElementById('video')
  16. var canvas = document.getElementById('canvas')
  17. var stream = $canvas.captureStream(); // 这里获取canvas流对象
  18. // 接下来你先为所欲为都可以了,可以参考上面的我就不写了。
  19. </script>

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

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

js的视频和音频采集的更多相关文章

  1. video.js不能控制本地视频或者音频播放时长

    问题: 把视频放到本地,然后对视频进行测试,想要控制视频或者音频的播放时长,没办法做到,每次拉动进度条,都会使得本地视频重新播放 原因: 所有浏览器默认js无法访问本地地址,也就是说js不能对本地文件 ...

  2. (四)WebRTC手记之本地音频采集

    转自:http://www.cnblogs.com/fangkm/p/4374668.html 上一篇博文介绍了本地视频采集,这一篇就介绍下音频采集流程,也是先介绍WebRTC原生的音频采集,再介绍C ...

  3. WebRTC手记之本地音频采集

    转载请注明出处:http://www.cnblogs.com/fangkm/p/4374668.html 上一篇博文介绍了本地视频采集,这一篇就介绍下音频采集流程,也是先介绍WebRTC原生的音频采集 ...

  4. DirectShow音频采集声音不连续问题分析与解决办法经验总结

    最近广州大雨不断,并且多数无前兆,突然就来场大雨,给同学们降降温,说来本也是好事,但有时候下的真不是时候,最近这段时间都是即将下班了,大雨就来了,昨晚快下班前又出现了大雨,北方人总爱忘带雨伞,这不就被 ...

  5. Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  6. H5多媒体(用面向对象的方法控制视频、音频播放、暂停、延时暂停)

    视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...

  7. iOS 实时音频采集与播放Audio Unit使用

    前言 在iOS中有很多方法可以进行音视频采集.如 AVCaptureDevice, AudioQueue以及Audio Unit.其中 Audio Unit是最底层的接口,它的优点是功能强大,延迟低; ...

  8. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

  9. HTML5 添加视频和音频(响应式视频)

    最初的 HTML5规范呼吁所有浏览器内置支持使用 Ogg格式① 直接播放视频或音频(无需插件).但是由于 HTML5工作组的内部争议,曾经作为基线标准的支持 Ogg(包括 Theoravideo 和 ...

随机推荐

  1. [19/04/19-星期五] Java的动态性_脚本(Script,脚本)引擎执行JavaScript代码

    一.概念 Java脚本引擎是jdk 6.0之后的新功能. 使得Java应用程序可以通过一套固定的接口与各种脚本引擎交互,从而达到在Java平台上调用各种脚本语言的目的. Java脚本API是连接Jav ...

  2. 20155203 2016-2017-4 《Java程序设计》第9周学习总结

    20155203 2016-2017-4 <Java程序设计>第9周学习总结 教材学习内容总结 课堂内容 两个类如果有公共的部分要放在父类中,多次复用.当我们用父类或接口去声明对象的引用生 ...

  3. pass语句

    Python pass是空语句,是为了保持程序结构的完整性.  pass 不做任何事情,一般用做占位语句. #!/usr/bin/python # -*- coding: UTF-8 -*- # 输出 ...

  4. IntelliJ IDEA SVN无法正常使用问题

    SVN checkout时候会出现错误:Cannot run program "svn" (in directory "E:\Projects"): Creat ...

  5. 生产者-消费者模型-线程安全队列Queue

    #python3 #product new data into the queue #comsume data from the queue from queue import Queue impor ...

  6. OpenID Connect Core 1.0(五)使用授权码流验证(下)

    3.1.2.6 验证错误响应(Authentication Error Response) 验证错误响应是一个OAuth 2.0授权错误响应消息,是RP发送授权请求的消息,由OP授权终结点的响应返回. ...

  7. 腾讯云的对象存储COS

    什么是对象存储COS Clound Object Storage,COS,专门为企业和开发者们提供能够存储海量的分布式存储服务,用户可以随时通过互联网对大量数据进行批量存储和处理,在任意位置存储和检索 ...

  8. vue中渲染页面,动态设置颜色

    for循环中动态设置页面的图标或者字体颜色与循环中且套循环 :style="{'color':items.color}" 案例代码: html中 <div class=&qu ...

  9. ElasticSearch优化系列四:ES的heap是如何被瓜分掉的

    以下分别解读几个我知道的内存消耗大户: Segment Memory Segment不是file吗?segment memory又是什么?前面提到过,一个segment是一个完备的lucene倒排索引 ...

  10. redis-数据类型及命令

    redis五大数据类型:string(字符串),hash(哈希,类似java的Map),list(列表),set(集合),zset(有序集合) 1.redis的键(key) keys 查询数据库中的k ...