text: (function(){"use strict";var Webcam={props:["fps","device"],data:function(){return{framerate:this.fps,video:null,constraints:null}},methods:{initCam:function(){this.constraints={audio:false,video:{deviceId:this.device,width:1920,height:1080,frameRate:this.fps}};this.video=document.querySelector("video");const vm=this;navigator.mediaDevices.getUserMedia(vm.constraints).then(function(mediaStream){vm.video.srcObject=mediaStream;vm.video.onloadedmetadata=function(e){vm.video.play()}}).catch(function(err){console.log(err.name+": "+err.message)})}},mounted(){this.initCam()},watch:{fps:function(){this.initCam()},device:function(){this.initCam()}},template:`\n    <div>\n      <video></video>\n    </div>\n  `};new Vue({el:"#app",components:{Webcam:Webcam},data:()=>({fps:6,cams:null,device:undefined}),methods:{getWebcams:function(){return new Promise((resolve,reject)=>{navigator.mediaDevices.enumerateDevices().then(devices=>{let filtered=devices.filter(device=>{return device.kind==="videoinput"});resolve(filtered);this.cams=filtered})})},swapCams:function(i){this.device=this.cams[i].deviceId}},mounted:function(){this.getWebcams()},template:`\n    <div style="display: relative">\n      <div class="header_inverse" style="position: absolute; top:0; right: 0; left: 0">\n        <div>\n        <a href="https://designstem.github.io/homepage">Home</a>\n        →<a href="https://designstem.github.io/vinylfrequency">Vinyl Frequency</a>\n        → Vinyl Frequency\n        </div>\n      </div> \n      <Webcam v-if="device" :fps="fps" :device="device"></Webcam>\n      <div class="toolbar">\n        <div class="button_secondary" style="margin-right: 0.5rem" v-for="(cam, index) in cams" @click="swapCams(index)">Cam {{index}}</div>\n        <input type="number" size="3" v-if="device" v-model="fps" class="fps-input"  />\n      </div>\n      \n    </div>\n  `})})();
  