html复制代码<!DOCTYPE html><html><head> <title>拍照上传</title></head><body> <video id="video" style="width:300px;height:200px;"></video> <br> <button id="btn-start">启动摄像头</button> <button id="btn-stop">停滞摄像头</button> <button id="btn-capture">拍照上传</button> <br> <canvas id="canvas"></canvas> <form id="form-upload" method="post" enctype="multipart/form-data"> <input type="file" id="input-file" name="file"/> </form> <script type="text/javascript"> var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 启动摄像头 document.getElementById('btn-start').addEventListener('click', function() { navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(function(stream) { video.srcObject = stream; }).catch(function(err) { console.log("启动摄像头失落败：" + err); }); }); // 停滞摄像头 document.getElementById('btn-stop').addEventListener('click', function() { video.pause(); video.srcObject.getTracks()[0].stop(); video.srcObject = null; }); // 拍照，并上传到后台 document.getElementById('btn-capture').addEventListener('click', function() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; ctx.drawImage(video, 0, 0); canvas.toBlob(function(blob) { var formData = new FormData(); formData.append('file', blob, 'photo.jpg'); postRequest('/upload', formData, function(res) { alert(res.message); }); }, 'image/jpeg'); }); // 发送 POST 要求 function postRequest(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var res = JSON.parse(xhr.responseText); callback(res); } }; xhr.send(data); } </script></body></html>
上述代码紧张分为以下几个部分：
html5 的 <video> 元素用于显示摄像头数据流，我们可以通过 JavaScript API 掌握调用摄像头、停息和关闭。同时利用了 <canvas> 元向来缓存视频帧的图像数据。页面中 btn-start 按钮通过 getUserMedia() 方法要求浏览器授权，并将摄像头数据流传给 <video> 元素进行播放。点击 btn-capture 按钮时，通过 toBlob() 将缓存的图像数据转化为 Blob 工具，并封装到 FormData 中，以便发送给后台做事。postRequest() 函数用于发送包含文件数据的 POST 要求，个中 FormData 工具中的 key 是上传后台做事器处理时须要读取的参数名称，常日对应详细的后台业务逻辑。末了，须要把稳的是，在本地调试和开拓时，特殊是在 Windows 操作系统下利用 Chrome 浏览器访问时，可能会碰着摄像头不能正常运行的情形。这时可以打开地址栏，在目标要求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 参数（个中端口号需更换成实际确当地做事端口），即可得到权限，进行摄像头利用。
