当前位置: 首页 - 编程技术 - 文章正文

获取摄像头和麦克风权限_前端:获取摄像头&麦克风

xiaoqihv

navigator

.mediaDevices

.getUserMedia(constraints)

.then(function(mediaStream) {

var video = document.querySelector('video');

video.srcObject = mediaStream

video.onloadedmetadata = function(e) {

video.play();

};

})

.catch(function(error) {

console.log(error);

});

收集系统上可用的多媒体输入和输出设备信息

enumerateDevices用于收集系统上可用的多媒体输入和输出设备的信息。该方法返回一个Promise对象,如果枚举成功,成功的then 回调函数带有一个MediaDeviceInfo的参数。

navigator

.mediaDevices

.enumerateDevices()

.then(function(MediaDeviceInfo) {

console.log(MediaDeviceInfo);

})

// 输出MediaDeviceInfo为:

[

{

"deviceId": "default",

"kind": "audioinput",

"label": "Default",

"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"

},

{

"deviceId": "e38a9b92758f008e71510a95aa36957553e2a5ce7febc6e4bcd57798807c1519",

"kind": "audioinput",

"label": "Built-in Microphone",

"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"

},

{

"deviceId": "5013c01eb0a704c09d15aa668601f8dfb80f1a33d179b2adcbb64a8fbad5fc62",

"kind": "videoinput",

"label": "FaceTime HD Camera",

"groupId": ""

},

{

"deviceId": "default",

"kind": "audiooutput",

"label": "Default",

"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"

},

{

"deviceId": "ba0bb7502f314e3ad61511aa6468c6a48ec679e34e5ebd975852db1d8d3ab3e7",

"kind": "audiooutput",

"label": "Built-in Output",

"groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"

}

]

获取用户支持的Constraints

通过 MediaDevices.getSupportedConstraints() 方法可以返回一个基于 MediaTrackSupportedConstraints 的对象,它包含哪些Constraints属性是浏览器支持的, 例如帧率、窗口大小等。

var supportedConstraints =navigator.mediaDevices.getSupportedConstraints()//输出supportedConstraints

{"aspectRatio": true, //采集比例

"channelCount": true,"deviceId": true,"echoCancellation": true,"facingMode": true,"frameRate": true,"groupId": true,"height": true,"latency": true, //延迟

"sampleRate": true,"sampleSize": true,"volume": true,"width": true}

文章地址:https://wenmayi.cn/post/532.html