导语:最近研究了一下网页录制音视频的原理以及实现,现在就目前的实现方法做一个总结。
目录
- 相关API
- 方法介绍
- 实战演练
相关API
要实现这个功能就涉及到两个js api。
方法介绍
getUserMedia
通过getUserMedia
这个接口来获取设备的摄像头和麦克风,返回一个Promise
对象。
语法var stream = navigator.mediaDevices.getUserMedia(constraints);
constraints
包括一下几种写法:
- 请求音视频
const constraints = {
audio: true,
video: true
}
- 请求特定的设备视频分辨率
const constraints = {
audio: true,
video: {
width: {
min: 1280
},
height: {
min: 720
}
}
}
- 使用前摄像头(默认)
const constraints = {
audio: true,
video: {
facingMode: "user"
}
}
- 强制使用后置摄像头
const constraints = {
audio: true,
video: {
facingMode: {
exact: "environment"
}
}
}
例如:
const constraints = {
audio: true,
video: {
width: 1280,
height: 720
}
};
async function createMedia() {
try {
let stream = await navigator.mediaDevices.getUserMedia(constraints);
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function (e) {
video.play();
};
} catch (error) {
console.log(`getUserMedia: