user-media-selector-demo.html

<style>
  user-media-selector {
    box-sizing: border-box;
    border: 1px solid #000;
    width: 600px;
    margin-bottom: 30px;
  }
  textarea {
    width: 600px;
    height: 200px;
  }
</style>
<script src="./node_modules/steal/steal.js">
  import stache from 'can-stache'
  import DefineMap from 'can-define/map/'
  import '~/user-media-selector'

  const template = stache(`
    <user-media-selector
      constraints:to="constraints"
    />
    <div>
      <textarea>{{stringify(constraints)}}</textarea>
    </div>
  `)
  const vm = new DefineMap({
    stringify (object) {
      return JSON.stringify(object, null, 2)
    }
  })
  document.body.appendChild(template(vm))
</script>