Html5控制浏览器打开摄像头并转base64输出
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div><button id="start">开启摄像头</button><button id='picture'>拍照</button><button id="sc">转为base64并输出</button><button id="stop">关闭摄像头</button></div><div><video id="video" autoplay="" style='width:640px;height:480px'></video><canvas id="canvas" width="640" height="480"></canvas></div><div><textarea id = "imgbase64" style="width:800px; height:700px"></textarea></div></body>
<script type="text/javascript">var mediaStreamTrack;var video = document.getElementById("video");var context = canvas.getContext("2d")var start = document.getElementById("start");var errocb = function () {console.log('ok!');}start.onclick = function () {if (navigator.mediaDevices.getUserMedia) { // 标准的APIvar p = navigator.mediaDevices.getUserMedia({video: true});p.then(function (mediaStream) {var video = document.querySelector('video');mediaStreamTrack = typeof mediaStream.stop === 'function'?mediaStream:mediaStream.getTracks()[0];try {video.srcObject = mediaStream;} catch (error) {video.src = window.URL.createObjectURL(mediaStream);}//video.src = window.URL.createObjectURL(mediaStream);video.onloadedmetadata = function (e) {// Do something with the video here.video.play();};});p.catch(function(err) { console.log(err.name); });} else if (navigator.mediaDevices.webkitGetUserMedia) { // WebKit var p = navigator.mediaDevices.webkitGetUserMedia({video: true});p.then(function (mediaStream) {var video = document.querySelector('video');video.src = window.URL.createObjectURL(mediaStream);video.onloadedmetadata = function (e) {// Do something with the video here.video.play();};});p.catch(function(err) { console.log(err.name); });}document.getElementById("picture").addEventListener("click", function () {context.drawImage(video, 0, 0, 640, 480);});}document.getElementById("stop").addEventListener("click", function () {mediaStreamTrack && mediaStreamTrack.stop();});document.getElementById("sc").addEventListener("click", function () {var imgData=document.getElementById("canvas").toDataURL("image/png");//var base64Data = imgData.substr(22);//var mmmd=getBase64Image(imgData);document.getElementById("imgbase64").innerHTML = imgData;});function getBase64Image(img) {var canvastemp = document.createElement("canvas");canvastemp.width = img.width;canvastemp.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var dataURL = canvas.toDataURL("image/png");return dataURL// return dataURL.replace("data:image/png;base64,", "");}
</script></html>