如何在WordPress求职门户网站添加无存储视频录制回放功能

核心思路 #

完全基于浏览器原生API实现，所有视频数据仅在用户本地内存/浏览器临时存储中处理，不会上传到服务器或写入网站数据库。

具体实现步骤（WordPress环境） #

1. 创建自定义短代码（方便在页面/文章中嵌入） #

在主题的functions.php文件中添加以下代码，生成可调用的短代码：

function video_recorder_shortcode() {
    ob_start();
    ?>
    <div class="video-recorder-container">
        <video id="preview" width="640" height="480" autoplay muted></video>
        <video id="recording" width="640" height="480" controls></video>
        <div class="controls">
            <button id="startBtn">开始录制</button>
            <button id="stopBtn" disabled>停止录制</button>
            <button id="downloadBtn" disabled>下载视频（可选）</button>
        </div>
    </div>

    <script>
        const preview = document.getElementById('preview');
        const recording = document.getElementById('recording');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        let mediaRecorder;
        let recordedChunks = [];

        // 获取摄像头权限并初始化预览
        async function initCamera() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
                preview.srcObject = stream;
                mediaRecorder = new MediaRecorder(stream);

                // 收集录制的视频片段
                mediaRecorder.ondataavailable = (e) => {
                    if (e.data.size > 0) {
                        recordedChunks.push(e.data);
                    }
                };

                // 录制停止后生成回放视频
                mediaRecorder.onstop = () => {
                    const blob = new Blob(recordedChunks, { type: 'video/webm' });
                    recording.src = URL.createObjectURL(blob);
                    downloadBtn.href = URL.createObjectURL(blob);
                    downloadBtn.download = `recording-${new Date().toISOString()}.webm`;
                    downloadBtn.disabled = false;
                    recordedChunks = []; // 清空片段，准备下一次录制
                };
            } catch (err) {
                alert('无法访问摄像头/麦克风，请检查浏览器权限设置');
                console.error(err);
            }
        }

        // 绑定按钮事件
        startBtn.addEventListener('click', () => {
            mediaRecorder.start();
            startBtn.disabled = true;
            stopBtn.disabled = false;
        });

        stopBtn.addEventListener('click', () => {
            mediaRecorder.stop();
            preview.srcObject.getTracks().forEach(track => track.stop()); // 关闭摄像头
            startBtn.disabled = false;
            stopBtn.disabled = true;
        });

        // 页面加载时初始化摄像头
        window.addEventListener('load', initCamera);
    </script>

    <style>
        .video-recorder-container {
            max-width: 640px;
            margin: 20px auto;
        }
        .controls {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('video_recorder', 'video_recorder_shortcode');

2. 在求职者页面嵌入功能 #

在WordPress的求职者专属页面（比如个人中心、简历编辑页）中，插入短代码[video_recorder]即可加载录制组件。

3. 关键特性说明 #

• 无后端存储：所有视频数据仅在用户浏览器内处理，录制后的视频以Blob形式存在于内存中，停止录制后生成临时URL用于回放，页面刷新后数据自动销毁。
• 浏览器兼容性：支持Chrome、Firefox、Edge等现代浏览器，需用户允许摄像头和麦克风权限。
• 可选下载功能：用户可选择将录制的视频下载到本地，网站不会留存任何副本。

4. WordPress适配注意事项 #

• 如果使用了页面构建器（如Elementor），可直接在自定义HTML模块中插入上述HTML/JS代码，无需短代码。
• 若主题更新会覆盖functions.php，建议将短代码功能封装为自定义插件，避免代码丢失。

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