经典 Google 站点上的 HTML、CSS 和 JavaScript - 为什么无法录制视频？

Question

我想将此代码 here 上传到经典 Google 站点。（代码在link最下方，点击即可。）

我可以得到 HTML 和 CSS 部分，运行可以做录像机，但是 JavaScript 部分我不知道为什么它不起作用。代码按此顺序进行。

我可以得到一些 JavaScript 来做其他事情，但不是这个。我在使用上面 linked 站点的代码时输入了但没有成功。

What am I doing wrong? How do I get this JavaScript part up and running?

<!-- HTML -->
<html lang="en-US">
<div class="left">
  <div id="startButton" class="button">
    Start
  </div>
  <h2>Preview</h2>
  <video id="preview" width="160" height="120" autoplay muted></video>
</div>
<div class="right">
  <div id="stopButton" class="button">
    Stop
  </div>
  <h2>Recording</h2>
  <video id="recording" width="160" height="120" controls></video>
  <a id="downloadButton" class="button">
    Download
  </a>
</div>
<div class="bottom">
  <pre id="log"></pre>
</div>
</html>
<!-- CSS -->
<script> //css
body {
  font: 14px "Open Sans", "Arial", sans-serif;
}

video {
  margin-top: 2px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  display: block;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  text-decoration: none;
}

h2 {
  margin-bottom: 4px;
}

.left {
  margin-right: 10px;
  float: left;
  width: 160px;
  padding: 0px;
}

.right {
  margin-left: 10px;
  float: left;
  width: 160px;
  padding: 0px;
}

.bottom {
  clear: both;
  padding-top: 10px;
}
</script>
<!-- JavaScript (Doesn't Work) -->
<script>
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);
</script>

Answer 1

好吧，据我所知，代码实际上是正确的，没有任何问题，如果你把它全部放在一个 HTML 文件中，你可能想添加一个 head 标签，然后把CSS 样式在标签内而不是标签内。

并在代码末尾的body标签内添加JS脚本，应该是运行代码。

我在下面添加了有效的代码，因此您可以将它与您的代码进行比较，看看有什么不同:)

    <html lang="en-US">
  <head>
    <style>
      body {
      font: 14px "Open Sans", "Arial", sans-serif;
      }
    
      video {
      margin-top: 2px;
      border: 1px solid black;
      }
    
      .button {
      cursor: pointer;
      display: block;
      width: 160px;
      border: 1px solid black;
      font-size: 16px;
      text-align: center;
      padding-top: 2px;
      padding-bottom: 4px;
      color: white;
      background-color: darkgreen;
      text-decoration: none;
      }
    
      h2 {
      margin-bottom: 4px;
      }
    
      .left {
      margin-right: 10px;
      float: left;
      width: 160px;
      padding: 0px;
      }
    
      .right {
      margin-left: 10px;
      float: left;
      width: 160px;
      padding: 0px;
      }
    
      .bottom {
      clear: both;
      padding-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="left">
    <div id="startButton" class="button">
      Start
    </div>
    <h2>Preview</h2>
    <video id="preview" width="160" height="120" autoplay muted></video>
    </div>
    <div class="right">
    <div id="stopButton" class="button">
      Stop
    </div>
    <h2>Recording</h2>
    <video id="recording" width="160" height="120" controls></video>
    <a id="downloadButton" class="button">
      Download
    </a>
    </div>
    <div class="bottom">
    <pre id="log"></pre>
    </div>

    <script>
      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);
    </script>
  </body>
</html>

经典 Google 站点上的 HTML、CSS 和 JavaScript - 为什么无法录制视频？

HTML, CSS, & JavaScript on Classic Google Sites - Why Video Recording Not Working?

html

javascript

css

google-sites