JavaScript录制视频后PotPlayer无音轨问题及脚本优化求助

• 核心原因：未捕获音频流
  你的代码中调用navigator.mediaDevices.getUserMedia时只请求了视频权限（{ video: true }），完全没有申请音频捕获权限，导致录制的媒体流里根本没有音频轨道。浏览器播放时因为没有音频所以不会报错，但PotPlayer会准确识别出视频文件缺少音轨。
• 次要可能：编码兼容性
  部分浏览器默认的WebM编码（比如VP8+Vorbis）在PotPlayer中可能存在兼容性问题，但这只是额外因素，解决音频捕获问题后这个影响会大幅降低。

<body>
    <video id="video" width="640" height="480" autoplay muted></video>
    <button id="startRecording">Start Recording</button>
    <button id="stopRecording" disabled>Stop Recording</button>
    <span id="recordingStatus" style="margin-left: 10px; color: red; display: none;">录制中...</span>
    <a id="downloadLink" style="display: none; margin-left: 10px;">Download Video</a>

    <script>
        let mediaRecorder;
        let recordedChunks = [];
        let mediaStream = null;
        const downloadLink = document.getElementById('downloadLink');
        const startBtn = document.getElementById('startRecording');
        const stopBtn = document.getElementById('stopRecording');
        const statusSpan = document.getElementById('recordingStatus');

        // 初始化媒体流
        async function initMediaStream() {
            try {
                // 请求视频+音频权限，开启音频优化
                mediaStream = await navigator.mediaDevices.getUserMedia({ 
                    video: true, 
                    audio: { echoCancellation: true, noiseSuppression: true }
                });
                document.getElementById('video').srcObject = mediaStream;

                // 检查MediaRecorder支持情况
                if (!window.MediaRecorder) {
                    alert('你的浏览器不支持MediaRecorder功能，请升级浏览器');
                    startBtn.disabled = true;
                    return;
                }

                // 指定兼容性更好的编码格式（VP9视频+Opus音频）
                const mimeType = 'video/webm; codecs=vp9,opus';
                if (!MediaRecorder.isTypeSupported(mimeType)) {
                    console.warn(`不支持${mimeType}，将使用默认格式`);
                }

                mediaRecorder = new MediaRecorder(mediaStream, { mimeType });

                // 处理录制数据
                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        recordedChunks.push(event.data);
                    }
                };

                // 录制结束处理
                mediaRecorder.onstop = () => {
                    const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
                    recordedChunks = [];

                    // 设置下载链接，添加时间戳避免重名
                    downloadLink.href = URL.createObjectURL(blob);
                    downloadLink.download = `recorded_video_${new Date().getTime()}.webm`;
                    downloadLink.style.display = 'inline';

                    statusSpan.style.display = 'none';
                    // 页面卸载时释放URL对象，避免内存泄漏
                    window.addEventListener('beforeunload', () => {
                        URL.revokeObjectURL(downloadLink.href);
                    });
                };

                // 处理录制错误
                mediaRecorder.onerror = (error) => {
                    console.error('录制出错:', error);
                    alert('录制过程中发生错误，请重试');
                    resetButtonStates();
                };

            } catch (error) {
                if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
                    alert('你拒绝了摄像头/麦克风权限，无法进行录制');
                } else {
                    alert(`访问媒体设备失败: ${error.message}`);
                }
                startBtn.disabled = true;
            }
        }

        // 重置按钮状态
        function resetButtonStates() {
            startBtn.disabled = false;
            stopBtn.disabled = true;
            statusSpan.style.display = 'none';
        }

        // 绑定按钮事件，防止重复操作
        startBtn.addEventListener('click', () => {
            if (!mediaRecorder || mediaRecorder.state === 'recording') return;
            
            recordedChunks = [];
            mediaRecorder.start();
            startBtn.disabled = true;
            stopBtn.disabled = false;
            statusSpan.style.display = 'inline';
        });

        stopBtn.addEventListener('click', () => {
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
                resetButtonStates();
            }
        });

        // 页面加载时初始化
        window.addEventListener('load', initMediaStream);
    </script>
</body>

• 新增音频捕获：请求音频权限并开启回声消除、降噪优化，确保录制包含完整音轨
• 增强兼容性：指定VP9+Opus编码格式，提升在PotPlayer等第三方播放器的兼容性；同时做了格式降级处理
• 完善错误处理：增加MediaRecorder支持检查、录制错误捕获、权限拒绝提示
• 内存优化：录制完成后在页面卸载时释放URL.createObjectURL创建的对象，避免内存泄漏
• 用户体验优化：增加录制状态提示、按钮状态防重复点击、文件名添加时间戳避免重名
• 代码结构优化：将逻辑拆分到函数中，提升可读性和维护性

内容的提问来源于stack exchange，提问作者Hoppix