HTML 调用后置摄像头
<html><script type="text/javascript">var CameraInit = (function (window, document, undefined) {function MyCamera(videoDom, canvasDom) {this.mediaOpts = {audio: false,video: { facingMode: "environment" } }this.video = videoDom;this.canvas1 = canvasDom;this.context1 = this.canvas1.getContext('2d');this.mediaStreamTrack = null;this.checkEnvironment();}MyCamera.prototype = {checkEnvironment: function () {window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}return new Promise(function (resolve, reject) {alert('1')getUserMedia.call(navigator, constraints, resolve, reject);});}}},successFunc: function (stream) {this.mediaStreamTrack = stream;this.video = document.querySelector('video');if ("srcObject" in this.video) {this.video.srcObject = stream} else {this.video.src = window.URL && window.URL.createObjectURL(stream) || stream}this.video.play();},errorFunc: function (err) {alert(err.name);},openMedia: function () {navigator.mediaDevices.getUserMedia(this.mediaOpts).then(this.successFunc.bind(this)).catch(this.errorFunc.bind(this));},closeMedia: function () {var that = this;that.mediaStreamTrack.getVideoTracks().forEach(function (track) {track.stop();that.context1.clearRect(0, 0, that.context1.width, that.context1.height);});},drawMediaAndToImg: function () {this.canvas1.setAttribute("width", this.video.videoWidth);this.canvas1.setAttribute("height", this.video.videoHeight);this.context1.drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight);inseterImg(this.canvas1.toDataURL('image/png'))},};return MyCamera;})(window, document)</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">Blod_base64 = function (blod, callback) {var a = new FileReader();a.readAsDataURL(blod);a.onload = function (e) {inseterImg(e.target.result);}}getImgdata = function (url) {var xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.onload = function (ev) {if (xhr.status === 200) {Blod_base64(xhr.response)}};xhr.send();}showimg = function (event) {var obj = event.srcElement;var _this = obj;imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);}function imgShow(outerdiv, innerdiv, bigimg, _this) {var src = _this.currentSrc;$(bigimg).attr("src", src);$("![]()
").attr("src", src).on('load',function () {var windowW = $(window).width();var windowH = $(window).height();var realWidth = this.width;var realHeight = this.height;var imgWidth, imgHeight;var scale = 0.8;if (realHeight > windowH * scale) {imgHeight = windowH * scale;imgWidth = imgHeight / realHeight * realWidth;if (imgWidth > windowW * scale) {imgWidth = windowW * scale;}} else if (realWidth > windowW * scale) {imgWidth = windowW * scale;imgHeight = imgWidth / realWidth * realHeight;} else {imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width", imgWidth);var w = (windowW - imgWidth) / 2;var h = (windowH - imgHeight) / 2;$(innerdiv).css({ "top": h, "left": w });$(outerdiv).fadeIn("fast");});$(outerdiv).click(function () {$(this).fadeOut("fast");});}function openVideo() {if ($("#loapload").children().length > 6) {alert('最多支持6个文件！')return}window.MyCamera = new CameraInit(document.getElementById("video"), document.getElementById("qrCanvas"));$('.video_photo').css('display', 'block')$('.ajax_form_box').css('display', 'none')window.MyCamera.openMedia()}function saveimg() {window.MyCamera.drawMediaAndToImg()window.MyCamera.closeMedia()$('.ajax_form_box').css('display', 'block')$('.video_photo').css('display', 'none')}function deletePA(e) {e.parentNode.remove(e);}function imgChange(obj) {closeChouse()var image = obj.files[0]; if (image.type != 'image/png' && image.type != 'image/jpeg') {myDialog({ype: "confirm",title: "文件类型错误",content: "请选择.jpg/.png格式的文件",onConfirm: function (obj) {}});return}var reader = new FileReader(); reader.readAsDataURL(image); reader.onload = function (ev) { var dataURL = ev.target.result; inseterImg(dataURL);window.MyCamera.closeMedia()$('.ajax_form_box').css('display', 'block')$('.video_photo').css('display', 'none')closeChouse()}}function Chouse() {$('#filesP').click();}function showChouse() {$('#chousefiles').css('display', 'block')}function closeChouse() {$('#chousefiles').css('display', 'none')}function inseterImg(src) {var div = document.createElement('div');var img = document.createElement('img');var input = document.createElement('input')var cls = document.createElement('div')input.style.display = 'none'cls.style.display = 'none'input.name = "uploadImg"input.setAttribute('value', src)img.setAttribute('onclick', 'showimg(event)')cls.setAttribute('onclick', 'deletePA(this)')cls.innerText = 'x'cls.className = 'del_img'img.src = srcdiv.className = 'image-upload'div.appendChild(img)div.appendChild(input)div.appendChild(cls)var parentDIV = document.getElementById('loapload')parentDIV.insertBefore(div, document.getElementById('photo-video'))}
</script><style>.image-upload {width: 200px;height: 200px;border: 1px dotted;border-radius: 10px;float: left;margin: 5px;cursor: pointer;position: relative;}.del_img {position: absolute;text-align: center;top: 2px;right: 2px;width: 20px;height: 20px;background-color: #fff3f3;border-radius: 50%;box-shadow: 0 0 2px #0a9ac2;color: #999999;user-select: none;}.more_btn {cursor: pointer;position: absolute;top: 20px;right: 30px;background: #fff;height: 16px;color: #999;line-height: 0px;font-size: 24px;user-select: none;width: 30px;border-radius: 16px;text-align: center;z-index: 99999;}#chousefiles {cursor: pointer;width: 120px;display: none;user-select: none;background-color: #fff;position: absolute;height: 30px;text-align: center;top: 40px;right: 30px;z-index: 99999;line-height: 26px;color: #717171;border: 2px #fff solid;border-radius: 2px;}#chousefiles:hover {background-color: #e3e2e2;}.image-upload:hover .del_img {display: block !important;}.ajax_form_box {padding: 0 100px 100px 100px;}.image-upload img {width: 100%;height: 100%;object-fit: cover;border-radius: 8px;}#loapload {padding-left: 142px;}.file {position: relative;display: inline-block;background: #7e807e;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #0f0e0f;text-decoration: none;text-indent: 0;line-height: 20px;}.file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;}.file:hover {background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;}.cls {display: -webkit-flex;display: flex;-webkit-justify-content: space-around;justify-content: space-around;padding: 0px 60px 0px 0px}.video_photo {display: none;background: #000;box-shadow: 0 0 5px;width: 100vw;height: 100vh;left: 0;top: 0;}.video-bg {width: 100%;height: 100%;background: #000;}.shotPhotos {position: absolute;top: 85vh;left: calc(50% - 40px);width: 80px;height: 80px;background: #fff;border: 5px #ca0c00 solid;border-radius: 50%;cursor: pointer;}.shotPhotos_round {width: 60px;height: 60px;background: #ca0c00;border-radius: 50%;margin: 9px;}
</style><body><div class="video_photo"><div onclick="showChouse()" class="more_btn">...</div><div id="chousefiles" onclick="Chouse()">选择本地文件</div><input type="file" style="display: none" id="filesP" onchange="imgChange(this)"><video id="video" class="video-bg" onclick="closeChouse()"></video><canvas id="qrCanvas" class="qr-canvas" style="display: none;"></canvas><div onclick="saveimg()" class='shotPhotos'><div class="shotPhotos_round"> </div></div></div><div class="ajax_form_box"><form id="ajax_form" method="post" action="/" data-ajax="true" data-ajax-method="Post"data-ajax-mode="" data-ajax-update="" data-ajax-begin="" data-ajax-success="" data-ajax-complete=""data-ajax-failure=""><div><div style="padding-top: 15px;margin-left:-40px"><label class="mr-sm-2" style="width: 100px;margin-left: 34px; text-align: right">图片：</label><div id="loapload" style=" margin-top: -28px;"><div class="image-upload" id="photo-video" onclick="openVideo()"><svg t="1607338307020" class="icon" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="3379" style="margin: 35px" width="120"height="120"><pathd="M121.6 856c-32 0-57.6-25.6-57.6-57.6V340.8c0-32 25.6-60.8 59.2-60.8H256c8 0 16-3.2 20.8-11.2l52.8-83.2c14.4-20.8 38.4-33.6 64-33.6h235.2c25.6 0 48 11.2 60.8 32l59.2 86.4c4.8 6.4 11.2 9.6 19.2 9.6h131.2c33.6 1.6 60.8 28.8 60.8 62.4v456c0 16-6.4 30.4-17.6 41.6-11.2 11.2-25.6 17.6-41.6 17.6v-16 16H121.6c1.6-1.6 1.6-1.6 0-1.6z m134.4-544H123.2c-14.4 0-27.2 12.8-27.2 28.8v456c0 16 12.8 27.2 27.2 27.2h777.6c8 0 14.4-3.2 19.2-8s8-11.2 8-19.2V340.8c0-16-12.8-28.8-28.8-30.4h-129.6c-17.6 1.6-35.2-8-46.4-22.4l-59.2-88c-8-11.2-20.8-17.6-35.2-17.6H392c-14.4 0-28.8 6.4-36.8 19.2L304 286.4c-11.2 16-28.8 25.6-48 25.6z"fill="#636363" p-id="3380"></path><pathd="M507.2 766.4c-126.4 0-228.8-102.4-228.8-228.8s102.4-228.8 228.8-228.8S736 411.2 736 537.6s-102.4 228.8-228.8 228.8z m0-425.6c-108.8 0-196.8 88-196.8 196.8S400 734.4 507.2 734.4 704 646.4 704 537.6s-88-196.8-196.8-196.8z"fill="#636363" p-id="3381"></path><pathd="M507.2 696c-88 0-158.4-72-158.4-158.4s72-158.4 158.4-158.4c88 0 158.4 72 158.4 158.4s-70.4 158.4-158.4 158.4z m0-284.8c-70.4 0-126.4 57.6-126.4 126.4 0 70.4 57.6 126.4 126.4 126.4s126.4-57.6 126.4-126.4c1.6-70.4-56-126.4-126.4-126.4z"fill="#636363" p-id="3382"></path></svg></div></div><div style="clear: both"></div><div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:999;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div></div></div></div></form></div></div>
</body></html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
