<%@ page language="java" contentType="text/html; charset=utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head>
<body>
<div style="width: 100%; height: 1000px;"> <div id="videoBox"> <video id="video" width="480" height="360" autoplay></video> </div> <div class="videoBox" > <canvas id="canvas" hidden='true'width="480" height="360"></canvas> </div>
<div> <img id="img" name="img" width="480" height="360"> </div> <div> <button id="opensxt" <!-- οnclick="opensxt() -->">打开摄像头</button> </div> <div> <button id="take" οnclick="takePhoto()">点击拍照</button> </div> </div>
</body> <script src="<%=path%>/jslib/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var video = document.getElementById("video"); var imgsrc = document.getElementById("img"); $(document).ready(function() { videoObj = { "video" : true }; var errBack = function(error) { console.log("Video capture error: ", error.code); }; if (navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.srcObject = stream; video.play(); }, errBack); } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if (navigator.mozGetUserMedia) { // Firefox-prefixed navigator.mozGetUserMedia(videoObj, function(stream) { video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } ;
}); /* function opensxt(){ videoObj = { "video" : true }; var errBack = function(error) { console.log("Video capture error: ", error.code); }; if (navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.srcObject = stream; video.play(); }, errBack); } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if (navigator.mozGetUserMedia) { // Firefox-prefixed navigator.mozGetUserMedia(videoObj, function(stream) { video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } ; } */ function takePhoto() { context.drawImage(video, 0, 0, 480, 360); // console.log(canvas.toDataURL('jpg')) var sr = canvas.toDataURL('jpg'); var src = sr.replace(/^data:image\/\w+;base64,/, ""); $("#img").attr('src',sr); } </script> </html>
