Why is nothing happening when i press record button?

I’m making an in browser screen recorder and just like my audio recorder (https://easy-recorder.rf.gd) my buttons to start recording are doing nothing. Code:

<!DOCTYPE html>
<html> 
<head>
  <meta charset="utf-8">
  <title>Easy recorder</title>
  <style>
  html, body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
  }

  h1, #controls, video {
    margin: auto;
    margin-top: 20px;
  }

  video {
    width: 30%;
    border-radius: 5px;
    border: 1px solid black;
  }

  /* The switch - the box around the slider */
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

  #options {
    display: table;
    margin: 50px auto 0px;
  }

  .option {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 15px;
  }

  </style>
</head>
<body>
  <h1>
    Screen Recorder
  </h1>

  <div id="options">
    <span class="option">Record as .webm Video <---</span>
    <label class="switch">
      <input id="convert-to-gif" type="checkbox">
      <span class="slider round"></span>
    </label>
    <span class="option">---> Record as .gif (Chrome only)</span>
  </div>

  <video controls autoplay playsinline></video>

  <div id="controls">
    <button id="btn-start-recording">Start Recording</button>
    <button id="btn-stop-recording" disabled>Stop Recording</button>
  </div>
  <p id="message" />

  <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
  <script src='https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js'></script>
  <script>
  const video = document.querySelector('video');
  const message = document.getElementById('message');
  const { createFFmpeg, fetchFile } = FFmpeg;
  const ffmpeg = createFFmpeg({
    log: true,
    progress: showProgress
  });

  if(!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {
    var error = 'Your browser does NOT supports getDisplayMedia API.';
    document.querySelector('h1').innerHTML = error;

    video.style.display = 'none';
    document.getElementById('btn-start-recording').style.display = 'none';
    document.getElementById('btn-stop-recording').style.display = 'none';
    throw new Error(error);
  }

  function invokeGetDisplayMedia(success, error) {
    var displaymediastreamconstraints = {
      video: {
        displaySurface: 'monitor', // monitor, window, application, browser
        logicalSurface: true,
        cursor: 'always' // never, always, motion
      }
    };

    // above constraints are NOT supported YET
    // that's why overridnig them
    displaymediastreamconstraints = {
      video: true
    };

    if(navigator.mediaDevices.getDisplayMedia) {
      navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
    }
    else {
      navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
    }
  }

  function captureScreen(callback) {
    invokeGetDisplayMedia(function(target) {
      addStreamStopListener(target, function() {
        if(window.stopCallback) {
          window.stopCallback();
        }

      });
      callback(target);
    }, function(error) {
      console.error(error);
      alert('Unable to capture your screen. Please check console logs.\n' + error);
    });
  }

  function captureCallback(target) {
    video.srcObject = target;
    const checkbox = document.getElementById("convert-to-gif");
    checkbox.disabled = true;

    var recorder = RecordRTC(target, {
      type: 'video',
      mimeType: 'video/webm'
    });

    recorder.startRecording();

    window.stopCallback = function() {
      window.stopCallback = null;

      recorder.stopRecording(function() {
        var blob = recorder.getBlob();
        var fileUrl = URL.createObjectURL(blob);
        video.srcObject = null;
        video.src = fileUrl;

        target.stop();
        if(checkbox.checked === true) {
          convert(fileUrl).then(() => { checkbox.disabled = false });
        } else {
          recorder.save("screen_recording.webm");
          checkbox.disabled = false;
        }
        recorder.destroy();
        recorder = null;
      });
    };
  }

  function addStreamStopListener(stream, callback) {
    stream.addEventListener('ended', function() {
      callback();
      callback = function() {};
    }, false);
    stream.addEventListener('inactive', function() {
      callback();
      callback = function() {};
    }, false);
    stream.getTracks().forEach(function(track) {
      track.addEventListener('ended', function() {
        callback();
        callback = function() {};
      }, false);
      track.addEventListener('inactive', function() {
        callback();
        callback = function() {};
      }, false);
    });
  }

  document.getElementById('btn-start-recording').onclick = function() {
    this.disabled = true;
    captureScreen(captureCallback);
    document.getElementById('btn-stop-recording').disabled = false;
  };

  document.getElementById('btn-stop-recording').onclick = function() {
    this.disabled = true;
    window.stopCallback();
  };

  function promptDownload(fileURL) {
    var anchorTag = document.createElement('a');
    anchorTag.href = fileURL;
    anchorTag.target = '_blank';
    anchorTag.download = "converted_video.gif";
    document.body.appendChild(anchorTag);
    anchorTag.click();
    document.body.removeChild(anchorTag);
  }

  function showProgress({ ratio }) {
    if(!isNaN(ratio)) {
      message.innerHTML = `Complete: ${(ratio * 100.0).toFixed(2)}%`;
    }
    else {
      if(message.innerHTML == "/") {
        message.innerHTML = "-";
      }
      else if(message.innerHTML == "-") {
        message.innerHTML = "\\";
      }
      else {
        message.innerHTML = "/";
      }
    }
  }

  const convert = async (sourceFileUrl) => {
    if(!ffmpeg.isLoaded()) {
      message.innerHTML = 'Loading ffmpeg-core.js';
      await ffmpeg.load();
    }
    message.innerHTML = 'Start converting';
    ffmpeg.FS('writeFile', 'recording', await fetchFile(sourceFileUrl));
    await ffmpeg.run('-i', 'recording', '-vf', 'fps=10,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse', 'output.gif');
    message.innerHTML = 'Conversion complete.';
    const data = ffmpeg.FS('readFile', 'output.gif');
    const blob = new Blob([data.buffer], { type: 'image/gif' });
    const fileUrl = URL.createObjectURL(blob);
    promptDownload(fileUrl);
  }
  </script>
</body>
</html>
  1. This isn’t a query related to hosting support…

  2. Check your console inside inspect element. There is an error at line 16

and at line 1

Hi there,
I digged into your JS code (and console), you’ve two issues:

  1. setting the value of log as console.log, I suggest you to use const log = e => console.log(e); instead.

  2. You have to declare gUMbtn variabke:

var gUMbtn = document.getElementById("gUMbtn");

You’ve an issue on line 4:

  id = val => document.getElementById(val),

with this line, you’re picking an element with a specific id but not returning, so it’ll return null, hence that’s why script.js:16 Uncaught TypeError: Cannot set property ‘onclick’ of null occurs.
You’ve to change that code to this:

id = val => { return document.getElementById(val);}

Hope this helps and good luck with your project :slight_smile:

3 Likes

JS QUEEN. THE JS QUEEN.

2 Likes

You might have to click on the three dots and download it:
image


:thinking:

*Me with 200 IQ removes the s from https and website loades with no ssl error. :confused:

3 Likes

infinity IQ

2 Likes

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.