经典Google Sites中HTML/CSS/JS视频录制功能失效排查

嘿，我来帮你搞定这个视频录制JS在经典Google Sites里跑不起来的问题！结合你的描述（HTML/CSS正常、其他JS能工作、唯独这段录制代码失效），我整理了几个最可能的原因和对应的解决办法：

1. 脚本执行时机不对，DOM还没加载完成就跑代码了 #

虽然你的代码看起来是直接获取DOM元素，但经典Google Sites的页面渲染顺序可能和普通网页不太一样——说不定你的JS代码执行的时候，页面上的preview、startButton这些元素还没被渲染出来呢！

解决办法：把所有JS代码包裹在DOMContentLoaded事件回调里，确保等页面DOM完全加载后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  let preview = document.getElementById("preview");
  let recording = document.getElementById("recording");
  let startButton = document.getElementById("startButton");
  let stopButton = document.getElementById("stopButton");
  let downloadButton = document.getElementById("downloadButton");
  let logElement = document.getElementById("log");
  let recordingTimeMS = 5000;

  function log(msg) {
    logElement.innerHTML += msg + "\n";
  }

  function wait(delayInMS) {
    return new Promise(resolve => setTimeout(resolve, delayInMS));
  }

  function startRecording(stream, lengthInMS) {
    let recorder = new MediaRecorder(stream);
    let data = [];

    recorder.ondataavailable = event => data.push(event.data);
    recorder.start();
    log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");

    let stopped = new Promise((resolve, reject) => {
      recorder.onstop = resolve;
      recorder.onerror = event => reject(event.name);
    });

    let recorded = wait(lengthInMS).then( () => recorder.state == "recording" && recorder.stop() );

    return Promise.all([ stopped, recorded ])
      .then(() => data);
  }

  function stop(stream) {
    stream.getTracks().forEach(track => track.stop());
  }

  startButton.addEventListener("click", function() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
      preview.srcObject = stream;
      downloadButton.href = stream;
      preview.captureStream = preview.captureStream || preview.mozCaptureStream;
      return new Promise(resolve => preview.onplaying = resolve);
    }).then(() => startRecording(preview.captureStream(), recordingTimeMS))
    .then (recordedChunks => {
      let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
      recording.src = URL.createObjectURL(recordedBlob);
      downloadButton.href = recording.src;
      downloadButton.download = "RecordedVideo.webm";
      log("Successfully recorded " + recordedBlob.size + " bytes of " + recordedBlob.type + " media.");
    })
    .catch(log);
  }, false);

  stopButton.addEventListener("click", function() {
    stop(preview.srcObject);
  }, false);
});

2. Google Sites的安全策略限制了媒体API的使用 #

经典Google Sites对嵌入内容有严格的Content Security Policy (CSP)，而且嵌入的内容可能跑在沙箱化的iframe里，默认可能没授予摄像头/麦克风访问权限，或者阻止了MediaRecorder这类API的调用。

解决办法：

• 先打开浏览器开发者工具（按F12），切换到「Console」标签页，看看有没有权限被拒绝、API未定义这类错误提示——这能帮你精准定位问题。
• 确认你是通过Google Sites的「自定义HTML」部件嵌入代码的，而不是直接粘贴到文本框里（自定义HTML部件对脚本的支持更友好）。
• 如果控制台提示权限问题，可以手动检查权限状态，在代码里加一段调试代码：

  // 在DOMContentLoaded回调里添加
  navigator.permissions.query({name: 'camera'}).then(status => {
    log('Camera permission: ' + status.state);
  });
  navigator.permissions.query({name: 'microphone'}).then(status => {
    log('Microphone permission: ' + status.state);
  });
  

  运行后看日志，如果显示denied，那就是权限被拒绝了——你需要在浏览器设置里手动授权Google Sites访问摄像头和麦克风。

3. MediaRecorder格式兼容性问题 #

虽然video/webm是主流格式，但某些环境下可能不支持。你可以先检查MediaRecorder.isTypeSupported('video/webm')的返回值，如果是false，换个格式试试，比如video/mp4（注意不同浏览器支持的格式有差异）。

调试代码示例：

// 在startRecording函数前添加
if (!MediaRecorder.isTypeSupported('video/webm')) {
  log('webm格式不支持，尝试使用mp4');
} else {
  log('webm格式支持');
}

最后建议 #

先从第一步（包裹DOMContentLoaded）开始尝试，这是最常见的问题。如果还不行，一定要看控制台的错误信息——浏览器会告诉你到底是哪里出问题了，比如元素找不到、API调用失败还是权限被拒。

内容的提问来源于stack exchange，提问作者W. G.