MediaStream 的媒体流对象 (stream) 和流媒体轨道 (track) 详解

navigator.mediaDevices.getUserMedia 和 MediaStream 是实时音视频处理处罚的紧张 API。通过这些 API，可以从摄像头、麦克风或其他装备捕捉音视频流，应用于视频通话、录制等场景。本文将先容 navigator.mediaDevices.getUserMedia 的参数设置、MediaStream 的传参、属性和方法，共同详细的代码示例，特别是怎样动态添加和移除音视频轨道，以及轨道的处理处罚。
目次

  

• navigator.mediaDevices.getUserMedia
  
     
  
  • 传参设置
    
          
    
    • 布尔值与对象设置     
      
         
    
  • 错误处理处罚   
    
  • 兼容性   
    
     
  
• MediaStream
  
     
  
  • 属性   
    
  • 方法   
    
  • 事故   
    
  • 怎样动态添加和移除音视频轨道   
    
     
  
• 实例代码  
  
• 流媒体轨道 (MediaStreamTrack)
  
     
  
  • 属性   
    
  • 方法   
    
  • 事故   
    
  • 实例代码   
    
    
  

navigator.mediaDevices.getUserMedia

传参设置

getUserMedia() 方法继承一个参数对象，用于界说所需的媒体范例和详细束缚。它的语法如下：

1. navigator.mediaDevices.getUserMedia(constraints)
2.   .then(function(stream) {
3.    
4.    
5.     // 处理成功的媒体流
6.   })
7.   .catch(function(error) {
8.    
9.    
10.     // 处理错误
11.   });

复制代码

布尔值与对象设置

constraints 参数用于界说音频和视频的需求，既可以是布尔值，也可以是一个详细的对象。
1. 布尔值设置

  

• audio: true：哀求音频轨道。  
  
• video: true：哀求视频轨道。
  

这种简朴设置仅表现是否哀求音频或视频轨道，而不指定任何详细属性。

1. const constraints = {
2.    
3.    
4.   audio: true,
5.   video: true
6. };

复制代码

2. 对象设置

假如必要更加风雅地控制音视频流的特性，可以将 audio 和 video 设置为对象，指定详细的参数。
音频参数

音频设置对象可包罗以下参数：

  

• echoCancellation：是否启用回声消除（布尔值）。  
  
• noiseSuppression：是否启用噪声克制（布尔值）。  
  
• autoGainControl：是否启用自动增益控制（布尔值）。
  

示例：

1. const audioConstraints = {
2.    
3.    
4.   audio: {
5.    
6.    
7.     echoCancellation: true, // 启用回声消除
8.     noiseSuppression: true, // 启用噪声抑制
9.     autoGainControl: false  // 关闭自动增益控制
10.   }
11. };

复制代码

视频参数

视频设置对象可以包罗以下参数：

  

• width：界说视频宽度，可以是详细值或理想值（ideal、min、max）。  
  
• height：界说视频高度，同样可以是详细值或理想值。  
  
• frameRate：帧率控制。  
  
• facingMode：界说利用前置或后置摄像头（“user” 为前置，“environment” 为后置）。
  

示例：

1. const videoConstraints = {
2.    
3.    
4.   video: {
5.    
6.    
7.     width: {
8.    
9.     ideal: 1280 },  // 理想宽度
10.     height: {
11.    
12.     ideal: 720 },  // 理想高度
13.     frameRate: {
14.    
15.     max: 30 },  // 最大帧率 30fps
16.     facingMode: "user"       // 前置摄像头
17.   }
18. };

复制代码

综合示例

1. const constraints = {
2.    
3.    
4.   audio: {
5.    
6.    
7.     echoCancellation: true,
8.     noiseSuppression: true
9.   },
10.   video: {
11.    
12.    
13.     width: {
14.    
15.     min: 640, ideal: 1280, max: 1920 },
16.     height: {
17.    
18.     min: 480, ideal: 720, max: 1080 },
19.     frameRate: {
20.    
21.     ideal: 30, max: 60 },
22.     facingMode: "user"
23.   }
24. };

复制代码

错误处理处罚

getUserMedia() 调用失败时会返回一个 Promise，并触发错误。常见错误范例包罗：

  

• NotAllowedError：用户拒绝授予摄像头/麦克风访问权限。  
  
• NotFoundError：找不到满意哀求的装备。  
  
• OverconstrainedError：指定的束缚条件无法满意。  
  
• NotReadableError：装备硬件故障，无法读取数据。
  

处理处罚示例：

1. navigator.mediaDevices.getUserMedia(constraints)
2.   .then(function(stream) {
3.    
4.    
5.     // 成功处理
6.   })
7.   .catch(function(error) {
8.    
9.    
10.     console.error("错误: ", error.name);
11.   });

复制代码

兼容性