Updated date:

How to Screen Record: Take a Screenshot or Video on Windows 10

Author:

I made a JavaScript program to record my display. Then I tested some other screen recorders.

What I see when I press Windows logo key + G. It is the Xbox Game Bar.

What I see when I press Windows logo key + G. It is the Xbox Game Bar.

Screenshots

A screenshot or screen capture is a copy of your computer monitor's display. It is a picture that shows exactly what you saw, excluding the mouse pointer. You can share the image or use it as a reference. They can replace typing or talking. Using pictures is faster and more efficient than using words.

Show high scores, products, special moments, problems, solutions or proof. Do a quick edit or convert to another file type. Anything on your computer display could be saved as a JPG file. Screenshots make storing and sharing information easier.

Copy and Snip

On a Windows computer pressing the print screen key copies the whole screen to the clipboard . Pressing Alt + PrtScn copies the active window. The key is usually located at the top of the keyboard near the F12 key. On some computers you may also need to press the Fn key. Copy the display then paste it into a paint program so you can save it.

Windows has a snipping tool that allows you to capture parts of the screen. Press the Windows logo key + shift + S and select rectangular, freeform, windows or full screen to start snipping. The first two options require you to drag the mouse over the area you want to copy. You still need to paste the image into a paint program.

Another option is to open Snipping Tool or Snip & Sketch. Snipping Tool is being replaced. Use Snip & Sketch if you have it. Go to the Windows search box and type snip. Then click on the program you want to open. Instead of adding the image to the clipboard it will be added to the Snip & Sketch canvas.

I could use a hundred words to tell you about the program I made or I could use 9 words and a screen grab.

Screenshot of a personal question and answer search engine.

Screenshot of a personal question and answer search engine.

Screen Recorder with Audio

A screen recording is a video of your computer monitor or phone display. People use screen recorders to make gaming and how to videos. Instead of telling people what you did you can show them. They are great for giving step by step instructions. Gamers make gameplay videos and other gamers watch them.

Use them to educate or show off. Watching other people play games can be as entertaining as watching a TV show and it might help you get better at the game. I would spend 10 minutes watching a person play a game I did not have. Most of the screen recordings I watch are how to videos.

Videos can contain audio. You should be able to record the sounds coming from your computer and your microphone if you have one. Some people make a lot of money posting their screen recordings on video sites like YouTube. If you want to capture the moment then make a video.

Consider turning videos into GIFs. They play in e-mails and they often get more views on social media sites. Converting a video to a GIF is easy. The hardest part is picking the size and duration. You may need to display a smaller area.

XBox Game Bar

I recently found out that my Windows 10 laptop has the Xbox Game Bar app. It allows gamers to record their game play but it is not limited to games. When you want to start recording press Windows logo + G to open the game bar and hit record. You can also find the app by going to the Windows search bar and typing 'game bar'.

Open settings, gaming, capture to change the video quality, frames per second, audio and mouse capture. To see if it is enabled select Game bar from the gaming section. The files will be saved in “C:\Users\[username]\Videos\Captures". When I tried it the first time I noticed the quality was not very good. So I changed it from standard to high.

The video below is my first XBox Game Bar video. I could not get it to work while the window was full screen and it did not record me opening the file explorer to find the photo. It only captured the browser window. After creating the video I edited it in a video editor to reduce the file size. Use the full screen viewing option to make it easier to read the text.

CaptureScreen.htm

Before I knew I had an XBox Game Bar on my Windows computer I made a JavaScript program to make screen recordings. If you can't use the game bar then you can try using it. JavaScript programs slow down when the HTML page is no longer visible. So it works best when you are using two monitors or a split screen.

The Screen Capture window should be visible while you are recording something else. Drag a window to the left & another to the right to split the display. Copy the code below, paste it into a text editor and save it as CaptureScreen.htm. Open the html file to run the program.

Record your entire screen, an application window or a browser tab. It is good for making how to videos because it shows everything you do. There was some lag. So it might not be fast enough for action games.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="Capture Screen" name="title">
<title>Screen Capture</title>  
</head>  
<body><center>
<p><button id="display" onclick="DisplayIt();" >Start Capture</button>&nbsp; <button id="RecordButton" style="width: 120px;" onclick="RecordIt()">Start Recording</button> <input class="CheckB" id="AudioCheck" type="checkbox">Audio</p>
<video id="video" autoplay style="display:none;"></video><audio id="audioElement" style="display:none;"></audio>
<canvas id="canvas" width=860 height=600 style="display:initial;border:1px solid #d3d3d3;visibility:visible;background-color: #33FFF3;"></canvas>

<script>
const canvas=document.getElementById("canvas"),Context=canvas.getContext("2d");canvas.width=window.innerWidth;canvas.height=window.innerHeight;
const Audio=document.getElementById("audioElement"),VideoE = document.getElementById("video");

//Capture Display
var Displaying=false,Display=document.getElementById("display"),AudioCheck=document.getElementById("AudioCheck");
function DisplayIt()
{
  if(!Displaying) {Display.innerHTML="Stop Capture";Displaying=true;startCapture();} else {Display.innerHTML="Start Capture";Displaying=false;stopCapture();}
}

var displayMediaOptions = { video: {cursor: "motion"}, audio: false}; //cursor part only works on some browsers
async function startCapture() { try { VideoE.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);  } catch(e) { } }

function stopCapture(evt) {let tracks = VideoE.srcObject.getTracks();tracks.forEach(track => track.stop());VideoE.srcObject = null;}

function DrawToCanvas() {
 canvas.width=VideoE.videoWidth; canvas.height=VideoE.videoHeight;
 Context.drawImage(VideoE,0,0,canvas.width,canvas.height,0,0,canvas.width,canvas.height);requestAnimationFrame(DrawToCanvas);
}

// Record
var recordB=document.getElementById("RecordButton"),stream2,recorder,capturing = false;
function RecordIt()
{
   if(!capturing)
   {
      stream2=canvas.captureStream();var vStream;
      if(AudioCheck.checked)
      {
         try { //capture audio
            {vStream = Audio.captureStream();}  //VideoE does not have audio stream 
            stream2.addTrack(vStream.getAudioTracks()[0]); //can only add one
         }catch(e){}
      }
      recorder = new MediaRecorder(stream2, {
      mimeType: "video/webm",audioBitsPerSecond: 128000,videoBitsPerSecond: 5000000
      })
      capturing = true;recorder.start();
      recorder.addEventListener('dataavailable', finishCapturing);recordB.innerHTML="Stop Recording";
   }
   else { capturing = false;recorder.stop();recordB.innerHTML="Start Recording";}
}

function finishCapturing(e) { //called when dataavailable, download file to computer
   capturing = false;
   var videoData = [ e.data ],blob = new Blob(videoData, { 'type': 'video/webm' }); //only one that works with the canvas,
   var videoURL = URL.createObjectURL(blob); //A File, Blob or MediaSource object to create an object URL for.
   var link = document.createElement('a');link.style.display='none';link.href=videoURL;link.download = 'ScreenCapture.webm';document.body.appendChild(link);link.click();link.remove();
}

//Audio
function MuteAudio(){ Audio.muted=true;Audio.removeEventListener('canplay',MuteAudio); }

function StartAudio() //just need audio.
{
   try{ //not using webcam so set video to false
       navigator.mediaDevices.getUserMedia({audio: true, video: false})
      .then(function(stream) { Audio.addEventListener('canplay', MuteAudio);Audio.srcObject = stream; })
   }catch(e){}
}

StartAudio();DrawToCanvas();
</script>

</html>

Finding Screen Recorders

Windows 10 comes with a built-in screen recorder, the Xbox Game Bar. If you downloaded a video editor then you may have another one. When I got the VSDC Free Video Editor to edit my videos I also got their screen recorder. It can record the desktop, browser windows, the file explorer, games and other applications.

Currently there are 3 screen recorders on my computer counting the one I made in JavaScript. Find more by searching for "screen recorder windows 10". Most of them cost money. You could probably get the results you want using the ones I mentioned. Take the video then use the Photos app or another video editor to trim it or add text.

Start with what you already have. If it does not give you the results you want then try another one. You probably would not need HD videos with a high frame rate to copy your display unless you are doing it for money.

Extending Your Display

Switch to a better screen or use two monitors at once. Use an HDMI cable to connect your computer to a TV or an extra monitor. Then go to the display settings and choose one of the Multiple display options. You could keep windows open on the first one while you record the 2nd.

Using two screens is like having an open book with two visible pages. It can increase productivity and maybe even reduce stress. Switching from one window to another over and over again can be tedious. TV displays are often larger and provide a better picture. They may be too big to use on a regular basis but they are good for showing off HD photos and videos.

I like to use a 2nd monitor when I am recording my display.

Fair Use

You can record TV shows and movies but you don't have the right to distribute them. The content on your TV screen is copyrighted. So is most of the content on your computer screen. If you did not create it then you may not have the right to post it to websites. Posting other people's content can get you in trouble.

A screenshot is a copy of someone's work. Fair use lets people display copyrighted images and text for educational purposes. I am not a copyright expert. Based on what I read it is not fair use if the copy reduces the value of the original. If you are taking money or traffic away from the page you copied then it is not legal. If you post the copy just to make money from it then you are violating copyright laws.

Before posting screen captures to websites make sure you are not competing against the people that created the content. If it is free advertising then it is usually okay. When in doubt ask for permission. Include a link to the source with the photo when appropriate. Sometimes it is better to just provide a link to a webpage or use one of the sharing options.

You may need to edit the image or video so it does not show everything or to reduce the size.

  • How to Make a Personal Question and Answer Search En...
    Search engines are good for finding information on almost anything but you often end up with too much information. Making your own is good for finding the answers you want. Learn how to make a personal search engine or just copy and paste the code in
  • How to Turn a Photo Into a Painting or Drawing With ...
    Take a picture with your camera then make it look like a drawing or painting using color filters. Paintings and drawings can be more interesting to look at than regular photos. If you don't have the time, materials or the skill to make art by hand yo
  • How to Create 3D Images and Videos from 2D
    Learn how to convert 2D to 3D. Making three-dimensional photos can be easy and quick. I can make a good three dimensional image in 30 seconds. Why settle for flat pictures when you can add the illusion of depth. It requires special glasses but they a
  • How to Make GIFs From Videos and Photos
    I started making animations while I was learning how to make 3D images. Learn how to make animated GIFs from your videos and photos.

Images are Better Than Words

Computer screens display a digital picture that is easy to copy and share. Showing an image is almost always better than describing a photo in words. Taking a video of you doing something is better than writing about it. Pictures are more accurate and they take less time to process the information. Use a few words with the picture to provide context.

It can take a large number of words to accurately describe a photo and finding the right words can be difficult. When the images on your display are worth recording use a screen recorder or take a picture. The ability to copy your screen is powerful. Don't abuse it by stealing other people's content. Use it to quickly share information.

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2021 Michael H

Related Articles