.js

self.addEventListener('install',function(event){
  console.log("Service Worker Installing Service Worker",event)

  /*
  event.waitUntil(
    caches.open('static')
    .then(function(cache){
    //  cache.add('/')
  //    cache.add('/index.html')
  //    cache.add('/src/js/app.js')
    //  cache.add('/src/css/styles.css')
    })
  ) */

})

self.addEventListener('activate',function(event){
  return self.clients.claim()
})
/*
self.addEventListener('fetch',function(event){
  event.respondWith(
    caches.match(event.request)
    .then(function(response){
      if(response) {
        return response
      } else {
        return fetch(event.request)
        .then(function(res){
          return caches.open('dynamic')
            .then(function(cache){
              cache.put(event.request.url, res.clone())
              return res
            })
        })
      }
    })
  )
}) */




let playerElement = document.getElementById("player")
let canvasElement = document.getElementById("canvas")
let takePictureButton = document.getElementById("takePictureButton")
let stopCamera = document.getElementById("stopCamera")
let geoLocationButton = document.getElementById("getUserLocationButton")
let enableNotificationsButton = document.getElementById("enableNotificationsButton")


function initializeMedia() {

  if('mediaDevices' in navigator) {
    navigator.mediaDevices.getUserMedia({ video : true })
    .then(function(stream){
      // playerElement is a video HTML element
      playerElement.srcObject = stream
    })
    .catch(function(error){
      // show image picker for devices that does not support
      // camera
      console.log(error)
    })
  }
}

function showNotification() {
  console.log("ss")
  new Notification("Subscribed...")
}

enableNotificationsButton.addEventListener('click',function(){

  if('Notification' in window) {
    Notification.requestPermission(function(result){

      if(result == "granted") {
          // notification permission has been granted ..
          showNotification()
      }

    })
  }

})

//initializeMedia()

stopCameraButton.addEventListener('click',function(){

  navigator.mediaDevices.getUserMedia({ video : true })
  .then(function(stream){
    stream.getTracks().forEach(track => track.stop())
  })
  playerElement.style.display = 'none'
})

// get user location button
getUserLocationButton.addEventListener('click',function(){

  if('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(function(position){
          console.log(position)
      },function(error){
          console.log(error)
      })
  }

})



takePictureButton.addEventListener('click',function(){
    playerElement.style.display = 'none'
    var context = canvasElement.getContext('2d')
    context.drawImage(playerElement,0,0,canvasElement.width, playerElement.videoHeight/(playerElement.videoWidth/canvasElement.width))
    playerElement.srcObject.getVideoTracks().forEach(function(track){
      track.stop()
    })
})



  <video id="player" autoplay></video>
    <canvas id="canvas" width="320px" height="240px"></canvas>
    <button id="takePictureButton">Take Picture</button>
    <button id="stopCameraButton">Stop Camera</button>
    <button id="getUserLocationButton">Get User Location</button>