zoukankan      html  css  js  c++  java
  • WebRTC中音频设备的约束有哪些以及使用的方法

    音频约束参数

    • volume 音量约束
    • sampleRate: 采样率
    • sampleSize: 采样大小,采样的位数
    • echoCancellation: 回音消除
    • autoGaincontrol: 增加音量
    • noiseSuppression: 降噪
    • latency : 延迟大小
    • channelCount: 切换声道
    • deviceID: 多个音频输入输出设备的进行切换
    • groupId: 同一个物理设备,是一个分组,但是输入和输出的id不一样

    音频约束的案例

    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;
    
  • 相关阅读:
    spring注解之@Lazy
    HttpClient之EntityUtils对象
    HTTP协议(Requset、Response)
    SpringBoot SpringSession redis SESSION
    Spring-session redis 子域名 session
    Spring Boot Servlet
    版本管理
    Spring AOP @Aspect
    Spring 事务配置的五种方式
    Spring <tx:annotation-driven>注解 JDK动态代理和CGLIB动态代理 区别。
  • 原文地址:https://www.cnblogs.com/fandx/p/12142387.html
Copyright © 2011-2022 走看看