HTML5多媒体功能

1、webAPI:使用navigator获取摄像头及MIC

简介：navigator(对象包含的属性描述了正在使用的浏览器)>mediaDevices(获得设备的摄像头或者mic)>getUserMedia(获得视频或者音频流 )

Example：

1.获取电脑设备摄像头和麦克风并且播放获得视频和音频流

结果：运行程序即可在浏览器中看到自己，听到自己的声音。

navigator.mediaDevices.getUserMedia({audio:true,video:true}).then(function(stream){
    //获取到之后执行then()函数里的操作
    var audio=document.querySelector("audio");//获取到html里面的audio标签(在html里面设置属性为autoplay即可播放)
    var video=document.querySeletor("video");

    audio.src=URL.createObjectURL(stream);//audio&video标签不可以直接播放MediaStream这种格式的数据>URL.createObjectURL(MediaStream)转换为URL格式的数据;
    video.src=URL.createObjectURL(stream);
}).catch(function(error){
    //发生错误时执行catch()函数里的操作
    alert(error);
})

2、Promise对象

简介：Promise对象可以替代callback：不知道什么时候完成，但是想获得完成后的结果—>Promise里面执行或者拒绝的方法只能执行一次，执行完就会移除函数(有可能把Promise里面的参数移除了。所以在需要多次执行某个回调的时候就不能使用Promise)

1.执行>可以去做>有了然后>then()–>then(function(){然后发生的事情})；
2.执行>不去做>发生了一些异常>catch()>catch(function(){异常及其理由})；
3.使用方式：new Promise(function(){success,reject});

3.1：创建Promise对象的时候第一个参数(函数)：成功的函数>如果调用第一个参数(函数)就会执行then()里面的回调函数；
3.2：创建Promise对象的时候第二个参数(函数)：拒绝的函数>如果调用第二个参数(函数)就会执行catch()里面的回调函数；

Example：

2.测试易源里面的QQ音乐接口

结果：运行程序会在浏览器中弹出一个弹出框：showapi_appid字段必传，因为我们在传url的时候没有拼接参数，所以会报错。

function loadData(url){
    
    return new Promise(function(success,reject){
    
        var request=new XMLHttpRequest();//Ajax异步请求
        request.open("GET",url);
        request.onload=function(){
    
            console.log(this.response);
            var obj=JSON.parse(this.response);
            obj.showapi_res_code==0?success(obj.showapi_res_body):reject(obj.showapi_res_error);//判断是否获取成功，将obj.showapi_res_body作为形参传递success函数，将obj.showapi_res_error作为参数传递给reject函数
        };
        requset.send();
    });
}
loadData("http://route.showapi.com/213-1").then(function(result){
    
    document.write(result);
}).catch(function(error){
    
    alert(error);
});

3、webAPI：使用MediaRecorde录制媒体流

简介：MediaRecorder既可以录制音频也可以录制视频，具体是录视频还是音频是根据传入的MediaStream决定的，在创建的时候我们需要传入媒体流：new MediaRecorder(媒体流对象)

Example：

3.录制音频流，并且在录制过程中可以监听录制音频，同时可将录制的音频下载到本地

结果：点击录制按钮即可录制同时听到录制声音，点击停止录制完毕，声音消失，同时讲所录制的音频下载到本地，格式为webm，可以使用浏览器播放。

var promise=navigator.mediaDevices.getUserMedia({audio:true});
promise.then(function(stream){
    
    var audio=document.querySelector("audio");//获取到html里面的audio标签(在html里面设置不用设置属性为autoplay)
    audio.src=URL.createObjectURL(stream);
    var recorder=new MediaRecorder(stream);
    var recorderControl=document.querySelector(".recorderControl");//获取到html中的录制按钮
    recorderControl.onclick=function(){
    //按钮点击控制音频播放和录制
        this.textContent==="录制"?audio.play():audio.pause();
        this.textContent==="录制"?recorder.start():recorder.stop();
        this.textContent=this.textContent==="录制"?"停止":"录制";
    };
    var buffer=null;
    recorder.ondataavailable=function(event){
    //获得有效数据是调用的回调函数
        console.log(event.data);
        buffer=event.data;//用buffer来接收一个blob类型的数据
    };
    var downloadLink=document.querySelector(".downloadLink");//获取<a download="media" class="downloadLink">下载</a>
    recorder.onstop=function(){
    //数据获取完调用的回调函数
        var url=URL.createObjectURL(buffer);
        downloadLink.href=url;//下载的连接也就是获取的数据的url格式
        downloadLink.click();//数据获取完即刻下载
        buffer=null;//清空buffer，释放内存
    };  
}).catch(function(error){
    
    console.log(error);
});