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

小咪咪 2022-06-11 08:10 536阅读 0赞

# 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