<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<div id="divcontrol">
<video id="video" autoplay="" style='width:640px;height:480px'>
</video>
<button id="snap">
拍照
</button>
<canvas style="display:none" id="canvas" width="320" height="320">
</canvas>
<input type="file" accept="p_w_picpath/video;capture=camera">
<input type="file" accept="video/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
</div>
</body>
<script type="text/javascript">
// 获取封装本地 数据流
var avideo = document.getElementById("video");
navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia|| navigator.msGetUserMedia;
//webkit 内核
if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(
{video:true},
function(stream) {
avideo.src = window.webkitURL.createObjectURL(stream);
avideo.autoplay = true;},
function (error) { alert(error);});
}
//火狐内核
if (navigator.mozGetUserMedia) {
navigator.mozGetUserMedia({video:true},function(LocalMediaStream) {
avideo.mozSrcObject =LocalMediaStream;
video.autoplay = true;
}, function (error) { alert(error);});
}
//画图脚本
function scamera() {
var canvasObj = document.getElementById('canvas');
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement, 0, 0, 320, 240);
}
</script>
</html>
转载于:https://blog.51cto.com/yjm199/1733809