Constraint WebRTC audio devices and methods of use which

Audio constraint parameter

volume volume constraints
sampleRate: sampling rate
Median sample size, sample: sampleSize
echoCancellation: Echo Cancellation
autoGaincontrol: increase volume
noiseSuppression: Noise Reduction
latency: Delayed size
channelCount: switching channel
deviceID: a plurality of audio input and output switching device
groupId: the same physical device, a packet, but the input and output id not the same

Case Audio constraints

vim index.html

<html>
  <head>
    <title>WebRTC 获取视频和音频</title>
  </head>
  <body>
    <div>
    <label>audio Source:</label>  
        <select id="audioSource"> </select>
    </div>
   <div>
    <label>audio Output:</label>  
        <select id="audioOutput"> </select>
    </div>
   <div>
    <label>video Source:</label>  
        <select id="videoSource"> </select>
    </div>
        
      
    <video autoplay playsinline id="player"></video>
    <script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="./js/client.js"></script>
  </body>
</html>

vim client.js

"use strict"

// 获取设备
var audioSource = document.querySelector("select#audioSource");
var audioOutput = document.querySelector("select#audioOutput");
var videoSource = document.querySelector("select#videoSource");

// 查找视频播放的标签
var videoplay = document.querySelector("video#player");

function start(){
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
  console.log("获取音视频方法不存在");
}else{
  
  //---------------- 主要进行约束的地方- -----------------
  var constraints = {
    video : {
      // 宽度在300 - 640之间进行自适应
      width : {
        min: 300,
        max: 640,
      },
      height: 480,
      frameRate： 15,
      facingMode: enviroment, // 设置为前置摄像头
       deviceId : deviceId ? deviceId : undefined
      
    },
    audio : {
        // 设置回音消除
      noiseSuppression: true,
      // 设置降噪
      echoCancellation: true,
    
    },
   
  };
  
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMediaStream).then(gotDevices)
    .catch(handleError);
}

function gotMediaStream(stream){
  // 复制流到video标签
  videoplay.srcObject = stream;
  // 获取流成功之后还可以继续操作
  return navigator.mediaDevices.enumerateDevices();
  
  
}
function handleError(err){
  console.log("错误啦：", err)
}


function gotDevices(deviceInfos){
  deviceInfos.forEach(function(deviceinfo){
    var option = document.createElement("option");
    option.text = deviceinfo.label;
    option.value = deviceinfo.deviceId;
    
    
    // 音频输入
    if(deviceinfo.kind === "audioinput"){
      audioSource.appendChild(option);
      
    // 音频输出
    }else if(deviceinfo.kind === "audiooutput"){
       audioOutput.appendChild(option);
      
    // 视频输入
    }else if(deviceinfo.kind === "videoinput"){
       videoSource.appendChild(option);
    }
  })
}
 
  
}
start();
videoSource.onchange = start;

Constraint WebRTC audio devices and methods of use which

Audio constraint parameter

Case Audio constraints

Guess you like