本文将介绍 MediaDevices API，如何获取用户的媒体设备（摄像头和麦克风）以及如何获取特定的视频分辨率等。
这部分是上一篇文章《使用 JavaScript 和 Nodejs 搭建 webrtc信令服务器》的延续，如果没看到，可以花时间去看看。
为了使用 MediaDevices API，你必须在安全域上托管页面。此外，用户必须允许页面访问他们的摄像头和麦克风，这取决于使用的浏览器。（Chrome 会询问一次，而 Safari 会询问每个会话）。如果页面不安全，可能会在尝试使用 MediaDevices API 时返回未定义的信息。
让我们开始吧。首先，我们将准备静态 HTML 文件，因此在首选的 IDE 中打开 public_index.html 并键入复制以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Part 2 - Media Devices</title>
<meta charset="utf-8"/>
</head>
<body>
<h2>Media Devices example</h2>
<button onclick="startDefault()">Default</button>
<button onclick="startVGA()">VGA</button>
<button onclick="startHD()">HD</button>
<button onclick="startFullHD()">Full HD</button>
<button onclick="stop()">Stop</button>
<hr/>
<video id="localVideo" autoplay muted></video>
<script src="./main.js"></script>
</body>
</html>接下来我们需要准备 main.js 文件，打开 public_main.js 并 type_copy 以下内容：（别着急，我会在后面解释是怎么回事）
const localVideo = document.getElementById('localVideo');
const startDefault = () => getMedia({ video: true, audio: true });
const startVGA = () => getMedia({ video: { width: 640, height: 480 }, audio: true });
const startHD = () => getMedia({ video: { width: 1280, height: 720 }, audio: true });
const startFullHD = () => getMedia({ video: { width: 1920, height: 1080 }, audio: true });
const stop = () => {
if (!localVideo.srcObject) return;
for (const track of localVideo.srcObject.getTracks()) {
track.stop();
}
};
const getMedia = async (constraints) => {
try {
console.log('getMedia constraints: ', constraints);
const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
localVideo.srcObject = mediaStream;
} catch (error) {
alert('failed to get media devices, see console for error');
console.error(error);
}
};每个函数基本上都调用具有不同媒体约束的“navigator.mediaDevices.getUserMedia”。我将解释约束的含义，但首先让我们运行示例。
npm i # If needed
npm run start现在打开浏览器并转到：https://localhost:3000
你应该得到一个 SSL 错误，但希望你信任你自己的主机；）如果你使用的是 chrome，你可能无法超出页面，如果是这样，请输入“thisisunsafe”。
在那里你应该看到以下页面： example – ImgBB
随意尝试各种按钮，你可以从视频的大小判断分辨率情况 :)
例如，你可能会注意到，如果选择“全高清”，则返回的分辨率可能只是“高清”。这是因为如果分辨率不受支持，API 将自动选择最接近的分辨率。
如果你绝对想确保获得某个分辨率怎么办？那么需要使用“精确”，如下所示：
const constraints = { video: { width: { exact: 1920 }, height: { exact: 1080 } } };这将绝对确保分辨率为全高清，但是如果设备不支持全高清，则会引发错误。
如果你想要一个范围怎么办？可以像这样定义约束：
const constraints = { video: { width: { min: 600, max: 1300 }, height: { min: 300, max: 800 } } };需要注意的一件事是，当你将媒体发送到另一个对等点时，WebRTC 可能会根据可用比特率、网络状况、数据包丢失等改变分辨率/帧速率。因此我通常不会建议使用“exact”参数，仅当你计划在本地使用视频时才使用它。
这部分到此结束，希望在第 3 部分见到你，我们终于可以在对等点之间发送和接收媒体了！
源代码：https://github.com/ethand91/webrtc-tutorial
作者：Ethan Denvir.
本文来自作者投稿，版权归原作者所有。如需转载，请注明出处：https://www.nxrte.com/jishu/webrtc/21073.html
