n0bisuke/app.js Secret

## app.js
const app = new Vue({
    el: '#app',
    data: {
        audios: [],
        videos: [],
        selectedAudio: '',
        selectedVideo: ''
    },

    methods: {
        onChange: function (){
            if(this.selectedAudio != '' && this.selectedVideo != ''){
                this.connectLocalCamera();
            }
        },

        connectLocalCamera: async function (){
            const constraints = {
                audio: this.selectedAudio ? { deviceId: { exact: this.selectedAudio } } : false,
                video: this.selectedVideo ? { deviceId: { exact: this.selectedVideo } } : false
            }

            const stream = await navigator.mediaDevices.getUserMedia(constraints);
            document.getElementById('my-video').srcObject = stream;
        }
    },

    mounted: async function () {
        //デバイスへのアクセス
        const deviceInfos = await navigator.mediaDevices.enumerateDevices();

        //オーディオデバイスの情報を取得
        deviceInfos
        .filter(deviceInfo => deviceInfo.kind === 'audioinput')
        .map(audio => this.audios.push({text: audio.label || `Microphone ${this.audios.length + 1}`, value: audio.deviceId}));

        //カメラの情報を取得
        deviceInfos
        .filter(deviceInfo => deviceInfo.kind === 'videoinput')
        .map(video => this.videos.push({text: video.label || `Camera  ${this.videos.length - 1}`, value: video.deviceId}));

        console.log(this.audios, this.videos);
    }
});

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <video id="my-video" muted="true" width="500" autoplay playsinline></video>

        マイク:
        <select v-model="selectedAudio" @change="onChange">
          <option disabled value="">Please select one</option>
          <option v-for="(audio, key, index) in audios" v-bind:key="index" :value="audio.value">
            {{ audio.text }}
          </option>
        </select>

        カメラ:
        <select v-model="selectedVideo" @change="onChange">
          <option disabled value="">Please select one</option>
          <option v-for="(video, key, index) in videos" v-bind:key="index" :value="video.value">
            {{ video.text }}
          </option>
        </select>

    </div>

    <script src="https://jp.vuejs.org/js/vue.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
	const app = new Vue({
	el: '#app',
	data: {
	audios: [],
	videos: [],
	selectedAudio: '',
	selectedVideo: ''
	},

	methods: {
	onChange: function (){
	if(this.selectedAudio != '' && this.selectedVideo != ''){
	this.connectLocalCamera();
	}
	},

	connectLocalCamera: async function (){
	const constraints = {
	audio: this.selectedAudio ? { deviceId: { exact: this.selectedAudio } } : false,
	video: this.selectedVideo ? { deviceId: { exact: this.selectedVideo } } : false
	}

	const stream = await navigator.mediaDevices.getUserMedia(constraints);
	document.getElementById('my-video').srcObject = stream;
	}
	},

	mounted: async function () {
	//デバイスへのアクセス
	const deviceInfos = await navigator.mediaDevices.enumerateDevices();

	//オーディオデバイスの情報を取得
	deviceInfos
	.filter(deviceInfo => deviceInfo.kind === 'audioinput')
	.map(audio => this.audios.push({text: audio.label \|\| `Microphone ${this.audios.length + 1}`, value: audio.deviceId}));

	//カメラの情報を取得
	deviceInfos
	.filter(deviceInfo => deviceInfo.kind === 'videoinput')
	.map(video => this.videos.push({text: video.label \|\| `Camera ${this.videos.length - 1}`, value: video.deviceId}));

	console.log(this.audios, this.videos);
	}
	});
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<div id="app">
	<video id="my-video" muted="true" width="500" autoplay playsinline></video>

	マイク:
	<select v-model="selectedAudio" @change="onChange">
	<option disabled value="">Please select one</option>
	<option v-for="(audio, key, index) in audios" v-bind:key="index" :value="audio.value">
	{{ audio.text }}
	</option>
	</select>

	カメラ:
	<select v-model="selectedVideo" @change="onChange">
	<option disabled value="">Please select one</option>
	<option v-for="(video, key, index) in videos" v-bind:key="index" :value="video.value">
	{{ video.text }}
	</option>
	</select>

	</div>

	<script src="https://jp.vuejs.org/js/vue.min.js"></script>
	<script src="app.js"></script>
	</body>
	</html>