Web RTC 协议的基本内容

Web RTC 协议

WebRTC 是一个可以用在视频聊天，音频聊天或 P2P 文件分享等 Web App 中的 API。

Web RTC的组成部分

1. getUserMedia

• getUserMedia API：允许网页访问本地摄像头和麦克风设备。

2. RTCPeerConnection

• RTCPeerConnection API：允许实时通信的建立和管理，包括点对点的音视频传输、数据传输、网络状况反馈等。

3. RTCDataChannel

• RTCDataChannel API：允许点对点的数据传输，实现了浏览器之间的即时通信。

getUserMedia

getUserMedia是一个Web API，允许Web应用程序访问用户的媒体设备（例如摄像机、麦克风等），并获取实时的音频和视频流。通过该API，开发者可以创建各种有趣的应用程序，例如视频聊天、视频录制、实时视频流等等。

使用getUserMedia API需要遵循以下几个基本步骤：

1. 请求用户媒体设备的访问权限
2. 获取媒体设备的流
3. 将流嵌入到HTML5视频或音频元素中
4. 开始录制或播放媒体流

getUserMedia API有三种不同的用法：

1. 只获取视频流：只需传递一个包含video:true的对象给getUserMedia()函数，就可以获取视频流。例如：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 将流嵌入到video元素中
    video.srcObject = stream;
  })
  .catch(function(err) {
    console.log(err.message);
  });

2. 只获取音频流：只需传递一个包含audio:true的对象给getUserMedia()函数，就可以获取音频流。例如：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    // 将流嵌入到audio元素中
    audio.srcObject = stream;
  })
  .catch(function(err) {
    console.log(err.message);
  });

3. 获取视频和音频流：传递一个包含video:true和audio:true的对象给getUserMedia()函数，就可以获取视频和音频流。例如：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // 将流嵌入到video和audio元素中
    video.srcObject = stream;
    audio.srcObject = stream;
  })
  .catch(function(err) {
    console.log(err.message);
  });

需要注意的是，getUserMedia API在某些浏览器中可能不被支持或存在兼容性问题。因此，在使用该API时，最好使用现代浏览器，并在代码中对浏览器兼容性进行测试和处理。部分浏览器中可能需要HTTPS协议的支持才能正常工作，同时需要用户授权才能访问媒体设备。

此外navigator.mediaDevices还有一个navigator.mediaDevices() 方法
getDisplayMedia 是一个 WebRTC API，用于从用户的屏幕（桌面、窗口或标签页）捕获视屏和音频流以便进行共享或录制。通过该 API，开发者可以访问用户屏幕上显示的内容，并将其流式传输到远程设备或存储在本地。通常用于视频会议、在线教育、远程协作等需要屏幕共享的场景。该 API 主要在现代浏览器中支持，包括 Chrome、Firefox 和 Edge 等。

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    const videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    document.body.appendChild(videoElement);
    videoElement.play();
  })
  .catch(error => {
    console.error(error);
  });
 //该代码可以录取屏幕内容并且可以获取流对象