I am executing this code on localhost XAMPP Server
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video onclick="changeFilter(this);"width=200 height=200 id="video" controls autoplay></video> 
<p>
<button onclick="startWebcam();">Start WebCam</button>
<button onclick="stopWebcam();">Stop WebCam</button> 
</p>
 <script>
 navigator.getUserMedia = ( navigator.getUserMedia ||
                   navigator.webkitGetUserMedia ||
                   navigator.mozGetUserMedia ||
                   navigator.msGetUserMedia);
 var webcamStream;
 function startWebcam() {
 if (navigator.getUserMedia) {
 console.log("toto");
 navigator.getUserMedia (
    // constraints
    {
      video: true,
      audio: false
    },
    // successCallback
     function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      webcamStream = localMediaStream;
    },
    // errorCallback
       function(err) {
       console.log("The following error occured: " + err);
       }
     );
    } else {
    console.log("getUserMedia not supported");
      }  
     }
  function stopWebcam() {
  localMediaStream.stop();
  }
</script>
</body>
</html>
This code starts my webcam, but when I press the Stop WebCam button the console gives me the following error:
Uncaught TypeError: Cannot read property 'stop' of undefined function stopWebcam() { webcamStream.stop(); }
I am a JavaScript newbie and I can not see the issue here.
 
     
    