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

最新推荐文章于 2024-08-07 17:43:28 发布

不忘初心方得始终小飞哥

最新推荐文章于 2024-08-07 17:43:28 发布

阅读量2.5k

点赞数 2

分类专栏： h5视频流

本文链接：https://blog.csdn.net/qq_36546907/article/details/89608471

版权

本文介绍了H5的getUserMedia方法在PC端调用摄像头和麦克风获取数据源，并探讨了由于createObjectURL过期而采用的新写法。作者分享了初步实现视频展示的步骤，并提出通过websocket进行实时流传输到后端的学习计划，欢迎交流讨论。

摘要由CSDN通过智能技术生成

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

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

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

首先我给大家介绍下如何处理第一步(以下全为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