HTML5 使用video标签实现选择摄像头功能

1. html 

// jquery reference 
// <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
//


	<input type="hidden" name="imgValue" id="imgValue" />
	<button id="btnOpen1" class="btn btn-default" type="button" >Open WebCam</button>
	<select id="videoSource" ></select>


	<div id="vdoOne" style="display:none">
		<video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video>
		<canvas id="canvasPreview" style="margin-top:15px;" width="300" height="224"></canvas>
		<canvas id="canvasUpload" style="display:none;" width='300' height='224'></canvas>
		<button id="snap" class="btn btn-default" type="button">Snap Photo</button>
	</div>

2. javascript 

<script>


 Elements for taking the snapshot
        var canvasPreview = document.getElementById('canvasPreview');
        var canvasUpload = document.getElementById('canvasUpload');
        var contextPreview = canvasPreview.getContext('2d');
        var contextUpload = canvasUpload.getContext('2d');




        //#################### Video Source #######################3
        var videoElement = document.querySelector('video');
        var videoSelect = document.querySelector('select#videoSource');


        navigator.mediaDevices.enumerateDevices()
            .then(gotDevices).then(getStream).catch(handleError);


        videoSelect.onchange = getStream;




        function gotDevices(deviceInfos) {
            for (var i = 0; i < deviceInfos.length; ++i) {
                var deviceInfo = deviceInfos[i];
                var option = document.createElement('option');
                option.value = deviceInfo.deviceId;
                if (deviceInfo.kind === 'videoinput') {
                    option.text = deviceInfo.label ||
                        'camera ' +
                        (videoSelect.length + 1);
                    videoSelect.appendChild(option);
                } else {
                    console.log('Found ome other kind of source/device: ', deviceInfo);
                }
            }
        }


        var _streamCopy = null;
        function getStream() {
            if (_streamCopy != null) {
                try {
                    _streamCopy.stop(); // if this method doesn't exist, the catch will be executed.
                } catch (e) {
                    _streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream
                }
            }
            
            var constraints = {
                audio:false,
                video: {
                    optional: [
                        {
                            sourceId: videoSelect.value
                        }
                    ]
                }
            };
            
            navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
        }


        function gotStream(stream) {
            _streamCopy = stream; // make stream available to console
            videoElement.srcObject = stream;
        }


        function handleError(error) {
            alert(error.name + ": " + error.message);
        }


        //######################## End Video Source #################




        // Get access to the camera!
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
                videoElement.src = window.URL.createObjectURL(stream);
                videoElement.play();


            });
        } else {
            document.getElementById("pnlVideo1").style.display = "none";
        }




         Trigger photo take
        document.getElementById("snap").addEventListener("click",
            function() {
                contextPreview.drawImage(videoElement, 0, 0, 300, 224);
                contextUpload.drawImage(videoElement, 0, 0, 300, 224);
                document.getElementById("video").style.display = "none";
                document.getElementById("snap").style.display = "none";
                document.getElementById("canvasPreview").style.display = "block";


                var image = document.getElementById("canvasUpload").toDataURL("image/jpeg");
                image = image.replace('data:image/jpeg;base64,', '');
                $("#imgValue").val(image);
				
				alert("image value :" + image);
            });


         Trigger photo take




        document.getElementById("btnOpen1").addEventListener("click",
            function() {
                document.getElementById("vdoOne").style.display = "block";
                document.getElementById("video").style.display = "block";
                document.getElementById("snap").style.display = "block";
                document.getElementById("canvasPreview").style.display = "none";
            });
			
</script>