demo · v150

Constraint Configurator

The <usermedia> element accepts capture constraints through setConstraints(). Build your constraint set with the controls, watch the generated setup code update live, then activate the native element when supported or the fallback button when not.

Checking <usermedia> support…
Presets:
Constraint controls
VIDEO
Facing mode
Width (ideal)
Height (ideal)
Frame rate (ideal fps)
AUDIO
Sample rate (Hz)
Generated markup & getUserMedia()

        

      

    


    

      
        
      
      
    


    

      

        
Camera preview

        
      

      

        
Negotiated settings

        
Click "Test constraints" to see negotiated track settings.

      

    

  


  
<!-- usermedia element: constraints configured before activation -->
<usermedia id="capture">
  <button>Start camera fallback</button>
</usermedia>

<script>
  const capture = document.getElementById('capture');
  capture.setConstraints({
    video: { width: { ideal: 1280 }, facingMode: "user" },
    audio: { echoCancellation: true }
  });

  capture.addEventListener('stream', () => {
    document.querySelector('video').srcObject = capture.stream;
  });
</script>


  

    
see also

    
  

  

    
implementation reference

    
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