概述
WebRTC是一种用于音频、视频和数据传输的实时通信技术，它使得在浏览器中进行点对点的实时通信变得容易。getUserMedia是WebRTC API之一，它允许网页应用程序从用户设备上获取音频和视频流。
本文将介绍如何使用WebRTC将从getUserMedia获取的MediaStream传送到远程服务器。我们将涵盖以下主题：
- 创建一个简单的WebRTC应用程序
- 使用getUserMedia来捕获MediaStream
- 将MediaStream发送给远程服务器
创建WebRTC应用程序
首先，我们需要创建一个WebRTC应用程序，并在HTML页面中添加必要的元素以显示视频和音频流。这里我们使用 RTCPeerConnection 对象来建立连接并进行媒体流的交换。以下是一个简单的WebRTC应用程序示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------- ---------------
-------
------
------ --------------- -------- --------------
------ ---------------- -----------------
--------
----- ---------- - --------------------------------------
----- ----------- - ---------------------------------------
----- -- - --- --------------------
---------- - ------- -- -
--------------------- - -----------------
-
----- -------- ------- -
--- -
----- ------ - ----- ------------------------------------------- ----- ------ -------
-------------------- - -------
-------------------------------- -- ------------------ ---------
- ----- ------- -
--------------------------- -------- -------
-
-
--------
---------
-------
-------这个应用程序有两部分视频，一个是 localVideo 显示本地捕获的音频和视频流，另外一个是 remoteVideo 显示远程传输过来的流。它还包括用于建立连接和捕获媒体流的JavaScript代码。
现在，我们已经有了一个能够捕获并显示音频和视频流的简单WebRTC应用程序。
使用getUserMedia捕获MediaStream
接下来，我们需要使用getUserMedia API来捕获MediaStream。该API可以让我们从用户设备上获取音频和视频流。此处的 options 参数定义了要请求的媒体类型，包括音频和视频：
const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});在实际应用中，您可能需要对参数进行更细致的控制，例如选择特定的摄像头或麦克风。getUserMedia方法返回一个Promise，一旦MediaStream可用，我们就可以将其分配给 localVideo 元素以在界面上显示。
将MediaStream发送到远程服务器
现在，我们已经有了一个本地的媒体流，下一步是将其发送到远程服务器。这可以通过使用WebRTC API中的 RTCPeerConnection 来实现。这个API提供了建立点对点连接所需的所有功能，包括媒体流交换和打洞等网络协议。
在我们的示例应用程序中，我们可以将 stream 参数传递给 addTrack() 方法，以将MediaStream添加到 RTCPeerConnection 对象中：
stream.getTracks().forEach(track => pc.addTrack(track, stream));
接下来，我们需要使用 createOffer() 方法创建一个offer并将其发送到远程服务器：
const offer = await pc.createOffer(); await pc.setLocalDescription(offer); // 将offer发送给远程服务器
最后，我们需要在远程服务器上获取offer，并将其
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29704