<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebRTC测试页面</title>
</head>
<body>
<h1>WebRTC测试页面</h1>
<video autoplay playsinline></video>
<script>
// constraints 配置指定是否使用音频、视频
// const mediaStreamContrains = {
// video: true,
// audio: true
// };
const localVideo = document.querySelector('video');
const mediaStreamContrains = {
video: {
frameRate: {min: 20}, // 帧率
facingMode: "user", // user;前置摄像头,enviroment:后置摄像头,还有 left,right
// width: {min: 640, ideal: 1280}, // 视频宽度
// height: {min: 360, ideal: 720}, // 视频高度
// aspectRatio: 16/9, // 视频宽/高
// resizeMode: true, // 是否允许调整图像大小
},
audio: {
echoCancellation: true, // 是否开启回音消除
noiseSuppression: true, // 是否开启降噪
autoGainControl: true, // 是否开启自动增益
/* 其它参数
volume: 音量大小
sampleRate:音频采样率
sampleSize:音频采样大小
latency:延迟大小
channelCount:声道数
*/
}
// deviceId, groupId
};
function gotLocalMediaStream(mediaStream){
localVideo.srcObject = mediaStream;
}
function handleLocalMediaStreamError(error){
console.log('navigator.getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(
gotLocalMediaStream
).catch(
handleLocalMediaStreamError
);
</script>
</body>
</html>