mediasoup-demo的网页增加选择摄像头功能

最新推荐文章于 2025-11-16 12:55:08 发布

原创

最新推荐文章于 2025-11-16 12:55:08 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #mediasoup #mediasoup-demo

本文介绍了如何在mediasoup-demo中添加摄像头选择功能，针对前端不熟悉的开发者，详细讲解了需要修改的文件、涉及的类及对象，以及实现摄像头切换的具体步骤。通过修改`Me.jsx`和`Me.styl`文件，实现了一个基本的下拉列表供用户选择摄像头，并在选择后更新当前使用的摄像头设备。

mediasoup-demo是mediasoup官方提供的一个BS视频会议完整示例。但是有一点不好的地方在于无法选择摄像头，只能是固定使用获取到的摄像头列表的第一个摄像头。这个不实用，有时候单机插多个摄像头来调试也很不方便。

作为C++工程师完全不会前端，居然还是被我蒙出来了。

这篇文章写给两类人：

第一类是前端工程师，只是因为刚刚接触mediasoup-demo，还不熟悉，那么我会告诉你需要改哪些文件，按什么逻辑改，你写出来的代码，调整的UI，肯定比我好看。
第二类是非前端工程师，我会完整给出怎么去改，同时尝试让你了解为什么要改这些文件和写这些代码。

做出来的效果如图，选择摄像头之后，单击打开关闭摄像头的按钮（摄像机图标的按钮），先关掉当前打开的摄像头，然后再单击一次这个按钮，重新打开摄像头就是打开下拉列表选择的摄像头了。

主要思路、涉及到的文件、对象（前端工程师看完应该就可以自己动手改了）：

1）只需要改两个文件：

app/lib/components/Me.jsx
app/stylus/components/Me.styl

这两个文件就是左下角本端的视频框。我在Me.jsx里增加了select标签，然后抱着能用就行的态度在Me.styl里抄了一下按钮的样式作为select标签的样式。

2）如何获取摄像头列表：

在Me.jsx里有获取RoomClient这个对象，变量名是roomClient。静音按钮、开关摄像头等的实现都是调用这个对象的方法的。这个对象的实现在app/lib/RoomClient.js里。RoomClient里有一个成员变量_webcams，存储着“摄像头设备ID”到“摄像头设备对象”（MediaDeviceInfos）的映射（Map）。

3）如何设置要使用的摄像头：

还是在RoomClient里有一个成员变量_webcam（和之前的map只差了最后的s），当前正在使用的摄像头就存储在_webcam的device成员里，存放的就是“摄像头设备对象”（MediaDeviceInfos）。

4）实现

使用什么页面元素显示摄像头列表、放在哪里、什么样式，在什么事件加载这个摄像头列表到UI上，选中的时候怎么将选中的摄像头的“摄像头设备对象”赋值给roomClient._webcam.device，就各显神通了。

给非前端工程师：

非前端工程师接下来跟我开始魔改，只求能用，不保证好看，也不保证是稳定的。

1）先修改app/lib/components/Me.jsx文件，增加select标签，即下拉列表框

按我的理解，这个文件负责生成左下角本地端的html元素，同时包含这些html元素的js代码。核心的代码是render()函数

12 class Me extends React.Component
13 {
	   // 省略一些内容
21     
22 	   render()
23 	   {
	       // 注意这里的roomClient，从this.props获取到了RoomClient对象
24 	   	   const {
25 	   	   	   roomClient,
26 	   	   	   connected,
27 	   	   	   me,
28 	   	   	   audioProducer,
29 	   	   	   videoProducer,
30 	   	   	   faceDetection,
31 	   	   	   onSetStatsPeerId
32 	   	   } = this.props;

最初render函数就从this.props中获取到了一堆对象，其中就有我们后面要用