在线聊天完成

app/index.html

@@ -6,6 +6,7 @@
 		<meta charset='UTF-8'>
 		<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
 		<meta name='description' content='mediasoup demo - Cutting Edge WebRTC Video Conferencing'>
+		<meta http-equiv="Permissions-Policy" content="microphone=(self), camera=(self)">
 
 		<link rel='stylesheet' href='/mediasoup-demo-app.css?v=foo2'>
 

app/lib/RoomClient.js

@@ -544,7 +544,7 @@ export default class RoomClient
 									store.dispatch(requestActions.notify(
 										{
 											type	: 'userMessage',
-											title   : `${sendingPeer.displayName} says:`,
+											title   : `${sendingPeer.displayName}`,
 											text    : message,
 											timeout : 5000
 										}));

app/lib/components/Notifications.jsx

@@ -38,7 +38,7 @@ const Notifications = ({ notifications, onClick }) => {
                                                     </div>
                                                 </div> :
                                                 <>
-                                                    <div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
+                                                    <div style={{ color: '#232B40', marginBottom: 10 }}>{notification.title}</div>
                                                     <div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
                                                         {notification.text}
                                                     </div>

app/lib/components/Room.jsx

@@ -14,11 +14,11 @@ import Peers from './Peers';
 import Stats from './Stats';
 import Notifications from './Notifications';
 import NetworkThrottle from './NetworkThrottle';
+import { log } from 'gulp-util';
+import UrlParse from 'url-parse';
 
-class Room extends React.Component
-{
-	render()
-	{
+class Room extends React.Component {
+	render() {
 		const {
 			roomClient,
 			room,
@@ -31,12 +31,26 @@ class Room extends React.Component
 			? 'dev'
 			: room.mediasoupClientVersion;
 
+
+		const urlParser = new UrlParse(window.location.href, true);
+		// 将字符串按 & 分隔
+		const parts = urlParser.href.split('&');
+		// 提取并解析每个部分
+		const params = parts.slice(1).reduce((acc, part) => {
+			const [key, value] = part.split('=');
+			if (key && value) acc[key] = value;
+			return acc;
+		}, {});
+
+		let roomId = params['roomId'];
+
 		return (
 			<Appear duration={300}>
 				<div data-component='Room'>
 					<div className='crumbs'>
 						<span className='goback' onClick={() => {
-							
+							// 向主页面发送消息请求返回主页面
+							window.parent.postMessage('goBack', '*');
 						}}>
 							值班专家<span style={{ margin: '0 4px' }}>{`>`}</span>
 						</span>
@@ -110,8 +124,7 @@ class Room extends React.Component
 								disabled: me.audioOnlyInProgress
 							})}
 							data-tip={'将参与者的视频 显示/隐藏'}
-							onClick={() =>
-							{
+							onClick={() => {
 								me.audioOnly
 									? roomClient.disableAudioOnly()
 									: roomClient.enableAudioOnly();
@@ -123,8 +136,7 @@ class Room extends React.Component
 								on: me.audioMuted
 							})}
 							data-tip={'将参与者的音频 静音/取消静音'}
-							onClick={() =>
-							{
+							onClick={() => {
 								me.audioMuted
 									? roomClient.unmuteAudio()
 									: roomClient.muteAudio();
@@ -161,8 +173,7 @@ class Room extends React.Component
 		);
 	}
 
-	componentDidMount()
-	{
+	componentDidMount() {
 		const { roomClient } = this.props;
 
 		roomClient.join();
@@ -178,8 +189,7 @@ Room.propTypes =
 	onRoomLinkCopy: PropTypes.func.isRequired
 };
 
-const mapStateToProps = (state) =>
-{
+const mapStateToProps = (state) => {
 	return {
 		room: state.room,
 		me: state.me,
@@ -187,11 +197,9 @@ const mapStateToProps = (state) =>
 	};
 };
 
-const mapDispatchToProps = (dispatch) =>
-{
+const mapDispatchToProps = (dispatch) => {
 	return {
-		onRoomLinkCopy : () =>
-		{
+		onRoomLinkCopy: () => {
 			dispatch(requestActions.notify(
 				{
 					text: '房间链接已复制到剪贴板'

app/lib/index.jsx

@@ -21,6 +21,7 @@ import * as cookiesManager from './cookiesManager';
 import * as stateActions from './redux/stateActions';
 import reducers from './redux/reducers';
 import Room from './components/Room';
+import { log } from 'gulp-util';
 
 const logger = new Logger();
 const reduxMiddlewares = [ thunk ];
@@ -64,9 +65,21 @@ async function run()
 
 	const urlParser = new UrlParse(window.location.href, true);
 	const peerId = randomString({ length: 8 }).toLowerCase();
-	let roomId = urlParser.query.roomId;
-	let displayName =
-		urlParser.query.displayName || (cookiesManager.getUser() || {}).displayName;
+
+	// 将字符串按 & 分隔
+	const parts = urlParser.href.split('&');
+	// 提取并解析每个部分
+	const params = parts.slice(1).reduce((acc, part) => {
+		const [key, value] = part.split('=');
+		if (key && value) acc[key] = value;
+		return acc;
+	}, {});
+
+	let roomId = params['roomId'];
+	let userName = decodeURIComponent(params['userName']);
+
+
+	let displayName = userName || (cookiesManager.getUser() || {}).displayName;
 	const handlerName = urlParser.query.handlerName || urlParser.query.handler;
 	const forceTcp = urlParser.query.forceTcp === 'true';
 	const produce = urlParser.query.produce !== 'false';

server/config.js

@@ -13,11 +13,11 @@ const os = require('os');
 module.exports =
 {
 	// Listening hostname (just for `gulp live` task).
-	domain : process.env.DOMAIN || '0.0.0.0',
+	domain : process.env.DOMAIN || '192.168.0.210',
 	// Signaling settings (protoo WebSocket server and HTTP API server).
 	https  :
 	{
-		listenIp   : '0.0.0.0', // 换成你的IP地址
+		listenIp   : '192.168.0.210', // 换成你的IP地址
 		// NOTE: Don't change listenPort (client app assumes 4443).
 		listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
 		// NOTE: Set your own valid certificate files.
@@ -124,13 +124,13 @@ module.exports =
 			[
 				{
 					protocol         : 'udp',
-					ip               : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
+					ip               : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
 					announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
 					port             : 44444
 				},
 				{
 					protocol         : 'tcp',
-					ip               : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
+					ip               : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
 					announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
 					port             : 44444
 				}
@@ -147,7 +147,7 @@ module.exports =
 			[
 				{
 					protocol         : 'udp',
-					ip               : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
+					ip               : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
 					announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
 					portRange        :
 					{
@@ -157,7 +157,7 @@ module.exports =
 				},
 				{
 					protocol         : 'tcp',
-					ip               : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
+					ip               : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
 					announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
 					portRange        :
 					{
@@ -180,7 +180,7 @@ module.exports =
 			listenInfo :
 			{
 				protocol         : 'udp',
-				ip               : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
+				ip               : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
 				announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
 				portRange        :
 				{