关于 navigator.mediaDevices.getUserMedia 的输入参数说明

举报
Jerry Wang 发表于 2022/05/14 21:45:06 2022/05/14
【摘要】 本文讲解使用 SAP UI5 barcode scanner 调用本机摄像头时,在 PC 端浏览器测试时,同样是 Cordova API 不可用,进入 else 分支的执行逻辑:如果 Cordova API 不可用,但是 isUserMediaAccessSupported 仍然返回 true,则仍然可以打开 scan 对话框:/** * Used to detect browsers w...

本文讲解使用 SAP UI5 barcode scanner 调用本机摄像头时,在 PC 端浏览器测试时,同样是 Cordova API 不可用,进入 else 分支的执行逻辑:

如果 Cordova API 不可用,但是 isUserMediaAccessSupported 仍然返回 true,则仍然可以打开 scan 对话框:

/**
	 * Used to detect browsers which does not have access to html5 user media api and cant use device camera
	 * @private
	 * @returns {boolean} true is user media access supported by html5 compatible browser
	 */
	function isUserMediaAccessSupported() {
		return !!(window && window.navigator && window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia);
	}

这里 window.navigator.mediaDevices.getUserMedia含义

MediaDevices.getUserMedia() 方法提示用户允许使用媒体输入,该输入生成一个 MediaStream,其轨道包含所请求的媒体类型。

例如,该流可以包括视频轨道(由硬件或虚拟视频源(如相机、视频记录设备、屏幕共享服务等)产生)、音频轨道(类似地,由物理或 虚拟音频源(如麦克风、A/D 转换器等),以及可能的其他轨道类型。

它返回一个解析为 MediaStream 对象的 Promise。 如果用户拒绝许可,或者匹配的媒体不可用,则分别以 NotAllowedError 或 NotFoundError DOMException 拒绝承诺。

其中 getUserMedia 为浏览器原生实现。

async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

传入 getUserMediaconstraints 参数:

constraints 是一个对象,指定要请求的媒体类型,以及每种类型的任何要求。

约束参数是一个具有两个成员的对象:视频和音频,描述请求的媒体类型。 必须指定其中之一或两者。 如果浏览器无法找到符合给定约束的指定类型的所有媒体轨道,则返回的 Promise 会被 NotFoundError DOMException 拒绝。

如果为媒体类型指定了 true,则结果流中需要包含该类型的轨道。 如果由于任何原因不能返回一个,对 getUserMedia() 的调用将导致错误。

虽然出于隐私原因无法访问有关用户相机和麦克风的信息,但应用程序可以使用额外的约束来请求它需要和想要的相机和麦克风功能。 以下表示对 1280x720 相机分辨率的偏好:

{
  audio: true,
  video: { width: 1280, height: 720 }
}

如果不存在此分辨率或更高分辨率的相机,则返回的 Promise 将被 OverconstrainedError 拒绝,并且不会提示用户。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。