Chrome 112 来袭！揭秘从容应对getDisplayMedia两大妙招！
2023-09-08 16:57:32
Chrome 112 中 getDisplayMedia 的烦恼：解决内容挤压和滚动条问题
嗨，大家好！我是 WebRTC 领域的资深玩家 Jacky。最近，备受期待的 Chrome 112 版本如期而至，虽然它带来了许多激动人心的新功能，但同时也带来了一个令人头疼的问题：getDisplayMedia 功能的异常。
相信大家都有听说过，通过 getDisplayMedia 可以正确获取当前标签页的内容。但在 Chrome 112 中，它却出现了内容挤压、概率性出现滚动条等问题。看到这里，你是不是也遇到了同样的困扰，抓耳挠腮不知如何是好？
别担心，今天我就来给大家分享两种解决方案，助你轻松应对 getDisplayMedia 的难题！
方案一：简单粗暴，快速上手
如果你追求效率，那么这个方案非常适合你。只需在 getDisplayMedia 中添加一个新的选项即可，如下所示：
getDisplayMedia({
video: true,
audio: false,
// 添加此选项以解决问题
chromeMediaSourceId: "tab"
});
通过这个选项，你可以明确告诉浏览器，要从指定的标签页中获取内容。这样一来，内容挤压和滚动条的问题将不复存在。是不是很简单，快去试试吧！
方案二：深度解析，以理服人
如果你追求深入理解，想要弄清问题的根源，那么这个方案就是为你量身定做的。它需要你对 getDisplayMedia 的原理有一定的了解，但相信我，这将是一个非常有趣的学习过程。
首先，我们需要了解 getDisplayMedia 是如何工作的。当我们调用 getDisplayMedia 时，浏览器会创建一个虚拟设备，并将标签页内容作为输入源。但由于 Chrome 112 中的一些改动，这个虚拟设备出现了问题，导致内容挤压和滚动条的出现。
为了解决这个问题，我们需要在创建虚拟设备时指定一个正确的设备 ID。这个设备 ID 就是前面提到的 chromeMediaSourceId。通过这个 ID，浏览器可以准确地找到标签页，并获取其内容。
getDisplayMedia({
video: true,
audio: false,
// 指定标签页设备 ID
chromeMediaSourceId: "tab"
});
这样一来，标签页的内容就可以正确地显示在虚拟设备上，问题也就迎刃而解了。如果你对这个解决方案感到满意，那么恭喜你，你已经成功解决了 getDisplayMedia 在 Chrome 112 中的问题。但如果你还想更深入地了解 getDisplayMedia 的原理，那么我建议你查阅相关的文档和资料。
常见问题解答
-
为什么 Chrome 112 中的 getDisplayMedia 会出现问题？
- 这是由于 Chrome 112 中创建虚拟设备时的改动导致的。
-
如何解决 getDisplayMedia 中的内容挤压和滚动条问题？
- 可以通过在 getDisplayMedia 中添加 chromeMediaSourceId 选项或深入理解其原理并指定正确的设备 ID 来解决。
-
chromeMediaSourceId 的作用是什么？
- chromeMediaSourceId 用于指定要从哪个标签页获取内容。
-
在方案二中，为什么需要指定设备 ID？
- 这是为了创建正确的虚拟设备并准确地获取标签页内容。
-
如果我遇到了其他与 getDisplayMedia 相关的错误，该怎么办？
- 请查阅相关的文档或寻求技术支持的帮助。
我希望这些解决方案能够帮助你解决 getDisplayMedia 在 Chrome 112 中的问题。如果你还有任何疑问，欢迎随时留言，我会尽力解答。
