kaiser355/dont smile Secret

## dont smile
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>１人笑ってはいけない</title>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <h1>１人笑ってはいけないゲーム</h1>
    <video id="video" width="640" height="480" autoplay></video>
    <div id="app">
        <p v-if="message">{{message}}</p>
    </div>

    <audio id="sound-file" preload="auto">
        <source src="https://nervous-nightingale-c77e02.netlify.app/sound-out.mp3" type="audio/mp3" controls>
    </audio>

    <script>
        // Model URL
        const imageModelURL = 'https://teachablemachine.withgoogle.com/models/JwlojuslA/';

        async function main() {
            // カメラからの映像取得
            const stream = await navigator.mediaDevices.getUserMedia({
                audio: false,
                video: true,
            });
            // html内のidがvideoのdomを取得
            const video = document.getElementById('video');
            // videoにカメラ映像を適用
            video.srcObject = stream;

            // 自作モデルのロード
            classifier = ml5.imageClassifier(
                imageModelURL + 'model.json',
                video,
                modelLoaded
            );
            // モデルのロード完了時に実行される
            function modelLoaded() {
                console.log('Model Loaded!');
            }
            // 繰り返し検出処理
            classifier.classify(onDetect);
            function onDetect(err, results) {
                if (results[0]) {
                    console.log(results[0].label);
                    if (results[0].label === 'ニコニコ') {
                        console.log('アウト！')
                        // [FIX] sound 関数実行
                        sound();
                        const app = new Vue({
                            el: '#app',
                            data: {
                                message: 'アウト！',
                            },
                        });
                    }
                }
                classifier.classify(onDetect);
            }
            function sound() {
                // 初回以外は音声ファイルを巻き戻す(再生位置[秒]を0に設定する)
                if (typeof (document.getElementById('sound-file').currentTime) != 'undefined') {
                    document.getElementById('sound-file').currentTime = 0;
                }
                //音声ファイルを再生する
                document.getElementById('sound-file').play();
            }
        }
        main();
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>１人笑ってはいけない</title>
	<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
	<h1>１人笑ってはいけないゲーム</h1>
	<video id="video" width="640" height="480" autoplay></video>
	<div id="app">
	<p v-if="message">{{message}}</p>
	</div>

	<audio id="sound-file" preload="auto">
	<source src="https://nervous-nightingale-c77e02.netlify.app/sound-out.mp3" type="audio/mp3" controls>
	</audio>

	<script>
	// Model URL
	const imageModelURL = 'https://teachablemachine.withgoogle.com/models/JwlojuslA/';

	async function main() {
	// カメラからの映像取得
	const stream = await navigator.mediaDevices.getUserMedia({
	audio: false,
	video: true,
	});
	// html内のidがvideoのdomを取得
	const video = document.getElementById('video');
	// videoにカメラ映像を適用
	video.srcObject = stream;

	// 自作モデルのロード
	classifier = ml5.imageClassifier(
	imageModelURL + 'model.json',
	video,
	modelLoaded
	);
	// モデルのロード完了時に実行される
	function modelLoaded() {
	console.log('Model Loaded!');
	}
	// 繰り返し検出処理
	classifier.classify(onDetect);
	function onDetect(err, results) {
	if (results[0]) {
	console.log(results[0].label);
	if (results[0].label === 'ニコニコ') {
	console.log('アウト！')
	// [FIX] sound 関数実行
	sound();
	const app = new Vue({
	el: '#app',
	data: {
	message: 'アウト！',
	},
	});
	}
	}
	classifier.classify(onDetect);
	}
	function sound() {
	// 初回以外は音声ファイルを巻き戻す(再生位置[秒]を0に設定する)
	if (typeof (document.getElementById('sound-file').currentTime) != 'undefined') {
	document.getElementById('sound-file').currentTime = 0;
	}
	//音声ファイルを再生する
	document.getElementById('sound-file').play();
	}
	}
	main();
	</script>
	</body>

	</html>