|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>网页调取摄像头</title>
- <link rel="stylesheet" href="video%20pro.css">
- </head>
-
- <body>
- <div class="auto">
- <video id="video" autoplay></video>
- <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
- <img src="./body_default.png" id="img" style="margin-left: 20px;">
- <div>
- <button id="capture" title="点击进行拍照">拍照</button>
- </div>
- <div>
- <button id="sure" title="是否用这张图片进行验证">确认</button>
- </div>
- </div>
-
-
- <script>
- var file ,stream;
- //访问用户媒体设备的兼容方法
- function getUserMedia(constraints, success, error) {
- if (navigator.mediaDevices.getUserMedia) {
- //最新的标准API
- navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
- } else if (navigator.getUserMedia) {
- //旧版API
- navigator.getUserMedia(constraints, success, error);
- }
- }
-
- let video = document.getElementById('video');
- let canvas = document.getElementById('canvas');
- let context = canvas.getContext('2d');
-
- function success(stream) {
- //兼容webkit核心浏览器
- let CompatibleURL = window.URL || window.webkitURL;
- //将视频流设置为video元素的源
- console.log(stream);
- stream = stream;
- //video.src = CompatibleURL.createObjectURL(stream);
- video.srcObject = stream;
- video.play();
- }
-
- function error(error) {
- console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
- }
-
- if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
- //调用用户媒体设备, 访问摄像头
- getUserMedia({video : {width: 480, height: 320}}, success, error);
- } else {
- alert('不支持访问用户媒体');
- }
- // base64转文件
-
- document.getElementById('capture').addEventListener('click', function () {
- context.drawImage(video, 0, 0, 480, 320);
- // 获取图片base64链接
- var image = canvas.toDataURL('image/png');
- // 定义一个img
- var img = document.getElementById("img");
- //设置属性和src
- //img.id = "imgBoxxx";
- img.src = image;
- //将图片添加到页面中
- //document.body.appendChild(img);
- function dataURLtoFile(dataurl, filename) {
- var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
- bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
- while (n--) {
- u8arr[n] = bstr.charCodeAt(n);
- }
- file = new File([u8arr], filename, {type: mime});
- return new File([u8arr], filename, {type: mime});
- }
- console.log(dataURLtoFile(image, 'aa.png'));
- })
- </script>
- </body>
- </html>
|