H5通过浏览器录制视屏或音频
来源:互联网 发布:淘宝的xbox手柄 编辑:程序博客网 时间:2024/06/08 18:57
webAPI获取摄像头及MIc
MediaRecorder.start()//开始录制命令
MediaRecorder.pause()//暂停录制
MediaRecorder.resume()//继续录制
MediaRecorder.stop()//停止录制
navigator.mediaDevices//获得设备的摄像头
通过getUserMedia获得视屏流或音频流
通过给getUserMedia({audio:true,video:true})传参来选择要获取的信息
*Promise 承诺 许诺*执行-》可以去做-》then()-》then(function(){* 发生的事})* 执行-》不去做-没有然后-catch()-》catch(){* 理由}** 创建Promise 对象的时候 第一个参数(函数)去做的时候去做做的函数-》如果条用第一个参数会执行then里面的回调函数* 创建promise的时候第二个参数不去做的话会调用的=catch里面的回调函数*具体实现获得银屏与视屏流的代码如下
navigator.mediaDevices.getUserMedia({audio:true,video:true}).then(function (strem) { var video=document.querySelector("video"); video.src=URL.createObjectURL(strem); console.log(strem);});MediaRecoder方法:
MediaRecoder:既可以录音频也可以录视频具体录制的是音频还是视频,是根据传入的MediaStream决定是视频还是音频;在创建对象的时候,需要传入媒体流 new MediaRecorder(媒体流对象);
具体代码如下:
navigator.mediaDevices.getUserMedia({audio:true,video:true}).then(function (stream) { var recorder= new MediaRecorder(stream); var recorderButton=document.querySelector(".recorderControl"); var video=document.querySelector("video"); video.src=URL.createObjectURL(stream);//把获取的视屏流和音频流放到界面的video容器里 recorderButton.onclick = function () { this.textContent==="开始录制"?video.play():video.pause(); this.textContent==="开始录制"?recorder.start():recorder.stop(); this.textContent=this.textContent==="开始录制"?"停止":"开始录制"; } //得到有效数据 收集数据 var buffers=null; var download=document.querySelector(".download"); recorder.ondataavailable=function (event) { //收集媒体设备获得到的可以使用的数据 console.log(event.data); buffers=event.data } recorder.onstop=function () {//停止录制时触发函数 var url=URL.createObjectURL(buffers); download.href=url; buffers=null; }}).catch(function (error) { alert(error);//抛出异常错误});事件:MediaRecorder.ondataavailable
被称为处理dataavailable事件,可用于抓取记录的媒体(可Blob在事件data属性中作为对象使用)。
MediaRecorder.onerror
一个EventHandler调用来处理该recordingerror事件,包括与媒体记录产生报告错误。这些是致命的错误,停止录制。
MediaRecorder.onpause
被EventHandler调用来处理pause当媒体记录暂停时发生的事件。
MediaRecorder.onresume
被EventHandler调用来处理resume事件,这是当暂停后媒体录制恢复时发生的。
MediaRecorder.onstart
被EventHandler调用来处理start媒体记录开始时发生的事件。
MediaRecorder.onstop
被EventH
阅读全文
0 0
- H5通过浏览器录制视屏或音频
- 音频录制
- 音频录制
- 录制音频
- 录制音频
- 音频录制
- 录制音频
- H5音频
- iOS 通过(lame)将录制音频转换成Mp3
- android录制音频通过网络传输到服务器播放
- android mediarecorder 录制音频并通过socket,存储到本地
- iOS 通过(lame)将录制音频转换成Mp3
- iOS 通过(lame)将录制音频转换成Mp3
- iOS 通过(lame)将录制音频转换成Mp3
- iOS 通过(lame)将录制音频转换成Mp3
- iOS 通过(lame)将录制音频转换成Mp3
- iOS 通过(lame)将录制音频转换成Mp3
- iOS 通过(lame)将录制音频转换成Mp3
- 17/8/2学习笔记03
- 笨办法学 Python · 续 练习 5:`cat`
- 触摸屏驱动设计----输入子系统模型
- H5 文件下载
- 一、java运行环境安装之-linux centos6.6安装mysql 5.6安装步骤【rpm安装方式】
- H5通过浏览器录制视屏或音频
- HDU6058 [2017多校联合3] Kanade's sum 我可能是个假链表
- AOJ894 种花【图的搜索+回溯】
- Lambda表达式
- HDU1042 N!
- 六.gradle的自定义任务
- 邻接矩阵 建图
- 关于前端脚手架yeoman的使用
- Java 7之基础