前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >H5录制视频、音频(WebRTC)

H5录制视频、音频(WebRTC)

作者头像
黒之染
发布于 2018-10-19 06:25:30
发布于 2018-10-19 06:25:30
5.2K0
举报

使用Navigator.getUserMedia可以做到在主流浏览器中获取用户摄像头数据,麦克风数据,我研究了一下,发现在ios、安卓微信浏览器中都不行。而在安卓6.0.1自带浏览器中可以,iOS Safari不支持,mac Safari不支持,兼容性还是太差,所以还是弃用了。但是我研究的结果还是保存一下,万一以后微信浏览器支持了呢?

以下是我研究的结果:

关于这个api的参数说明: MDN:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia W3C:http://w3c.github.io/mediacapture-main/#widl-NavigatorUserMedia-getUserMedia-void-MediaStreamConstraints-constraints-NavigatorUserMediaSuccessCallback-successCallback-NavigatorUserMediaErrorCallback-errorCallback

方法需要3个参数:

  1. constraints,指明需要获取什么类型的数据
  2. successCallback, 数据获取成功后回调的方法(只会被调用一次,但是如果把回调时的视频流放到video标签中,视频会实时更新)
  3. errorCallback,接口调用失败后回调的方法

我主要想知道第一个参数里的情况,因为很多国内的教程里都只是这样:{video : true},我还想知道如果要录音频、使用后置摄像头该怎么办。这个问题在https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters 能找到答案,我复制一下。

