title: How to stop all previous video streaming in WebRTC MediaRecorder before flip camera?
body: <p>I have a problem on my PHP website.On mysite I am use navigator.MediaDevices.getUserMedia() webrtc samples from github for video recording its working fine but currently I wan't to give functionality to users to switch their device camera on mobile browsers.The code I'm using is below but its not working fine.</p>
  
  <p>my html code is,
      </p>
  
  <pre><code>        &lt;button  value="false" id="flipV" &gt;&lt;img src="&lt;?= Yii::$app-&gt;request-&gt;baseUrl ?&gt;/images/flip.png" height="22" width="22"&gt;&lt;/button&gt;
          &lt;video id="gum" autoplay muted&gt;&lt;/video&gt;
          &lt;video id="recorded" autoplay loop&gt;&lt;/video&gt;
  
          &lt;div&gt;
              &lt;button id="record" disabled&gt;Start Recording&lt;/button&gt;
              &lt;button id="play" disabled&gt;Play&lt;/button&gt;
              &lt;button id="download" disabled&gt;Download&lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>my js code is,</p>
  
  <pre><code>'use strict';
  var flipV = false;
  $(document).ready(function () {
      $("body").on("click", "#flipV", function () {
          if (flipV == false) {
              flipV = true;
          } else {
              flipV = false;
          }
          startVideo();
  
      });
  });
  /* globals MediaRecorder */
  
  var mediaSource = new MediaSource();
  mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
  var mediaRecorder;
  var recordedBlobs;
  var sourceBuffer;
  
  var gumVideo = document.querySelector('video#gum');
  var recordedVideo = document.querySelector('video#recorded');
  
  var recordButton = document.querySelector('button#record');
  var playButton = document.querySelector('button#play');
  var downloadButton = document.querySelector('button#download');
  recordButton.onclick = toggleRecording;
  playButton.onclick = play;
  downloadButton.onclick = download;
  
  // window.isSecureContext could be used for Chrome
  var isSecureOrigin = location.protocol === 'https:' ||
          location.hostname === 'localhost';
  if (!isSecureOrigin) {
      alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' +
              '\n\nChanging protocol to HTTPS');
      location.protocol = 'HTTPS';
  }
  
  var constraints = {audio: true, video: {facingMode: (flipV) ? "user" : "environment"}};
  
  function handleSuccess(stream) {
      recordButton.disabled = false;
      console.log('getUserMedia() got stream: ', stream);
      window.stream = stream;
      if (window.URL) {
          gumVideo.src = window.URL.createObjectURL(stream);
      } else {
          gumVideo.src = stream;
      }
  }
  
  function handleError(error) {
      console.log('navigator.getUserMedia error: ', error);
  }
  function startVideo() {
      navigator.mediaDevices.getUserMedia(constraints).
              then(handleSuccess).catch(handleError);
  }
  //
  function handleSourceOpen(event) {
      console.log('MediaSource opened');
      sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
      console.log('Source buffer: ', sourceBuffer);
  }
  
  function toggleRecording() {
      if (recordButton.textContent === 'Start Recording') {
          startRecording();
      } else {
          stopRecording();
          recordButton.textContent = 'Start Recording';
          playButton.disabled = false;
          downloadButton.disabled = false;
      }
  }
  
  function startRecording() {
      recordedBlobs = [];
      var options = {mimeType: 'video/webm;codecs=vp9'};
      if (!MediaRecorder.isTypeSupported(options.mimeType)) {
          console.log(options.mimeType + ' is not Supported');
          options = {mimeType: 'video/webm;codecs=vp8'};
          if (!MediaRecorder.isTypeSupported(options.mimeType)) {
              console.log(options.mimeType + ' is not Supported');
              options = {mimeType: 'video/webm'};
              if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                  console.log(options.mimeType + ' is not Supported');
                  options = {mimeType: ''};
              }
          }
      }
      try {
          mediaRecorder = new MediaRecorder(window.stream, options);
      } catch (e) {
          console.error('Exception while creating MediaRecorder: ' + e);
          alert('Exception while creating MediaRecorder: '
                  + e + '. mimeType: ' + options.mimeType);
          return;
      }
      console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
      recordButton.textContent = 'Stop Recording';
      playButton.disabled = true;
      downloadButton.disabled = true;
      mediaRecorder.onstop = handleStop;
      mediaRecorder.ondataavailable = handleDataAvailable;
      mediaRecorder.start(10); // collect 10ms of data
      console.log('MediaRecorder started', mediaRecorder);
  }
  
  function stopRecording() {
      mediaRecorder.stop();
      console.log('Recorded Blobs: ', recordedBlobs);
      recordedVideo.controls = true;
  }
  
  function play() {
      var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
      recordedVideo.src = window.URL.createObjectURL(superBuffer);
  }
  
  function download() {
      var blob = new Blob(recordedBlobs, {type: 'video/webm'});
      var url = window.URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = 'test.webm';
      document.body.appendChild(a);
      a.click();
      setTimeout(function () {
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
      }, 100);
  }
  </code></pre>