您的位置:首页 > Web前端 > HTML5

H5通过浏览器录制视屏或音频

2017-08-02 21:07 211 查看

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

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: