# How do I switch camera when I click on a button

**URL:** <https://forum.deepar.ai/t/how-do-i-switch-camera-when-i-click-on-a-button/369>\
**Category:** SDK\
**Created:** [July 19, 2023, 9:17pm UTC](https://forum.deepar.ai/t/how-do-i-switch-camera-when-i-click-on-a-button/369 "2023-07-19T21:17:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nio\_xr](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/nio_xr/32/539_2.png) [@nio\_xr](https://forum.deepar.ai/u/nio_xr)\
**Post date:** [July 19, 2023, 9:17pm UTC](https://forum.deepar.ai/t/how-do-i-switch-camera-when-i-click-on-a-button/369/1 "2023-07-19T21:17:28Z")

</div>

I want to switch the camera with a button click. I know it can be done in the initialization. But say after I initialize with front camera, how do I change the feed to rear camera when a button is clicked. This is what I did, but it does not work

```
    deepAR.stopCamera();

    deepAR.startCamera({facingMode: "environment"});

```

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [July 31, 2023, 1:16pm UTC](https://forum.deepar.ai/t/how-do-i-switch-camera-when-i-click-on-a-button/369/2 "2023-07-31T13:16:34Z")

</div>

Hi, here’s a code snippet for switching the camera on the Web SDK

```auto
 function startExternalVideo() {
        cleanupVideoObjects();
        // create video element
        var video = document.createElement('video');
        video.muted = true;
        video.loop = true;
        video.controls = true;
        video.setAttribute('playsinline', 'playsinline');
        video.style.width = '100%';
        video.style.height = '100%';

        // put it somewhere in the DOM
        var videoContainer = document.createElement('div');
        videoContainer.appendChild(video);
        videoContainer.style.width = '1px';
        videoContainer.style.height = '1px';
        videoContainer.style.position = 'absolute';
        videoContainer.style.top = '0px';
        videoContainer.style.left = '0px';
        videoContainer.style['z-index'] = '-1';
        document.body.appendChild(videoContainer);
  
        videoObjects.videoContainer = videoContainer;
        videoObjects.video = video;
          
        navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
          try {
            video.srcObject = stream;
          } catch (error) {
            video.src = URL.createObjectURL(stream);
          }
          setTimeout(function() {
            video.play();
          }, 50);
        }).catch(function(error) {
            console.log('error in video play:', error);
        });

        // tell the DeepAR SDK about our new video element
        deepAR.setVideoElement(video, true);
          
        var loaderWrapper = document.getElementById('loader-wrapper');
        loaderWrapper.style.display = 'none';
      }

      function cleanupVideoObjects() {
        if (videoObjects.length > 0){  
            videoObjects.videoContainer.parentNode.removeChild(videoObjects.videoContainer);
            videoObjects.videoContainer = null;
            if (videoObjects.video.srcObject) {
              //getUserMedia starts a stream, all tracks on all streams need to be stoppedbefore calling getUserMedia again
              videoObjects.video.srcObject.getTracks().forEach(track => track.stop())
            }
            videoObjects.video.pause();
            videoObjects = {};
        }
      }

```