porfidev · August 23, 2016 23:08
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Subir Archivo o tomar foto</title>
 </head>
 <style>
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
    }

    label {
        pointer: cursor;
        /* Style as you please, it will become the visible UI component. */
    }

    #upload-photo {
        opacity: 0;
        position: absolute;
        z-index: -1;
    }

    #foto {
        display: none;
    }
 </style>
 <body>


 <form>
    <fieldset>
        <legend>Documento</legend>
        <button type="button">Agregue un Documento</button>
    </fieldset>
    <fieldset>
        <legend>Fotografia</legend>
        <button type="button">Agregue una fotografía</button>
    </fieldset>
 </form>


 <!-- Modal -->
 <div id="photomodal" class="modal">
    <div class="modal-content">
        <p> Agregando contenido </p>
        <div class="drag-drop">
            <div>
                <label for="upload-photo">Seleccione un arvhivo</label>
                <input type="file" name="photo" id="upload-photo" />
            </div>
            <hr>
            <div>
                <button type="button" onclick="activarVideo();">Tomar una foto</button>
            </div>

            <div id="foto">
                <video id='v'></video>
                <button id="snapButton"> tomar </button>
                <h4>A sample page showing HTML5, the VFP Web Browser control and Google Chrome Frame</h4>
                <canvas id="canvas" width="640" height="480"></canvas>
            </div>


        </div>
    </div>
 </div>
 <script>
    window.addEventListener('DOMContentLoaded', function() {
        // Get the modal
        var modal = document.getElementById('photomodal');

        // Get the button that opens the modal
        var btn = document.getElementsByTagName('button');

        // Get the <span> element that closes the modal
 //        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on the button, open the modal
        btn[0].onclick = function() {
            modal.style.display = "block";
        };

        // When the user clicks on <span> (x), close the modal
 //        span.onclick = function() {
 //            modal.style.display = "none";
 //        };

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    });

    function activarVideo(){
        var divFoto = document.getElementById('foto');
        divFoto.style.display = "block";

        var v = document.getElementById('v');

        navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia);
        if (navigator.getUserMedia)
        {
            // Request access to video only
            navigator.getUserMedia(
                    {
                        video:true,
                        audio:false
                    },
                    function(stream)
                    {
                        var url = window.URL || window.webkitURL;
                        v.src = url ? url.createObjectURL(stream) : stream;
                        v.play();
                    },
                    function(error)
                    {
                        alert('Something went wrong. (error code ' + error.code + ')');
                        return;
                    }
            );
        }
        else
        {
            alert('Sorry, the browser you are using doesn\'t support getUserMedia');
            return;
        }

        // Elements for taking the snapshot
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('v');

        // Trigger photo take
        document.getElementById("snapButton").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);


            console.log( canvas.toDataURL());
        });
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Subir Archivo o tomar foto</title>
	</head>
	<style>
	.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content/Box */
	.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	}

	label {
	pointer: cursor;
	/* Style as you please, it will become the visible UI component. */
	}

	#upload-photo {
	opacity: 0;
	position: absolute;
	z-index: -1;
	}

	#foto {
	display: none;
	}
	</style>
	<body>


	<form>
	<fieldset>
	<legend>Documento</legend>
	<button type="button">Agregue un Documento</button>
	</fieldset>
	<fieldset>
	<legend>Fotografia</legend>
	<button type="button">Agregue una fotografía</button>
	</fieldset>
	</form>


	<!-- Modal -->
	<div id="photomodal" class="modal">
	<div class="modal-content">
	<p> Agregando contenido </p>
	<div class="drag-drop">
	<div>
	<label for="upload-photo">Seleccione un arvhivo</label>
	<input type="file" name="photo" id="upload-photo" />
	</div>
	<hr>
	<div>
	<button type="button" onclick="activarVideo();">Tomar una foto</button>
	</div>

	<div id="foto">
	<video id='v'></video>
	<button id="snapButton"> tomar </button>
	<h4>A sample page showing HTML5, the VFP Web Browser control and Google Chrome Frame</h4>
	<canvas id="canvas" width="640" height="480"></canvas>
	</div>


	</div>
	</div>
	</div>
	<script>
	window.addEventListener('DOMContentLoaded', function() {
	// Get the modal
	var modal = document.getElementById('photomodal');

	// Get the button that opens the modal
	var btn = document.getElementsByTagName('button');

	// Get the <span> element that closes the modal
	// var span = document.getElementsByClassName("close")[0];

	// When the user clicks on the button, open the modal
	btn[0].onclick = function() {
	modal.style.display = "block";
	};

	// When the user clicks on <span> (x), close the modal
	// span.onclick = function() {
	// modal.style.display = "none";
	// };

	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event) {
	if (event.target == modal) {
	modal.style.display = "none";
	}
	}
	});

	function activarVideo(){
	var divFoto = document.getElementById('foto');
	divFoto.style.display = "block";

	var v = document.getElementById('v');

	navigator.getUserMedia = (navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia \|\|
	navigator.msGetUserMedia);
	if (navigator.getUserMedia)
	{
	// Request access to video only
	navigator.getUserMedia(
	{
	video:true,
	audio:false
	},
	function(stream)
	{
	var url = window.URL \|\| window.webkitURL;
	v.src = url ? url.createObjectURL(stream) : stream;
	v.play();
	},
	function(error)
	{
	alert('Something went wrong. (error code ' + error.code + ')');
	return;
	}
	);
	}
	else
	{
	alert('Sorry, the browser you are using doesn\'t support getUserMedia');
	return;
	}

	// Elements for taking the snapshot
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var video = document.getElementById('v');

	// Trigger photo take
	document.getElementById("snapButton").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);


	console.log( canvas.toDataURL());
	});
	}
	</script>
	</body>
	</html>