一、window.navigator 对象包含有关访问者浏览器的信息取


Document

在这里插入图片描述

二、MediaDevices

MediaDevices API

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

MediaDevices.enumerateDevices()
获取有关系统中可用的媒体输入和输出设备的一系列信息。
getSupportedConstraints()
返回一个符合 MediaTrackSupportedConstraints (en-US) 的对象。该对象指明了 MediaStreamTrack 接口支持的可约束的属性。
getDisplayMedia()
提示用户选择显示器或显示器的一部分（例如窗口）以捕获为MediaStream 以便共享或记录。返回解析为 MediaStream 的 Promise。
MediaDevices.getUserMedia()
在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

1.使用麦克风

var promise = navigator.mediaDevices.getUserMedia(constraints);

constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的 Promise 对象就会处于 rejected［失败］状态，NotFoundError作为 rejected［失败］回调的参数。

以下同时请求不带任何参数的音频和视频：

{ audio: true, video: true }
更多参数详情请点此处


Document

在这里插入图片描述
选择输入设备（你自己实现即可比较简单，视屏也是如此）

使用MediaDevices.enumerateDevices()获取媒体设备后筛选输入设备
将audio: true换成audio:语音输入设备即可获取音频输入流

2.使用摄像头（和音频一样）


Document

在这里插入图片描述

3.拍照

原理看这里

原理就是：

获取画布的 2D 渲染上下文
将图片输入源的（dx, dy）起始坐标到（dx+dWidth, dy+dHeight）所形成的矩形的内容画到画布中去


Document

4.录屏

MediaDevices.getDisplayMedia()
这个 MediaDevices 接口的 getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个 MediaStream 里. 然后，这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。

在这里插入图片描述

使用了vue框架

三、MediaRecorder(录制,可录制音频视屏)

更多详情请点击这里

MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口，他需要通过调用 MediaRecorder() 构造方法进行实例化。

构造方法

//语法
var mediaRecorder = new MediaRecorder(stream[, options]);

参数

stream
MediaStream 将要录制的流。它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 , 以及 DOM 元素。
options 可选
一个字典对象，它可以包含下列属性：
mimeType: 为新构建的 MediaRecorder 指定录制容器的 MIME 类型。在应用中通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持此种mimeType .
audioBitsPerSecond: 指定音频的比特率。
videoBitsPerSecond: 指定视频的比特率。
bitsPerSecond: 指定音频和视频的比特率。此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定，则此属性可以用于设定另外一个属性。

录制视屏（音频同理）