获取设备
1 | let devices = await navigator |
获取到数组的对象格式如下
1 | { |
其中kind
有以下几种类型
- videoinput 视频输入 (摄像头)
- audioinput 音频输入 (麦克风)
- audiooutput 音频输出 (扬声器)
其中deviceId
是设备的id,有以下几种值
- default 默认的设备(只有一个)
- communications 通讯中的设备(只有一个)
- id 设备的id 会和前面的默认设备重复
其中groupId
代表同一个设备
比如我的耳机既能听声音又有麦克风,那么获取到的音频输入和音频输出设备的groupId
就会是一样的。
其中label
是设备的名称
注意的是默认设备和通讯设备会在名称前拼接了Default
或者Communications
并用-
分隔
获取名称的方式
1 | let devices = await navigator.mediaDevices |
摄像头
1 | let devices = await navigator.mediaDevices |
麦克风
1 | let devices = await navigator.mediaDevices |
获取音视频流
基本语法
1 | navigator |
constraints 参数是一个包含了video
和 audio
两个成员的MediaStreamConstraints
对象,用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的Promise对象就会处于rejected[失败]状态,NotFoundError
作为rejected[失败]回调的参数。
其中约束条件constraints可以设置以下的值
同时请求不带任何参数的音频和视频:
1 | { |
当由于隐私保护的原因,无法访问用户的摄像头和麦克风信息时,应用可以使用额外的constraints参数请求它所需要或者想要的摄像头和麦克风能力。下面演示了应用想要使用1280x720的摄像头分辨率:
1 | { |
匹配最佳摄像头或理想值:当请求包含一个ideal(应用最理想的)值时,这个值有着更高的权重,意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头(如果设备拥有不止一个摄像头)。
1 | { |
并不是所有的constraints 都是数字。例如, 在移动设备上面,如下的例子表示优先使用前置摄像头(如果有的话):
1 | { |
强制使用后置摄像头,请用:
1 | { |
在某些情况下,比如WebRTC上使用受限带宽传输时,低帧率可能更适宜。
1 | { |
固定的摄像头
1 | { |
固定麦克风
1 | { |
关闭摄像头
1 | if (window.mystream) { |
获取摄像头的流
1 | let device_index = this.device_index; |
切换摄像头
1 | async change_camera_click() { |
获取桌面的流
1 | let stream = await navigator.mediaDevices.getUserMedia({ |
获取主桌面的流
1 | let sources = await desktopCapturer.getSources({types: ['screen']}) |
Electron获取窗口的流
下面的示例演示如何从标题为 Electron 的桌面窗口捕获视频:
1 | // In the renderer process. |
Electron获取截图
1 | const desktopCapturer = electron.desktopCapturer; |
desktopCapturer.getSources
会导致整个程序挂起,挂起时间与屏幕分辨率、屏幕数量和电脑性能有关。 在自用的 Macbook Pro 外接2K 显示器的情况下截图可以卡住2秒以上,而且鼠标还会出现等待的样式,这个体验是相当差了
Electron截图方式二
这种方式优化了创建截图的时间
1 | jieping2() { |
麦克风
获取麦克风设备
1 | let devices = await navigator.mediaDevices |
获取声轨
1 | let voiceStream = await navigator |
播放声音
只做测试使用,一台设备上即录音也播音会产生啸叫
1 | let video = document.createElement('video') |
获取麦克风声音大小
1 | async showAudio() { |
获取麦克风声音大小修改单声道的大小
1 | async showAudio() { |
如果缓冲的长度小于像素的宽度,我们最好用换缓冲的长度绘制
1 | g.clearRect(0, -height / 2, width, height); |
注意
上面注释的部分取消就会播放出声音
加载设备的音频流
1 | context.createMediaStreamSource(audioStream) |
如果要加载本地音频文件
1 | let audio = new Audio( '茜拉 - 想你的夜.mp3' ); |
设置声道
1 | let vol = 100,// 音量 |
设置音量
1 | // 设置音量 |
音视频合并
1 | let stream = await navigator.mediaDevices.getUserMedia({ |