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

今天我來看一下音視頻採集的API,這個和我們上次所說的enumerateDevices是很類似的

// 基本格式
var promise = navigator.mediaDevices.getUserMedia(constraints);

它也是返回一個Promise，調用的方式也很類似，這個方法裏面有個重要的參數；這個constraints是怎麼定義的，我們下面看一下

MediaStreamConstraints

dictionary MediaStreamConstraints {
        (boolean or MediaTrackConstraints) video  = false;
        (boolean or MediaTrackConstraints) audio  = false;
}

它就是一個MediaStreamConstraints類型，這個類型比較特別，在這個類型裏面有兩個元素，一個是video一個是audio,也就是說分別對video和audio做一些限制，也就是說它既可以是布爾類型也可以是MediaTrackConstraints複雜媒體類型，

如果他是布爾型的話，video和audio都是true的話，說明既有視頻數據又有音頻數據，如果我只要其中的一項，只要音頻，那就是audio等於true,video等於false，非常的簡單。

另一方面你把他當作MediaStreamConstraints這種複雜類型的話，也就是說你可以設置一些具體的控制了，比如說對於視頻你可以設置它的分辨率，比如給他設置成640*480，然後是 720P或者1080P等這些都可以設置。你還可以設置它的幀率，比如15幀或者25幀、30幀。同樣的對於音頻來說，你也可以設置音頻相關的，比如音頻的延遲性是多少，音量的大小，是單聲道還是雙聲道等等都可以進行控制，具體的設置我們後續會詳細的介紹。

今天我們來看看如何通過這個API採集到音頻和視頻數據。

創建一個mediastream文件夾，獲取第一個流，這個流和軌的概念在之前已經介紹過了，在一個流中是可以包含許多條軌的，每一條軌也就是一種媒體數據，比如音頻、視頻，可以是多路音頻多路視頻組成一個stream, 首先我們建立一個index.html

<html>
  <head>
    <title>捕獲音視頻數據 WebRTC capture video and audio</title>
  </head>
  <body>
    <!-- 
      我們創建一個video標籤，這個標籤就可以顯示我們捕獲的音視頻數據 
      autoplay 表示當我們拿到視頻源的時候直接播放
      playsinlin  表示在瀏覽器頁面中播放而不是調用第三方工具
     -->
    <video autoplay playsinlin id="player"></video>
    <script src="./js/client.js"></script>
  </body>
</html>

我們引入client.js來調用API，通過這個API來通過webrtc核心層去捕獲音視頻數據，最終輸送給video播放處理，這樣就實現了我們的一個實例。

client.js

'use strict'

// 獲取video標籤
var videoplay = document.querySelector('video#player');

// 獲取到流做什麼， 在gotMediaStream方面裏面我們要傳人一個參數，也就是流，
// 這個流裏面實際上包含了音頻軌和視頻軌，因爲我們通過constraints設置了要採集視頻和音頻
// 我們直接吧這個流賦值給HTML中賦值的video標籤
function gotMediaStream(stream){  
	videoplay.srcObject = stream; // 指定數據源來自stream,這樣視頻標籤採集到這個數據之後就可以將視頻和音頻播放出來
}

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

// 判斷瀏覽器是否支持
if(!navigator.mediaDevices ||
  !navigator.mediaDevices.getUserMedia){
  console.log('getUserMedia is not supported!');
}else{
  var constraints = { // 表示同時採集視頻金和音頻
    video : true,
    audio : false 
  }
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMediaStream)
    .catch(handleError);
}

server.js

'use strict'

var http = require('http');
var https = require('https');
var fs = require('fs');

var serveIndex = require('serve-index');

var express = require('express');
var app = express();

//順序不能換
app.use(serveIndex('./public'));
app.use(express.static('./public'));

var options = {
	key  : fs.readFileSync('./cert/1557605_www.learningrtc.cn.key'),
	cert : fs.readFileSync('./cert/1557605_www.learningrtc.cn.pem') 
}

var https_server = https.createServer(options, app);
https_server.listen(443, '0.0.0.0');

var http_server = http.createServer(app);
http_server.listen(80, '0.0.0.0');

1557605_www.learningrtc.cn.key

1557605_www.learningrtc.cn.pem

運行 node server.js

打開https://0.0.0.0/mediastream/index.html

總結：

今天我們知道了通過var promise = navigator.mediaDevices.getUserMedia(constraints);可以獲取到音頻和視頻的數據，其中var constraints可以對音頻和視頻進行各種限制。

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

探究職業發展的關鍵：能力模型解讀

如何在低代碼平臺中引用 JavaScript ？

高效率使用windows

智能決策新時代：可視化大屏是否能夠超越傳統白板？

解密Prompt系列28. LLM Agent之金融領域摸索：FinMem & FinAgent

分享幾個.NET開源的AI和LLM相關項目框架

WebRTC音視頻數據採集六、第七節從視頻中獲取圖片

WebRTC音視頻數據採集六、第六節視頻渲染特效

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

WebRTC音視頻數據採集六、第九節 MediaStreamAPI及獲取視頻約束

三、第二節 Nodejs環境搭建

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

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

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