WebRTC音视频数据采集 六、第八节 WebRTC只采集音频数据

今天我们介绍一下如果通过WebRTC只采取音频数据，

这个功能之前已经给大家做了一些介绍，但是上次的介绍是在videoplay，也就是video标签里面做的实验。

这次我们实验audio标签，这有什么好处呢？就是直播系统里面有很多的应用，并不希望有视频，只希望有音频就可以了，比如说喜马拉雅，它所有的内容都是通过音频的形式展现出来的。

所有我们通过只 获取音频是什么样子的 。

将constraints里面的audio设置为true

gotMediaStream方法里面改成获取音频流

index.html

  
    
		
  
  
		

			audio Source:
			
		

		

			audio Output:
			
		

		

			video Source:
			
    
    
    

			Filter:
			
				None
				blur
				Grayscale
				Invert
				sepia
			
		
    
     
     
    
    

    
		

			Take snapshot
    
    
		

			
		
    
    
    
  

client.js

'use strict'

var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');
// 获取video标签
// var videoplay = document.querySelector('video#player');
// 获取音频标签
var audioplay = document.querySelector('audio#audioplayer');

//filter 特效选择
var filtersSelect = document.querySelector('select#filter');

//picture 获取视频帧图片相关的元素
var snapshot = document.querySelector('button#snapshot');
var picture = document.querySelector('canvas#picture');
picture.width = 640;
picture.height = 480;

// deviceInfos是设备信息的数组
function gotDevices(deviceInfos){
  // 遍历设备信息数组， 函数里面也有个参数是每一项的deviceinfo， 这样我们就拿到每个设备的信息了
	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);
		}
	})
}

// 获取到流做什么， 在gotMediaStream方面里面我们要传人一个参数，也就是流，
// 这个流里面实际上包含了音频轨和视频轨，因为我们通过constraints设置了要采集视频和音频
// 我们直接吧这个流赋值给HTML中赋值的video标签
// 当时拿到这个流了，说明用户已经同意去访问音视频设备了
function gotMediaStream(stream){  
  	audioplay.srcObject = stream;
  // videoplay.srcObject = stream; // 指定数据源来自stream,这样视频标签采集到这个数据之后就可以将视频和音频播放出来
  // 当我们采集到音视频的数据之后，我们返回一个Promise
  return navigator.mediaDevices.enumerateDevices();
}

function handleError(err){
	console.log('getUserMedia error:', err);
}
function start() {
// 判断浏览器是否支持
if(!navigator.mediaDevices ||
  !navigator.mediaDevices.getUserMedia){
  console.log('getUserMedia is not supported!');
}else{
  // 获取到deviceId
  var deviceId = videoSource.value; 
  // 这里是约束参数，正常情况下我们只需要是否使用视频是否使用音频
  // 对于视频就可以按我们刚才所说的做一些限制
  var constraints = { // 表示同时采集视频金和音频
    // video : {
    //   width: 640,	// 宽带
    //   height: 480,  // 高度
    //   frameRate:15, // 帧率
    //   facingMode: 'enviroment', //  设置为后置摄像头
    //   deviceId : deviceId ? deviceId : undefined // 如果deviceId不为空直接设置值，如果为空就是undefined
    // }, 
    video : false,  
    audio : true // 将声音获取设为true
  }
  //  从指定的设备中去采集数据
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMediaStream)  // 使用Promise串联的方式，获取流成功了
    .then(gotDevices)
    .catch(handleError);
}
}

start();

// 当我选择摄像头的时候，他可以触发一个事件，
// 当我调用start之后我要改变constraints
videoSource.onchange = start;

// 选择特效的方法
filtersSelect.onchange = function(){
	videoplay.className = filtersSelect.value;
}

// 点击按钮获取视频帧图片
snapshot.onclick = function() {
  picture.className = filtersSelect.value;
  // 调用canvas API获取上下文，图片是二维的，所以2d,这样我们就拿到它的上下文了
  // 调用drawImage绘制图片,第一个参数就是视频，我们这里是videoplay,
  // 第二和第三个参数是起始点 0,0
  // 第四个和第五个参数表示图片的高度和宽度
	picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}