基于H5的摄像头视频的采集与传输

1.获取H5的媒体对象

 function hasUserMedia() {

      navigator.getUserMedia =

        navigator.getUserMedia ||

        navigator.msGetUserMedia ||

        navigator.webkitGetUserMedia ||

        navigator.mozGetUserMedia;

      return !!navigator.getUserMedia;

    }

 

 

    navigator.getUserMedia(
      { video: false, audio: true },   //打开摄像头和麦克风。此处仅使用麦克风
      (stream) => {
        console.log(stream);
        //console.log(window.URL.createObjectURL(stream));        //该方法一直在谷歌浏览器一直报错，所以此处不使用

        record.onclick = function() {                          此处是点击按钮切换音频通话功能
          if(!audioPlay){
            mediaRecorder.start(1000);
            console.log("录音："+mediaRecorder.state);           
            audioPlay=true;
            audio.srcObject = stream;
            $(".playBtn").css("background-image","url(/assets/img/stop.png)")
          }else{
            mediaRecorder.stop();
            console.log("录音："+mediaRecorder.state);          
            audioPlay=false;
            audio.srcObject = null;
            $(".playBtn").css('background-image',"url(/assets/img/play.png)")
          }       
      };
        var mediaRecorder=new MediaRecorder(stream);     //创建MediaRecorder对象，用来将获取到的MediaStream媒体对象转换为blob对象
        mediaRecorder.ondataavailable=function(blob){     //此处将blob对象进行base64转换并传输给后台
         //console.log(blob.data)
         const reader = new FileReader();
         reader.onload = function(e) {
           //console.log(e.target === this) // true
           // console.log(this === reader) // true
          // console.log(this.result); // function ProgressEvent() { [native code] }
           mqtt_send("/GussianApi/Media/" + sn, "0|"+this.result);
         };
         reader.readAsDataURL(blob.data);
        }
       
      },
      (error) => {
        console.log(error);
      }
    );

　　2.也可以使用navigator.mediaDevices.getUserMedia,两者使用方法类似

navigator.mediaDevices
    .getUserMedia({video:false,audio:true})
    .then(function(stream) {
      console.log(stream)     
    })
    .catch(function(err) {
      console.log("The following error occured: " + err);
    });