首页 > 其他分享 >HTML调用摄像头和/或麦克风

HTML调用摄像头和/或麦克风

时间:2022-10-21 13:12:28浏览次数:82  
标签:浏览器 麦克风 HTML video getUserMedia audio true 摄像头

API:getUserMedia函数调用摄像头和麦克风

API简介

HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 
getUserMedia API最初是navigator.getUserMedia,目前已被最新Web标准废除,变更为navigator.mediaDevices.getUserMedia(),但浏览器支持情况不如旧版API普及。 
MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备,例如相机或屏幕共享和/或麦克风。如果用户给予许可,就返回一个Promise对象,MediaStream对象作为此Promise对象的Resolved[成功]状态的回调函数参数,相应的,如果用户拒绝了许可,或者没有媒体可用的情况下PermissionDeniedError或者NotFoundError作为此PromiseRejected[失败]状态的回调函数参数。注意,由于用户不会被要求必须作出允许或者拒绝的选择,所以返回的Promise对象可能既不会触发resolve也不会触发 reject

语法

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { ... })
.catch(function(error) { ... }

调用参数

containers:指定请求的媒体类型,主要包含videoaudio,必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的Promise对象就会处于rejected[失败]状态,NotFoundError作为rejected[失败]回调的参数。

[例] 同时请求不带任何参数的音频和视频

 {audio: true, video: true}

[例] 要求获取最低为1280x720的分辨率

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

[例] 优先使用前置摄像头(如果有的话)

{ audio: true, video: { facingMode: "user" } }

[例] 强制使用后置摄像头

{ audio: true, video: { facingMode: { exact: "environment" } } }

成功回调函数seccessCallback的参数streamstreamMediaStream的对象,表示媒体内容的数据流,可以通过URL.createObjectURL转换后设置为VideoAudio元素的src属性来使用,部分较新的浏览器也可以直接设置为srcObject属性来使用。

失败回调函数errorCallback的参数error,可能的异常有:

  • AbortError:硬件问题。
  • NotAllowedError:用户拒绝了当前的浏览器实例的访问请求;或者用户拒绝了当前会话的访问;或者用户在全局范围内拒绝了所有媒体访问请求。
  • NotFoundError:找不到满足请求参数的媒体类型。
  • NotReadableError:操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
  • OverConstrainedError:指定的要求无法被设备满足。
  • SecurityError:安全错误,在getUserMedia() 被调用的 Document上面,使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
  • TypeError:类型错误,constraints对象未设置[空],或者都被设置为false

关闭摄像头或者麦克风:

需要注意的是,MediaStream.getTracks() 返回的Tracks数组是按第一个参数倒序排列的

比如现在定义了

{
    video: true,
    audio: true
}

想关闭摄像头,就需要调用MediaStream.getTracks()[1].stop();

同理,0对应于audio的track

学习记录博客,原文来源

https://www.cnblogs.com/cangqinglang/p/10210826.html

标签:浏览器,麦克风,HTML,video,getUserMedia,audio,true,摄像头
From: https://www.cnblogs.com/qingfeng515/p/16813117.html

相关文章

  • 摄像头基础知识(二):Bayer、Raw与ISP
     摄像头基础知识(二):Bayer、Raw与ISP_EEer!的博客-CSDN博客_ispraw 摄像头基础知识(二):Bayer、Raw与ISPEEer!已于2022-10-1514:49:23修改254收藏分类专栏:camer......
  • 摄像头基础知识(一):mipi与lane
    摄像头基础知识(一):mipi与lane_EEer!的博客-CSDN博客 摄像头基础知识(一):mipi与laneVIP文章EEer!已于2022-10-1514:41:29修改469收藏2分类专栏:camera文章标签:c......
  • HTML
    1,概念:是最基础的网页开发语言*HyperTextMarkupLanguage 超文本标记语言超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文......
  • HTML标签综合案例分析与实现
    1.确定使用table来完成布局2.如果某一行只有一个单元格,则使用<tr><td></td></tr>3.如果某一行有多个单元格,则使用 <tr> <td> <table></tab......
  • HTML基本标签
    HTML基本标签1.文件开始标签用于表示该文件是以超文本标识语言(HTML)编写,该标签不带有任何属性2.头文件标签表示网页的头部标签,在中定义的元素,并不会放置网页中的任何......
  • HTML常用标签
    HTML常用标签<!DOCTYPEhtml><!--html文件开始--><htmllang="en"><!--head文件头--><head><metacharset="UTF-8"><title>这是第一个网页</title></hea......
  • 怎么从html页面变成jsp页面
    修改html页面到jsp页面也就是从静态页面到动态页面.第一是:修改页面的编码<%@pagecontentType="text/html;charset=UTF-8"language="java"%>第二是加上base标签,这......
  • HTML 事件之表单事件
    表单事件(FormEvents)表单事件在HTML表单中触发(适用于所有HTML元素,但该HTML元素需在form表单内):属性值描述onblurscript当元素失去焦点时运行脚本oncha......
  • HTML 事件之窗口事件
    HTML事件全局事件属性可以使HTML事件触发浏览器中的行为,比方说当用户点击某个HTML元素时启动一段JavaScript。New :HTML5新增属性事件。窗口事件属性(WindowEv......
  • 认识HTML
    一、HTML基础HTML的英文全称是HyperTextMarkupLanguage,即超文本标记语言(一)标题HTML标题是通过<h1>-<h6>标签来定义的。<h1>这是标题</h1><h2>这是标题</h......