MediaRecorder 未正确初始化实时音频广播

问题描述 投票:0回答:1

我正在开发一个项目,需要实现从管理员到多个用户的实时音频广播。在研究时,我发现了使用 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 对象未正确初始化。

任何人都可以帮助我确定可能导致此问题的原因以及如何解决它吗?任何建议或见解将不胜感激。

谢谢!

javascript socket.io webrtc html5-audio audio-streaming
1个回答
0
投票

要让 MediaRecorder 发出规则的数据块,您必须在调用

.start()
时给它一个间隔。

mediaRecorder.start(1_000); // Emit data roughly every second

另请参阅:https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start

© www.soinside.com 2019 - 2024. All rights reserved.