MediaDevices.getUserMedia()

MediaDevices.getUserMedia() 會提示用戶給予使用媒體輸入的許可，媒體輸入會產生一個MediaStream，里面包含了請求的媒體類型的軌道。此流可以包含一個視頻軌道（來自硬件或者虛擬視頻源，比如相機、視頻采集設備和屏幕共享服務等等）、一個音頻軌道（同樣來自硬件或虛擬音頻源，比如麥克風、A/D轉換器等等），也可能是其它軌道類型。

返回一個 Proｍise 對象，成功后會resolve回調一個 MediaStream 對象。

若用戶拒絕了使用權限，或者需要的媒體源不可用，promise會reject回調一個個  PermissionDeniedError 或者 NotFoundError 。

通常你可以使用 navigator.mediaDevices 來獲取 MediaDevices ，例如:

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  /* 使用這個MediaStream對象 */
})
.catch(function(err) {
  /* 處理error */
});

語法

var promise = navigator.mediaDevices.getUserMedia(constraints);

參數

　　constraints作為一個 MediaStreamConstraints 對象，指定了請求的媒體類型和相對應的參數。

         constraints 參數是一個包含了 video 和  audio兩個成員 的 MediaStreamConstraints 對象，用於說明請求的媒體類型。

　　注意：必須至少一個類型或者兩個同時可以被指定。

　　如果瀏覽器無法找到指定的媒體類型或者無法滿足相對應的參數要求，那么返回的Promise對象就會處於rejected［失敗］狀態， NotFoundError作為rejected［失敗］回調的參數。 

         例如：同時請求不帶任何參數的音頻和視頻：

const constraints = { audio: false, video: true };

　　如果為某種媒體類型設置了 true ，得到的結果的流中就需要有此種類型的軌道。如果其中一個由於某種原因無法獲得，getUserMedia() 將會產生一個錯誤。

　　當由於隱私保護的原因，無法訪問用戶的攝像頭和麥克風信息時，應用可以使用額外的constraints參數請求它所需要或者想要的攝像頭和麥克風能力。下面演示了應用想要使用1280x720的攝像頭分辨率： 

const constraints = { audio: false, video: { width: 1280, height: 720 }};

　　瀏覽器會試着滿足這個請求參數，但是如果無法准確滿足此請求中參數要求或者用戶選擇覆蓋了請求中的參數時，有可能返回其它的分辨率。

　　強制要求獲取特定的尺寸時，可以使用關鍵字min, max, 或者 exact(就是 min == max). 以下參數表示要求獲取最低為1280x720的分辨率。

const constraints = { audio: false, video: { width: { min: 1280 }, height: { min: 720 }};

　如果攝像頭不支持請求的或者更高的分辨率，返回的Promise會處於rejected狀態，NotFoundError作為rejected回調的參數，而且用戶將不會得到要求授權的提示。

　　當請求包含一個ideal（應用最理想的）值時，這個值有着更高的權重，意味着瀏覽器會先嘗試找到最接近指定的理想值的設定或者攝像頭（如果設備擁有不止一個攝像頭）。

　　

const constraints = { audio: false, video: {　　width: { min: 1024, ideal: 1280, max: 1920 }, 　　　　　　　　　　　 　　　　　　height: { min: 776, ideal: 720, max: 1080 } 　　　　　　　　　　　 };

 

簡單的請求值也可以理解為是應用理想的值，因此我們的第一個指定分辨率的請求也可以寫成如下：

const constraints = { audio: true, video: { width: { ideal: 1280 }, height: { ideal: 720 } } }

注意:不是所有的constraints 都是數字。

 

 例如, 在移動設備上面，如下的例子表示優先使用前置攝像頭（如果有的話）：

const constraints =  { audio: true, video: { facingMode: "user" } }

強制使用后置攝像頭：

const constraints =  { audio: true, video: { facingMode: { exact: "environment" } } };

返回值

返回一個 Promise ， 這個Promise成功后的回調函數帶一個 MediaStream 對象作為其參數。

示例

寬度和高度

這個例子設置了攝像頭分辨率，並把結果的 MediaStream 分配給了一個video元素。 

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
 
     const video = document.querySelector('video');
     video.srcObject = mediaStream;
     video.onloadedmetadata = function(e) {
     video.play();
                              };
 }).catch(function(err) { console.log(err.name + ": " + err.message); }); // 總是在最后檢查錯誤

補充:onloadedmetadata 事件

onloadedmetadata 事件在指定視頻/音頻（audio/video）的元數據加載后觸發。

視頻/音頻（audio/video）的元數據包含: 時長，尺寸大小（視頻），文本軌道。

視頻/音頻（audio/video）在加載過程中，事件觸發的順序如下：

1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough

 

參考:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia