Web RTC - Sound and Microphone Check

index.html

<main class="has-background-dark">
  <div class="is-family-sans-serif  has-text-white has-text-centered">
  <h1 class="is-size-1 has-text-centered is-uppercase has-text-weight-bold">Sound check!</h1>
  <p class="">See if your microphone and headphones are setup properly</p>
  <p> For the Microphone test, a prompt will appear asking for permission to access your select output device </p>
    <p>If you are not using headphones, it'll have a loop feedback</p>
    <p></p>
  <button class="button is-primary is-fullwidth is-large" id="micTest" type="button">Test Microphone</button>
  
  <button class="button is-link is-light is-fullwidth is-medium" id="soundTest" type="button">Test Headphone/Speakers</button>
    </div>
</main>

script.js

// Based On https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/audio

function handleSuccess(stream) {
  if (window.stream) {
    window.stream.getAudioTracks().forEach(track => track.stop());
    window.stream = null;
  } else {
    const audio = document.createElement('audio');
    audio.controls = true;
    audio.autoplay = true;
    window.stream = stream;
    audio.srcObject = stream;

    stream.oninactive = function() {
      console.log('Stream ended');
    };
  }
}

function handleError(e){
  console.log("ruin", e.message);
}

document.querySelector("#micTest").addEventListener('click', function(){
  if ( window.stream ) {
    this.innerText = "Test Microphone";
  } else {
    this.innerText = "Stop Test";
  }
  if (navigator.mediaDevices) {
    const constraints = window.constraints = {
      audio: true, 
      video: false
    }
    navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError)
  }
});

document.querySelector('#soundTest').addEventListener('click', function(){
    const audio = document.createElement('audio');
    audio.controls = true;
    audio.autoplay = true;
    audio.src = 'https://teste-sdk-rs.s3.amazonaws.com/Purr.wav';
})

style.scss

// Nothing here is related with the bare bone of the project

#micTest::before {
  content: '';
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGlkPSJzdmdfMiIgZD0ibTEyLDE2YzIuMjA2LDAgNCwtMS43OTUgNCwtNGwwLC02YzAsLTIuMjA2IC0xLjc5NCwtNCAtNCwtNHMtNCwxLjc5NCAtNCw0bDAsNmMwLDIuMjA1IDEuNzk0LDQgNCw0eiIvPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGlkPSJzdmdfMyIgZD0ibTE5LDEybDAsLTJjMCwtMC41NTIgLTAuNDQ3LC0xIC0xLC0xcy0xLDAuNDQ4IC0xLDFsMCwyYzAsMi43NTcgLTIuMjQzLDUgLTUsNXMtNSwtMi4yNDMgLTUsLTVsMCwtMmMwLC0wLjU1MiAtMC40NDcsLTEgLTEsLTFzLTEsMC40NDggLTEsMWwwLDJjMCwzLjUyIDIuNjEzLDYuNDMyIDYsNi45MmwwLDEuMDhsLTMsMGMtMC41NTMsMCAtMSwwLjQ0NyAtMSwxczAuNDQ3LDEgMSwxbDgsMGMwLjU1MywwIDEsLTAuNDQ3IDEsLTFzLTAuNDQ3LC0xIC0xLC0xbC0zLDBsMCwtMS4wOGMzLjM4NywtMC40ODggNiwtMy40IDYsLTYuOTJ6Ii8+CiA8L2c+Cjwvc3ZnPg==");
  background-size: contain;
  display: block;
  width: 20px;
  height: 20px;
}

#soundTest::before {
  content: '';
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoKIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSJub25lIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNDAyIiB3aWR0aD0iNTgyIiB5PSItMSIgeD0iLTEiLz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBmaWxsPSIjMjE2MGM0IiBpZD0iWE1MSURfMjc1XyIgZD0ibTk1MCw1ODAuN2wwLDI0NS43YzAsMjkuOCAtMjQuMyw1NC4xIC01NC4xLDU0LjFsLTc4LjcsMGMtMjkuOCwwIC01NC4xLC0yNC4zIC01NC4xLC01NC4xbDAsLTIwMS44YzAsLTI5LjkgMjQuMywtNTQuMSA1NC4xLC01NC4xbDcyLjcsMGMtNS40LC0yMDMuMyAtMTcyLjgsLTM2NyAtMzc3LjgsLTM2N2wtMC4yLDBjLTIwNSwwIC0zNzIuMywxNjMuNyAtMzc3LjgsMzY3bDcyLjcsMGMyOS44LDAgNTQuMSwyNC4zIDU0LjEsNTQuMWwwLDIwMS43YzAsMjkuOCAtMjQuMyw1NC4xIC01NC4xLDU0LjFsLTc4LjcsMGMtMjkuOCwwIC01NC4xLC0yNC4zIC01NC4xLC01NC4xbDAsLTI0NS42YzAsLTU5LjEgMTEuNiwtMTE2LjQgMzQuNSwtMTcwLjNjMjIuMSwtNTIuMSA1My43LC05OC44IDkzLjksLTEzOWM0MC4yLC00MC4xIDg3LC03MS42IDEzOS4yLC05My42YzU0LC0yMi44IDExMS4zLC0zNC4zIDE3MC40LC0zNC4zbDAuMiwwYzU5LjEsMCAxMTYuNCwxMS41IDE3MC40LDM0LjNjNTIuMiwyMiA5OSw1My41IDEzOS4yLDkzLjZjNDAuMiw0MC4xIDcxLjgsODYuOSA5My45LDEzOWMyMi43LDUzLjkgMzQuMywxMTEuMiAzNC4zLDE3MC4zeiIvPgogIDxwYXRoIGZpbGw9IiMyMTYwYzQiIGlkPSJYTUxJRF8xMTFfIiBkPSJtNjgyLDM1Ny44Yy00OC44LC0zOS40IC0xMTAuMSwtNjAuOCAtMTcyLjgsLTYwLjhsLTAuMSwwYy02Mi43LDAgLTEyMS45LDIwLjQgLTE3MS4xLDU5LjZsLTM3LjQsLTQ3LjFjMjksLTIzLjEgNjEuNCwtNDAuOSA5Ni4xLC01My4zYzM2LC0xMi45IDczLjgsLTE5LjIgMTEyLjMsLTE5LjJsMC4xLDBjMzksMCA3Ny4yLDYuNCAxMTMuNSwxOS41YzM1LjEsMTIuNyA2Ny43LDMxIDk2LjksNTQuNmwtMzcuNSw0Ni43eiIvPgogPC9nPgo8L3N2Zz4=");
  background-size: contain;
  display: block;
  width: 20px;
  height: 20px;
}

main {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  
  div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.1/css/bulma.min.css" rel="stylesheet" />

web-rtc-sound-and-microphone-check.markdown

Web RTC - Sound and Microphone Check

An example usage of the Web RTC API for testing the output device of the client's pc.

A Pen by Rhamses on CodePen.

License.