h5调用本地摄像头和麦克风一

最近在看视频流媒体方式，作为小白学者写出来大家一起沟通一起学习！

    首先我认为要完成一套流程 必须是这样的:

第一 数据源怎么来？第二怎么把数据源传输到服务器？第三 怎么把服务器的视频传输到页面   好了 大概就是这样

    首先我给大家介绍下如何处理第一步(以下全为pc端)：

               数据源 就是通过我们在页面调用我们的摄像头和麦克风；我们使用h5的getUserMedia

接下来看代码

 

html
    

        
        打开视频
    


js代码
var myvideo = document.getElementById("videos")

//这里我们处理兼容性，保证我们的 getUserMedia 正确使用            
navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia
//开启我们的设备             
navigator.getUserMedia({
                 video:true,//代表视频
                 audio:true//代表麦克风
             },function(stream){
                //这里我们处理的是摄像头捕捉的信息
                 var URL = window.URL || window.webkitURL;
                //将视频放入我们的vide中
                 myvideo.src  = window.URL.createObjectURL(stream)

                 myvideo.play()
             },function(err){
                 console.log(err)
             })

然后我们打开页面 结果会报错  提示 createObjectURL不存在  然后找到官方api 说这个已经过期了  
好吧  那我们按照官方的来运行

html代码
       
    

        
        打开视频
    



js代码
 //需要引入jquery
        $('#openVide').click(function(){
var cOnstraints= { audio: true, video: { width: 1280, height: 720 } }; 

    navigator.mediaDevices.getUserMedia(constraints)
    .then(function(mediaStream) {
        console.log(mediaStream)
        var video = document.querySelector('video');
        
        video.srcObject = mediaStream;
        video.Onloadedmetadata= function(e) {
        video.play();
    };
    })
    .catch(function(err) { console.log(err.name + ": " + err.message); }); 

其实大同小异  俩者区别不大 只是换了一种写法

然后我们运行看效果

好了 现在我们把视频展示出来了 但是怎么传输到后端呢？首先想到的是websocket实时流传输，现在还在学习 
哈哈哈  后续慢慢更新！ 有建议或者更好的方法 欢迎交流沟通！！！！！！！