constraints

  1. 如果单纯指定需要什么类型的媒体,只要这样就行{ audio: true, video: true },这个表示需要视频和音频。应该也只支持这两种了,我看了MDN和W3c,都没发现第三种
  2. 以下把video参数写成object格式的,在chrome中都会报错Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': Malformed constraints object.,然而这些用法真的是MDN和W3C标准,不知道chrome为什么不支持。然而在chrome中有特殊的使用后置摄像头的方法,参考:http://blog.csdn.net/journey191/article/details/40744015,这个参考里的方法我测过,安卓6.0.1的确可以用后置摄像头。
  3. 如果要指定视频的宽高可以这样 { audio: true, video: { width: 1280, height: 720 } }
  4. 还可以用minmax,或者 ideal (即如果支持,就用这个) { audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 776, ideal: 720, max: 1080 } } }
  5. 如果要指定前后摄像头 { audio: true, video: { facingMode: "user" } }//如果有前置摄像头的话使用前置摄像头(我身边的机器都有前置,所以没测试没有的情况) { audio: true, video: { facingMode: { exact: "environment" } } }//如果有后置摄像头的话使用后置
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Webrtc及WEB端音视频设备获取及流处理
注意本文和之前Electron获取设备的文章有重合,但是也不是一样的,因为在Electron中我们不但能用HTML的API,也能使用Electron的API,但是WEB中就有局限了,在WEB中就实现不了直接分享主屏幕,必须用户选择。
码客说
2022/09/23
2.5K0
Webrtc及WEB端音视频设备获取及流处理
H5利用JS调用电脑摄像头实现拍照效果
今天学习了调用电脑摄像头,利用canvas画布将视频当前帧转换成图片的实例,其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入,产生包含所请求类型的媒体轨道。包括视频轨道(由诸如照相机,视频记录设备,屏幕共享服务等的硬件或虚拟视频源产生),音频轨道(类似地,由物理或虚拟音频源,如麦克风,A / D转换器等),以及其他可能的轨道类型。
德顺
2019/11/12
9.7K1
Electron音视频相关
比如我的耳机既能听声音又有麦克风,那么获取到的音频输入和音频输出设备的groupId就会是一样的。
码客说
2021/02/04
2.5K1
探秘移动端网页调用摄像头的两种方式
PC 端网页调用摄像头的场景想必大家并不陌生,打开一个网址,开启摄像头开始笔试/视频聊天/直播等。
掘金安东尼
2022/09/22
4.4K0
探秘移动端网页调用摄像头的两种方式
如何使用JavaScript访问设备摄像头(前后)
在这篇文章中,我将向您展示如何通过 JavaScript 在网页上访问设备的摄像头,并支持多种浏览器,而无需外部库。
张张
2020/06/10
11.4K1
网站在线客服系统实时语音视频聊天实战开发,最兼容的getUserMedia获取音视频流的函数方法
getUserMedia() 是一个 JavaScript API,允许你访问用户的音频和视频设备(如摄像头和麦克风)。在不同的浏览器中,它的实现略有不同,但是你可以使用以下代码来实现一个最兼容的版本:
唯一Chat
2023/02/12
5040
网站在线客服系统实时语音视频聊天实战开发,最兼容的getUserMedia获取音视频流的函数方法
WEBRTC 实现浏览器拍照
最近的几个需求都涉及到了扫码和拍照之类的功能,扫码用的是插件 html5-qrcode,拍照就自己写了一下,没多少行代码。
wade
2023/09/01
3240
WEBRTC 实现浏览器拍照
WebRTC网页打开摄像头并录制视频
前面我们能打开本地摄像头,并且在网页上看到摄像头的预览图像。 本文我们使用MediaRecorder来录制视频。在网页上播放录制好的视频,并能提供下载功能。
落寞的鱼丶
2022/02/26
1.6K0
Web前端WebRTC攻略(二) 音视频设备及数据采集
2021年1月26日,W3C 和 IETF 同时宣布 WebRTC(Web Real-Time Communications,Web 实时通信)现发布为正式标准,标志着 WebRTC正式走进舞台。尽管如此,WebRTC 早已在视频会议和直播中得到了广泛的应用,成为了线上通信及协作服务的基石。IMWeb 团队是国内最早研究 WebRTC 的团队之一,在腾讯课堂、企鹅辅导等应用中都有实践。这是 WebRTC 系列的第二篇,希望可以帮助你更好的了解音视频。 一、音视频采集基本概念 在讲浏览器提供的用 JS 采集音
用户1097444
2022/06/29
3.6K0
Web前端WebRTC攻略(二) 音视频设备及数据采集
WebRTC 点对点直播
作者:villainthr WebRTC 全称为:Web Real-Time Communication。它是为了解决 Web 端无法捕获音视频的能力,并且提供了 peer-to-peer(就是浏览器
腾讯IVWEB团队
2017/03/13
10.3K0
抛弃websocket,前端直接打通信道,webRTC搭建音视频聊天
什么是WebRTC? 众所周知,浏览器本身不支持相互之间直接建立信道进行通信,都是通过服务器进行中转。比如现在有两个客户端,甲和乙,他们俩想要通信,首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时,甲先将消息发送到服务器上,服务器对甲的消息进行中转,发送到乙处,反过来也是一样。这样甲与乙之间的一次消息要通过两段信道,通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流的传输,如何建立浏览器之间的点对点传输,一直困扰着开发者。WebRTC应运而生 WebRTC是一个开源项目,旨在
李海彬
2018/03/27
7.5K0
抛弃websocket,前端直接打通信道,webRTC搭建音视频聊天
js调用网页摄像头进行直播/拍照
具体文档可查看:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
仙士可
2022/02/18
5.1K0
js调用网页摄像头进行直播/拍照
JS 调取摄像头
截止目前(2016-06-23)为止,js 调取摄像头实现视频聊天,部分浏览器还是不怎么支持的。
White feathe
2021/12/08
2.7K0
JS 调取摄像头
Web前端WebRTC攻略(一) 基础介绍
随着互联网高速发展,以及即将到来的5G时代,WebRTC作为前端互动直播和实时音视频的利器,也是将前端开发者们不可错过的学习领域。如果你现在只是听过而已,那你可能要好好学习一番。 01  什么是WebRTC? WebRTC 全称是(Web browsers with Real-Time Communications (RTC) 大概2011年,谷歌收购了 GIPS,它是一个为 RTC 开发出许多组件的公司,例如编解码和回声消除技术。Google 开源了 GIPS 开发的技术,并希望将其打造为行业标准。 收
用户1097444
2022/06/29
2.5K0
Web前端WebRTC攻略(一) 基础介绍
工具系列 | H5如何实现人脸识别
人脸识别技术在当下已经十分成熟,但主要在移动端和专有设备应用上较为普及,而在Web端并不多见,本着学习的目的从零实现web端的人脸登录功能。
Tinywan
2020/07/23
3.7K0
工具系列 | H5如何实现人脸识别
摆脱客户端?网页发起直播势在必行!
近几年直播行业飞速发展,但是由于Web端这方面功能的长时间缺失,使得直播端以客户端为主;WebRTC 的出现使得网页也可以成为直播端。那么究竟WebRTC是什么呢?
保利威视频云
2020/05/07
3K0
摆脱客户端?网页发起直播势在必行!
Safari上使用WebRTC指南
原文:https://webrtchacks.com/guide-to-safari-webrtc/
LiveVideoStack
2021/09/01
3.4K0
前端WebAR实现简单版pokemon Go
背景: 最近AR的话题很火,如前段时间pokemon Go游戏,和支付宝的AR红包,加上最近看到了一些关于前端运用webRTC技术实现WebAR的文章,这边就尝试结合下,实现一个简单版的pokeMon
IMWeb前端团队
2017/12/29
1.7K0
前端WebAR实现简单版pokemon Go
WebRTC简介及使用
WebRTC 只是一个媒体引擎,上面有一个 JavaScript API,所以每个人都知道如何使用它(尽管浏览器实现仍然各不相同),本文对 WebRTC(网页实时通信)的相关内容进行简要介绍。
Gnep@97
2023/11/12
1.8K0
WebRTC简介及使用
媒体数据获取与播放
     在学习 WebRTC 音视频开发前,我们先来学习了解一下音频、视频等媒体数据的获取与播放。了解一下入门级的 API 的使用。
前端小鑫同学
2022/12/26
9830
相关推荐
Webrtc及WEB端音视频设备获取及流处理
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文