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

h5调用本地摄像头和麦克风一相关推荐

H5调用本地摄像头拍摄照片
前言最近项目中需要H5调用本地摄像头拍照的需求. 代码 <canvas id="canvasCemara" width="500" height=&qu ...
h5+ 调用本地摄像头拍照
<html> <div id="form"><div class="name-box"><span>姓名< ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
目录前言 API `MediaDevices.getUserMedia()` 拍照功能实例完整代码实现效果录像功能实例完整代码实现效果总结前言最近在做开源实例: Vue.js 实战系 ...
ROS调用本地摄像头数据并在rviz里显示
ROS调用本地摄像头数据并在rviz里显示: 1 通过usb_cam驱动包启动摄像头 1.1 创建并编译usb_cam驱动程序 1.2 启动usb_cam_node节点 1.3 在rviz中显示本地摄 ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
目标检测——使用yolov6调用本地摄像头进行实时检测
yolov6源码自带了图片目标检测推理功能: 当我们想进行摄像头实时检测识别的时候会有点不方便,根据源码的图片目标检测推理功能,我们进行稍作调整即可进行调用本地摄像头进行目标检测推理功能. 首先在源码 ...

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

h5调用本地摄像头和麦克风一相关推荐

最新文章

热门文章