我正在开发一个项目,需要实现从管理员到多个用户的实时音频广播。在研究时,我发现了使用 WebRTC 和 Socket.IO 的示例 我当前的设置涉及管理员将音频从麦克风流式传输到服务器,然后服务器将音频实时广播给连接的用户。但是,我在 WebRTC 和 Socket.IO 方法方面遇到了问题,并且我也愿意探索其他选项。
这是我用于管理员的客户端代码版本:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Broadcasting</title>
</head>
<body>
<h1>Admin Broadcasting</h1>
<button id="startBroadcastBtn">Start Broadcasting</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const startBroadcastBtn = document.getElementById('startBroadcastBtn');
const socket = io('ws://localhost:9000');
let mediaRecorder;
startBroadcastBtn.addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
console.log('MediaStream object:', stream);
const audioTracks = stream.getAudioTracks();
console.log('Audio tracks:', audioTracks);
if (audioTracks.length > 0) {
console.log('Audio track inside stream:', audioTracks[0]);
mediaRecorder = new MediaRecorder(stream);
console.log('MediaRecorder object:', mediaRecorder);
mediaRecorder.ondataavailable = (event) => {
console.log('Audio chunk captured:', event);
if (event.data.size > 0) {
console.log('Audio chunk captured:', event.data);
socket.emit('admin-audio-chunk', event.data);
}
};
mediaRecorder.start();
} else {
console.error('No audio tracks available');
}
} catch (error) {
console.error('Error accessing media devices:', error);
}
});
</script>
</body>
</html>
在服务器端,我使用 Node.js 和 Socket.IO 来处理客户端连接和广播音频流。
MediaRecorder 对象似乎已创建,但当音频块可用时,ondataavailable 事件未触发。因此,没有音频数据发送到服务器进行广播。
我已经检查了浏览器兼容性和访问麦克风的权限,但我仍然无法弄清楚为什么 MediaRecorder 对象未正确初始化。
任何人都可以帮助我确定可能导致此问题的原因以及如何解决它吗?任何建议或见解将不胜感激。
谢谢!
要让 MediaRecorder 发出规则的数据块,您必须在调用
.start()
时给它一个间隔。
mediaRecorder.start(1_000); // Emit data roughly every second
另请参阅:https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start