关于音视频:音视频摄像头

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": ""
    }
]