WebRTC音視頻數據採集 六、第八節 WebRTC只採集音頻數據

今天我們介紹一下如果通過WebRTC只採取音頻數據,

這個功能之前已經給大家做了一些介紹,但是上次的介紹是在videoplay,也就是video標籤裏面做的實驗。

這次我們實驗audio標籤,這有什麼好處呢?就是直播系統裏面有很多的應用,並不希望有視頻,只希望有音頻就可以了,比如說喜馬拉雅,它所有的內容都是通過音頻的形式展現出來的。

所有我們通過只 獲取音頻是什麼樣子的 。

將constraints裏面的audio設置爲true

gotMediaStream方法裏面改成獲取音頻流

index.html

<html>
  <head>
    <title>捕獲音視頻數據 WebRTC capture video and audio</title>
		<style>
			.none {
				-webkit-filter: none;	
			}

			.blur {
        /* 特效模糊 */
				-webkit-filter: blur(3px);	
			}

			.grayscale {
        /* 特效灰度 */
				-webkit-filter: grayscale(1); 	
			}

			.invert {
        /* 翻轉 */
				-webkit-filter: invert(1);	
			}

			.sepia {
        /* 特效褐色 */
				-webkit-filter: sepia(1);
			}

		</style>
  </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>
    <!-- 特效選擇器 -->
    <div>
			<label>Filter:</label>
			<select id="filter">
				<option value="none">None</option>
				<option value="blur">blur</option>
				<option value="grayscale">Grayscale</option>
				<option value="invert">Invert</option>
				<option value="sepia">sepia</option>
			</select>
		</div>
    <!-- 
      我們創建一個video標籤,這個標籤就可以顯示我們捕獲的音視頻數據 
      autoplay 表示當我們拿到視頻源的時候直接播放
      playsinlin  表示在瀏覽器頁面中播放而不是調用第三方工具
     -->
     <!-- 通過audio標籤只獲取音頻 -->
     <!-- 
       controls  表示將暫停和播放按鈕顯示出來,否則它雖然播放聲音,但是不會顯示播放器窗口
       autoplay  默認自動播放
      -->
    <audio autoplay controls id='audioplayer'></audio>
    <!-- <video autoplay playsinlin id="player"></video> -->

    <!-- 獲取視頻幀圖片按鈕 -->
		<div>
			<button id="snapshot">Take snapshot</button>
    </div>
    <!-- 獲取視頻幀圖片顯示在canvas裏面 -->
		<div>
			<canvas id="picture"></canvas>
		</div>
    <!-- 引入 adapter.js庫 來做 不同瀏覽器的兼容 -->
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="./js/client.js"></script>
  </body>
</html>

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);
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章