通过JavaScript语言，打开计算机的摄像头，实时预览摄像头画面，并且拍摄照片，通过Ajax上传到服务器
Ajax是通过JQuery框架实现的
<!DOCTYPE html>
<html>
<head>
<title>万码学堂wanmait</title>
<meta charset="utf-8">
<meta name="author" content="万码学堂wanmait">
</head>
<body>
<input type="button" value="打开摄像头" onclick="openCamera()">
<input type="button" value="拍照" onclick="takePicture()">
<input type="button" value="关闭摄像头" onclick="closeCamera()">
<br>
<!-- 显示摄像头实时拍摄的画面 -->
<video id="myVideo" width="500px" height="500px" autoplay="autoplay"></video>
<!-- 显示摄像头拍照的照片 -->
<canvas id="myCanvas" width="500px" height="500px"></canvas>
<script type="text/javascript">
//打开摄像头
function openCamera() {
var param = {
video: { width: 500, height: 500 },
audio: false
};
//摄像头拍摄参数 audio:false 关闭mic
var myVideo = document.getElementById('myVideo'); //获得网页上的myVideo组件 用来显示实时摄像头画面
var myCamera= navigator.mediaDevices.getUserMedia(param);
//获得摄像头
myCamera.then((stream) => {
myVideo.srcObject = stream;//myVideo组件显示的资源来自摄像头数据
myVideo.play();//myVeid组件播放视频
});
}
// 拍照
function takePicture() {
var myVideo = document.getElementById('myVideo');//获得myVideo组件
var myCanvas = document.getElementById('myCanvas');//获得myCancas组件 显示拍摄的照片
var graphics= myCanvas.getContext('2d');//graphics画笔 往canvas中间画图
graphics.drawImage(myVideo, 0, 0, 500, 500);//myVideo组件当前的画面 画到myCanvas组件 成为图片
var picture = document.getElementById('myCanvas').toDataURL('image/png');
//从myCanvas组件中间 获得拍摄的照片 png是图片格式
//上传图片到服务器
$.ajax({
url:""
,type:"post"
,data:{"picture":picture}
,success:function(mes){
}
});
//上传Ajax结束
}//拍照方法结束
// 关闭摄像头
function closeCamera() {
var stream = document.getElementById('myVideo').srcObject;//获得myVideo的资源
var tracks = stream.getTracks();
tracks.forEach(function(track) {
track.stop();//关闭
});
document.getElementById('myVideo').srcObject = null;
//清除myVideo中间的资源 myVideo中间不显示任何内容
}
</script>
</body>
0条评论
点击登录参与评论