今天，我将讨论Voximplant Web SDK中的
硬件模块。 该模块取代了旧的音频和视频设备管理系统。 但是首先，要介绍一下WebRTC堆栈中的设备管理以及为什么需要所有这些。
最终用户很少有几个麦克风。 或者有几种扬声器：例如，普通扬声器和蓝牙耳机； 或智能手机的扬声器和免提电话。
但是在现代世界中，两台相机很常见。 在平板电脑和手机上：常规和正面。 在笔记本电脑上：内置和更好的外部。 依此类推。 如果默认情况下选择了错误的设备集，而用户无法以任何方式进行更改，则用户可能会非常沮丧。 这是WebRTC中的第一个媒体管理应用程序。
第二个应用是音频和视频的微调。 各种回声消除，降噪，设置视频分辨率，帧频，白平衡以及浏览器特别支持的其他功能。
以前，对于设备管理，我们提供了
constraints接口，开发人员必须独立设置媒体请求的所有限制和参数。 这是完全定制的音频和视频请求的一个小示例：
const myConstraints = { audio:{ sampleSize: 16, channelCount: 2, noiseSuppression: true, echoCancellation: false }, video:{ width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectRatio: 1.777777778, frameRate: { max: 30 }, facingMode: { exact: "user" } } };
在设置音频和视频时，这提供了令人难以置信的灵活性，但是总会有一个“按钮”。 正如支持调查的统计数据所示，由于我们是一个友好的平台，并且使用户习惯于简单性，因此客户基本上没有使用此选项。 那些敢于使用此功能的人经常在膝盖上方开枪，因为此时浏览器在空间上略有不兼容。
现在很清楚我们如何过这样的生活。 现在该开始做生意了：快速浏览模块； 有关详细阅读，我将
在我们的网站上保留指向
文档的链接。
该模块的入口点是
StreamManager 。 从历史上看，[带有Elephant.jpg的图片]，我们的Web SDK的许多部分都是单例的，此类也不例外：您可以使用
get（）函数获取实例。 这样做有很多原因，但也许还有其他原因。
const streamManager = VoxImplant.Hardware.StreamManager.get();
使用StreamManager，您可以启用或禁用本地视频以及
为他获取媒体流-实际上，仅此而已。 当查看外部接口时，入口点不是很大。
(async () => { try{ console.log('[WebSDK] '); await streamManager.showLocalVideo(); console.log('[WebSDK] '); await streamManager.hideLocalVideo(); console.log('[WebSDK] !'); } catch(e){ console.log('[WebSDK] - . , ?!'); console.error(e); } })();
关于本地视频的一个有趣的事实：本地视频不会以任何方式传输给对话者。 例如，如果本地视频隐藏在角落，则可以为用户显示高清图片，并发送320 * 240，反之亦然。 下面将介绍如何提高这种技巧。
StreamManager中有3个事件：
使用getLocalMediaRenderers（）函数，如果尚未将对象保存到自己的位置，则可以使用本地视频获取DOM元素的链接。
streamManager.getLocalMediaRenderers().forEach(renderer => { cont elementOfDOM = renderer.element; elementOfDOM.addEventListener('on42',doSomething,true); });
让我们继续进行视频设置（最美味的手吧）。 突然
CameraManager 。 再次，单调乏味的
get（）函数：
const cameraManager= VoxImplant.Hardware.CameraManager.get();
我们可以设置什么设置？ 让我们看一下
CameraParams界面：
另外3个选项负责视频的大小：
让我们回到CameraManager并应用设置！ 里面有2个getter和2个settings setter：
您可能会猜到，“默认”就是“默认”设置。 它们将用于接收本地视频，以进行新的来电和去电。
现在承诺的重点是：
console.log('[WebSDK] .'); await cameraManager.setDefaultVideoSettings({ frameWidth:320, frameHeight:240, frameRate:12 }); await streamManager.showLocalVideo(); cameraManager.setDefaultVideoSettings({ frameWidth:640, frameHeight:480, frameRate:25 }); const newCall = client.call('mySchoolFriendBoris');
与名称中的
Call配对要复杂一些。 这些功能旨在在已经进行的呼叫期间接收和设置首选项。 更改设置时，将
发生CallEvents.Updated事件。
console.log('[WebSDK] .'); cameraManager.setCallVideoSettings(newCall,{ frameWidth:320, frameHeight:240, frameRate:12 }); newCall.on(VoxImplant.CallEvents.Updated,e => { console.log('[WebSDK] .'); });
CameraManager保留两个功能。 非常强大但复杂。 枚举
VideoQuality具有三个有趣的含义：
- VIDEO_QUALITY_HIGH;
- VIDEO_QUALITY_MEDIUM;
- VIDEO_QUALITY_LOW。
一个合乎逻辑的问题：“伊戈尔！ 如果Web SDK知道最佳，最差和平均质量，那么为什么没有方法列出网络摄像头支持的分辨率呢？！” 蒂姆斯不知道。
为了找到答案，您需要从字面上对所有可能的权限进行排序。 我设法获得的支持。 听起来很简单，但实际上可能要花费几分钟。 因此，例如，我们无法在WebSDK的初始化中执行此操作。 这样一来，您就可以在用户最舒适的时候执行此操作（如果您要执行此操作），并且有
testResolutions 。 最好将函数的工作结果保存在localStorage中，
然后在页面重新加载时通过
loadResolutionTestResult加载它：
console.log('[WebSDK] , WebSDK .'); const testResults = await cameraManager.testResolutions(); localStorage.setItem('defaultCameraResolutionTestResults',JSON.stringify(testResolutions));
最后但并非最不重要的是
AudioDeviceManager 。 该类与
CameraManager非常相似。 仅对于声音，您的设置会反映在
AudioParams界面中：