WebRTC音視頻數據採集 六、第四節 視頻參數調-視頻約束

我們今天介紹一下WebRTC 音視頻採約束,通過這些 約束我們可以精確的控制音頻和視頻的採集數據,首先我們看看視頻相關的約束。

width

height

這個兩個很好理解,首先視頻有分辨率,視頻的寬高是多少,寬高一般我們視頻上有兩種比例 ,一種是4:3,另一種是16:9,像320*240的,640*480,這都屬於4:3的比例,就是它更方一些,還有一種是16:9,比如是720P的,就是1280*720,這就是16:9的比例,它顯得更長一些,但是對於我們的手機來說,它就翻過來了,如果我們豎屏拍攝那它高度就是16,比如1280*720,那麼寬度就變成了720,這是寬和高,那麼通過這個約束我們就可以控制這個分辨率,你想設置多少,就可以根據自己的情況去調節。

aspectRatio

第三個是比例,我們剛纔所說的,在這裏就是一個小數點 ,一般情況下我們只需要設置寬和高就可以了,這個aspectRatio通過寬高進行一個除,寬除以高,1.333,這個4:3的比例,這裏這裏我們一般不會設置這個值。

frameRate

第四個是對視頻比較關鍵的幀率,我們可以通過幀率的多少來控制我們的碼流,當然幀率低的話,你會看這個畫面不太平滑,幀率高的話畫面就很平滑,我們看電影也能看出這個效果,如果每秒鐘只有十幾幀的話,眼睛比較敏感的人它會看到一卡一卡的現象,但是對於 比如30幀或60幀的,就特別平滑,現在的高清電影 一般都是60幀。從另外一方面講如果你幀率過高了,那你碼流就會過大,相當於你1秒鐘採集的數據多了。

facingMode

第五個比較好理解,對於我們的手機來說特別有用,他是來控制我們的攝像頭翻轉的。正常情況下我們 用的是前置攝像頭對着自己拍,那你也可以設置成後置攝像頭,就是往外拍;還可以打開 前置 的左邊的攝像頭和前置的右邊攝像頭,如果你是雙 攝像頭的話,這都可以做到。這PC上一般是沒有前後攝像頭的,所以這個設置就會不起作用,它會忽略。而對於手機來說就可以看出它的區別來。

user: 前置攝像頭

environment:後置攝像頭 

left:前置左側攝像頭

right:前置右側攝像頭 

resizeMode

表示採集的畫面要不要裁剪,它可以設置爲null,就是原封不動的,就是採集什麼樣他就是什麼樣。還有一種就是利用裁剪,把他 裁掉 一塊去,這個用的不是太多,具體根據業務需求來看了。

下面我們來實踐一下,設置constraints參數,看看修改這些參數有什麼變化

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

// 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){  
  videoplay.srcObject = stream; // 指定數據源來自stream,這樣視頻標籤採集到這個數據之後就可以將視頻和音頻播放出來
  // 當我們採集到音視頻的數據之後,我們返回一個Promise
  return navigator.mediaDevices.enumerateDevices();
}

function handleError(err){
	console.log('getUserMedia error:', err);
}

// 判斷瀏覽器是否支持
if(!navigator.mediaDevices ||
  !navigator.mediaDevices.getUserMedia){
  console.log('getUserMedia is not supported!');
}else{
  // 這裏是約束參數,正常情況下我們只需要是否使用視頻是否使用音頻
  // 對於視頻就可以按我們剛纔所說的做一些限制
  var constraints = { // 表示同時採集視頻金和音頻
    video : {
      width: 640,	// 寬帶
      height: 480,  // 高度
      frameRate:15, // 幀率
      facingMode: 'enviroment', //  設置爲後置攝像頭
      deviceId : deviceId ? {exact:deviceId} : undefined // 
    }, 
    audio : false 
  }
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMediaStream)  // 使用Promise串聯的方式,獲取流成功了
    .then(gotDevices)
    .catch(handleError);
}

 

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