mocon · February 21, 2018 01:28
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en"
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <title>GumGum Design System</title>
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="stylesheet" href="https://assets.ggops.com/stable/theme-blue.css">
    </head>
    <body class="-m-a-3">
        <p class="-m-b-3"><span class="gds-text--code">getUserMedia()</span> test</p>
        <video id="player" class="-m-b-2" controls autoplay style="width: 100%; display: none"></video>
        <button id="shutter-android" class="gds-button gds-button--primary gds-button--block -m-b-2">
            Take Picture (Android)
        </button>
        <button id="button-ios" class="gds-button gds-button--primary gds-button--block -m-b-2">
            Take Picture (iOS)
            <input id="shutter-ios" type="file" accept="image/*" capture="user" style="position: absolute; display: block; top: 0; width: 100%; bottom: 0; left: 0; opacity: 0">
        </button>
        <canvas id="canvas" class="-block" style="width: 100%"></canvas>
    </body>
    <script>
        const supported = 'mediaDevices' in navigator;
        const player = document.getElementById('player');
        const shutterAndroid = document.getElementById('shutter-android');
        const buttonIos = document.getElementById('button-ios');
        const shutterIos = document.getElementById('shutter-ios');
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        const browserType = getMobileOperatingSystem();
        function getMobileOperatingSystem() {
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            if (/android/i.test(userAgent)) return 'Android';
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
            return 'unknown';
        }
        if (!supported) alert('getUserMedia() not supported :(');
        switch (browserType) {
            case 'iOS':
                shutterAndroid.style.display = 'none';
                shutterIos.addEventListener('click', () => {
                    console.log('Trigger user camera on iOS');
                });

                shutterIos.addEventListener('change', () => {
                    const photo = shutterIos.files[0];
                    const reader = new FileReader();
                    const myImage = new Image();
                    const { width, height } = canvas;
                    const dataUrl = reader.readAsDataURL(photo);

                    reader.onload = (event) => {
                        myImage.src = event.target.result;
                        console.log(myImage);
                    };
                    myImage.onload = (event) => {
                        console.log('image loaded');
                        context.drawImage(myImage, 0, 0, 300, 200);
                    }
                });
                break;
            case 'Android':
                player.style.display = 'block';
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(stream => {
                        player.srcObject = stream;
                        setTimeout(() => {
                            const { width, height } = player.getBoundingClientRect();
                            canvas.width = width;
                            canvas.height = height;
                        }, 2000);
                    });
                buttonIos.style.display = 'none';
                shutterAndroid.addEventListener('click', () => {
                    const { width, height } = canvas;
                    context.drawImage(player, 0, 0, width, height);
                    // player.srcObject.getVideoTracks().forEach(track => track.stop());
                    console.log(canvas.toDataURL());
                });
                break;
            default:
                console.error('Device not supported');
                break;
        }
    </script>
 </html>
	<!doctype html>
	<html lang="en"
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
	<title>GumGum Design System</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" href="https://assets.ggops.com/stable/theme-blue.css">
	</head>
	<body class="-m-a-3">
	<p class="-m-b-3"><span class="gds-text--code">getUserMedia()</span> test</p>
	<video id="player" class="-m-b-2" controls autoplay style="width: 100%; display: none"></video>
	<button id="shutter-android" class="gds-button gds-button--primary gds-button--block -m-b-2">
	Take Picture (Android)
	</button>
	<button id="button-ios" class="gds-button gds-button--primary gds-button--block -m-b-2">
	Take Picture (iOS)
	<input id="shutter-ios" type="file" accept="image/*" capture="user" style="position: absolute; display: block; top: 0; width: 100%; bottom: 0; left: 0; opacity: 0">
	</button>
	<canvas id="canvas" class="-block" style="width: 100%"></canvas>
	</body>
	<script>
	const supported = 'mediaDevices' in navigator;
	const player = document.getElementById('player');
	const shutterAndroid = document.getElementById('shutter-android');
	const buttonIos = document.getElementById('button-ios');
	const shutterIos = document.getElementById('shutter-ios');
	const canvas = document.getElementById('canvas');
	const context = canvas.getContext('2d');
	const browserType = getMobileOperatingSystem();
	function getMobileOperatingSystem() {
	const userAgent = navigator.userAgent \|\| navigator.vendor \|\| window.opera;
	if (/android/i.test(userAgent)) return 'Android';
	if (/iPad\|iPhone\|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
	return 'unknown';
	}
	if (!supported) alert('getUserMedia() not supported :(');
	switch (browserType) {
	case 'iOS':
	shutterAndroid.style.display = 'none';
	shutterIos.addEventListener('click', () => {
	console.log('Trigger user camera on iOS');
	});

	shutterIos.addEventListener('change', () => {
	const photo = shutterIos.files[0];
	const reader = new FileReader();
	const myImage = new Image();
	const { width, height } = canvas;
	const dataUrl = reader.readAsDataURL(photo);

	reader.onload = (event) => {
	myImage.src = event.target.result;
	console.log(myImage);
	};
	myImage.onload = (event) => {
	console.log('image loaded');
	context.drawImage(myImage, 0, 0, 300, 200);
	}
	});
	break;
	case 'Android':
	player.style.display = 'block';
	navigator.mediaDevices.getUserMedia({ video: true })
	.then(stream => {
	player.srcObject = stream;
	setTimeout(() => {
	const { width, height } = player.getBoundingClientRect();
	canvas.width = width;
	canvas.height = height;
	}, 2000);
	});
	buttonIos.style.display = 'none';
	shutterAndroid.addEventListener('click', () => {
	const { width, height } = canvas;
	context.drawImage(player, 0, 0, width, height);
	// player.srcObject.getVideoTracks().forEach(track => track.stop());
	console.log(canvas.toDataURL());
	});
	break;
	default:
	console.error('Device not supported');
	break;
	}
	</script>
	</html>