【音视频】摄像头

web camera vs ip camera

• IP Camera主要指那些可以直接接入Internet的摄像头，一般不需要专门的PC支持，可以归类于嵌入式设备。多用于监控，如公路上各个路口的监控设备。价格相对较高
• Web Camera主要指那些需要通过电脑、手机、平板等机器才能接入Internet的摄像头，多是USB接口。多用于视频聊天，拍照等。价格相对也较低。

检查设备支持

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
  console.log("Let's get this party started")
}

音视频采集

下面介绍浏览器采集音视频的相关API：

1. getUserMedia

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其他轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

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

2. MediaStreamConstraints

MediaStreamConstraints参数对象，指定了请求的媒体类型和相对应的参数。

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

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

{ audio: true, video: true }

如果为某种媒体类型设置了 true ，得到的结果的流中就需要有此种类型的轨道。如果其中一个由于某种原因无法获得，getUserMedia() 将会产生一个错误。

还可以对每一条媒体轨进行限制

{
    video:{
        frameRate: {min: 20},
        width: {min: 640, ideal: 1280},
        height: {min: 360, ideal: 720},
        aspectRatio: 16/9
    },
    audio:{
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
    }
}

视频的帧率最小20帧每秒；宽度最小640，理想宽度是1280；同样的，高度最小是360，理想高度是720；此外宽高比是16:9；对于音频则是开启回音消除、降噪以及自动增益功能。

返回前后置摄像头

要告诉浏览器在设备上使用前置或后置(移动)相机，可以在video对象中指定facingMode属性：

{
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440
    },
    facingMode: 'user'
  }
}

此设置将始终在所有设备中使用前置摄像头。 要在移动设备上使用后置摄像头，可以将facingMode属性更改为environment。

{
  video: {
    ...
    facingMode: {
      exact: 'environment'
    }
  }
}

enumerateDevices

调用enumerateDevices方法时，它将返回用户PC上可用的所有可用输入媒体设备。

async function getDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
}

[
    {
        "deviceId": "",
        "kind": "audioinput",
        "label": "",
        "groupId": ""
    },
    {
        "deviceId": "d15b341c9c9c8ed243563ae5b4c9d000e5cd9fd1f49869bac710382a1cb104cc",
        "kind": "videoinput",
        "label": "HP Wide Vision HD (1bcf:2c87)",
        "groupId": "82c770e7689be826abd817b9a6e19d83ec561ae3057939caaae6d6168db57045"
    },
    {
        "deviceId": "",
        "kind": "audiooutput",
        "label": "",
        "groupId": ""
    }
]