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

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

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

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

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

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

接下来看代码

html
    <div>
        <video id="videos" src=""></video>
        <button id="openVide">打开视频</button>
    </div>


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代码
       <body>
    <div>
        <video id="videos" src=""></video>
        <button id="openVide">打开视频</button>
    </div>
</body>


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实时流传输，现在还在学习
哈哈哈后续慢慢更新！有建议或者更好的方法欢迎交流沟通！！！！！！！

不忘初心方得始终小飞哥

发布了15 篇原创文章 · 获赞 13 · 访问量 1万+

私信关注

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

猜你喜欢