小白入门---HTML5多媒体

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);});