title: HTML, CSS, & JavaScript on Classic Google Sites - Why Video Recording Not Working?
body: <p>There is this code <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element#JavaScript_content" rel="nofollow noreferrer">here</a> that I am wanting to upload to Classic Google Sites. (The code is at the very bottom of the link that you can click on.)</p>
  
  <p>I can get the HTML and CSS parts up and running to do the video recorder but the JavaScript part I have no idea why it is not working. The code goes in that order.</p>
  
  <p>I can get some JavaScript to do other stuff but not this. I type in &lt; script > "Copied and Pasted JavaScript Code" &lt; /script> when using the code from the site linked above but no success.</p>
  
  <blockquote>
    <p>What am I doing wrong? How do I get this JavaScript part up and running?</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- HTML --&gt;
  &lt;html lang="en-US"&gt;
  &lt;div class="left"&gt;
    &lt;div id="startButton" class="button"&gt;
      Start
    &lt;/div&gt;
    &lt;h2&gt;Preview&lt;/h2&gt;
    &lt;video id="preview" width="160" height="120" autoplay muted&gt;&lt;/video&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
    &lt;div id="stopButton" class="button"&gt;
      Stop
    &lt;/div&gt;
    &lt;h2&gt;Recording&lt;/h2&gt;
    &lt;video id="recording" width="160" height="120" controls&gt;&lt;/video&gt;
    &lt;a id="downloadButton" class="button"&gt;
      Download
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="bottom"&gt;
    &lt;pre id="log"&gt;&lt;/pre&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  &lt;!-- CSS --&gt;
  &lt;script&gt; //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;
  }
  &lt;/script&gt;
  &lt;!-- JavaScript (Doesn't Work) --&gt;
  &lt;script&gt;
  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 =&gt; setTimeout(resolve, delayInMS));
  }
  function startRecording(stream, lengthInMS) {
    let recorder = new MediaRecorder(stream);
    let data = [];
   
    recorder.ondataavailable = event =&gt; data.push(event.data);
    recorder.start();
    log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
   
    let stopped = new Promise((resolve, reject) =&gt; {
      recorder.onstop = resolve;
      recorder.onerror = event =&gt; reject(event.name);
    });
  
    let recorded = wait(lengthInMS).then(
      () =&gt; recorder.state == "recording" &amp;&amp; recorder.stop()
    );
   
    return Promise.all([
      stopped,
      recorded
    ])
    .then(() =&gt; data);
  }
  function stop(stream) {
    stream.getTracks().forEach(track =&gt; track.stop());
  }
  startButton.addEventListener("click", function() {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(stream =&gt; {
      preview.srcObject = stream;
      downloadButton.href = stream;
      preview.captureStream = preview.captureStream || preview.mozCaptureStream;
      return new Promise(resolve =&gt; preview.onplaying = resolve);
    }).then(() =&gt; startRecording(preview.captureStream(), recordingTimeMS))
    .then (recordedChunks =&gt; {
      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);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>