當(dāng)前位置：首頁 > 运维知识 > Android >内容正文

Android

HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试

發(fā)布時(shí)間：2025/3/8 Android 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

但是navigator.getUserMediau已經(jīng)從 Web 標(biāo)準(zhǔn)中刪除，雖然部分瀏覽器可以使用，生產(chǎn)環(huán)境中還是要做好兼容。新的API更替為MediaDevices.getUserMedia。MediaDevices.getUserMedia可以通過video的facingMode屬性指定調(diào)用手機(jī)的前置或后置攝像頭
video:{ 'facingMode': "user" }//調(diào)用前置攝像頭
video: { facingMode: { exact: "environment" } }//后置
1
2
具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
? ? <title>Document1</title>
? ? <style type='text/css'>
? ? ? ? * { margin: 0; padding: 0; }

? ? ? ? html, body { height: 100%; }

? ? ? ? .flex { display: flex; }

? ? ? ? .flex-row { flex-direction: row; justify-content: space-around; align-items: center; }

? ? ? ? .flex-column { flex-direction: column; justify-content: flex-start; align-items: center; }

? ? ? ? body { overflow: auto; background: #fff; }

? ? ? ? .title { width: 920px; padding: 30px; align-items: flex-end; }

? ? ? ? .title h1 { padding-bottom: 20px; font-size: 38px; color: #ffffff; text-shadow: 0 1px 3px #222222; }

? ? ? ? .title p { font-size: 18px; color: #f5f5f5; text-shadow: 0 1px 3px #565656; }

? ? ? ? .wrap { width: 1220px; }

? ? ? ? .wrap .reference { position: relative; padding: 10px; background-color: rgba(255, 255, 255, 0); border-radius: 10px; box-shadow: 0 0 20px #a1a19f; }

? ? ? ? .wrap .reference img.face { display: block; width: 320px; height: auto; border-radius: 10px; }

? ? ? ? .wrap .reference img.toggle { position: absolute; right: 10px; top: 10px; width: 50px; height: 50px; }

? ? ? ? .wrap .scan video { background-color: rgba(0, 0, 0, .8); border-radius: 10px; }

? ? ? ? .wrap .control { justify-content: space-around; height: 456px; padding: 0 20px; }

? ? ? ? .wrap .control p { width: 160px; height: 60px; background-color: #f9f9f9; text-align: center; line-height: 60px; color: #ffffff; font-size: 24px; border-radius: 8px; cursor: pointer; box-shadow: -8px -8px 150px -8px #b2b3b5 inset, 0 0 5px #222222; text-shadow: 0 0 1px #222222; transition: .5s; }

? ? ? ? .wrap .control p:hover { box-shadow: -8px -8px 150px -8px #50c4f1 inset, 0 0 5px #ffffff; }

? ? ? ? .wrap .scan { position: relative; overflow: hidden; }

? ? ? ? .wrap .scan .strainer { position: absolute; top: 10px; width: 320px; z-index: 999; height: 3px; }

? ? ? ? .wrap .scan .capture { width: 320px; height: 456px; }

? ? ? ? .wrap .scan .strainer.on { background: linear-gradient(to left, transparent, #0bffb2, transparent); animation: scan 1s linear infinite; }

? ? ? ? @keyframes scan {
? ? ? ? ? ? 0% { top: 10px; }
? ? ? ? ? ? 50% { top: 456px; }
? ? ? ? ? ? 100% { top: 10px; }
? ? ? ? }

? ? </style>
? ? <script type="text/javascript" src="vconsole.min.js"></script>
</head>
<body>
? ? <div class="title flex flex-column">
</div>
<div class="wrap flex flex-row">
? ? <div class="control flex flex-column">
? ? ? ? <p class="open">開啟攝像頭</p>
? ? ? ? <p class="recognition">顯示到Canvas</p>
? ? ? ? <p class="close">關(guān)閉攝像頭</p>
? ? </div>
? ? <div class="scan reference">
? ? ? ? <div class="strainer"></div>
? ? ? ? <video class="capture" width="320" height="456" src=""></video>
? ? </div>

</div>

? ? <script type="text/javascript">
? ? ? ? var buffer;
? ? ? ? var oCapture = document.querySelector(".capture"),
? ? ? ? open = document.querySelector(".open"),
? ? ? ? recognition = document.querySelector(".recognition"),
? ? ? ? close = document.querySelector(".close");
? ? ? ? var control = document.querySelector(".control");

? ? ? ? window.navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

? ? ? ? function invokingCarera(){
? ? ? ? ? ? if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){
? ? ? ? ? ? ? ? navigator.mediaDevices.getUserMedia({
? ? ? ? ? ? ? ? ? ? 'audio':true,
? ? ? ? ? ? ? ? ? ? 'video':{ 'facingMode': "user" }//調(diào)用前置攝像頭，后置攝像頭使用video: { facingMode: { exact: "environment" } }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? .then(function(mediaStream) {console.log(555);getVideoStream(mediaStream)})
? ? ? ? ? ? ? ? .catch(function(error) { console.log(666);console.log(error) })
? ? ? ? ? ? }else if(navigator.getUserMedia){
? ? ? ? ? ? ? ? navigator.getUserMedia({
? ? ? ? ? ? ? ? ? ? 'video':true,
? ? ? ? ? ? ? ? ? ? 'audio':true
? ? ? ? ? ? ? ? },getVideoStream,getFail)
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? alert('不支持?jǐn)z像頭調(diào)用！')
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //調(diào)用成功
? ? ? ? function getVideoStream(stream){
? ? ? ? ? ? buffer = stream;
? ? ? ? ? ? if(oCapture.mozSrcObject !== undefined){
? ? ? ? ? ? ? ? oCapture.mozSrcObject = buffer;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? oCapture.src = window.URL && window.URL.createObjectURL(buffer); ? ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ? oCapture.play();
? ? ? ? }
? ? ? ? function getFail(){

? ? ? ? }
? ? ? ? recognition.onclick = function(){

? ? ? ? }
? ? ? ? control.addEventListener('click',function(e){
? ? ? ? ? ? e = e || window.event;
? ? ? ? ? ? var className = e.target.className;
? ? ? ? ? ? switch(className){
? ? ? ? ? ? ? ? case 'open':
? ? ? ? ? ? ? ? invokingCarera();
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 'close':
? ? ? ? ? ? ? ? closeCamera();
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 'recognition':
? ? ? ? ? ? ? ? screenShot();
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? function closeCamera(){
? ? ? ? ? ? buffer&&buffer.getTracks()[1].stop();//關(guān)閉攝像頭
? ? ? ? } ? ? ? ?
? ? ? ? window.requestAnimFrame = (function(){
? ? ? ? ? return ?window.requestAnimationFrame ? ? ? ||
? ? ? ? ? ? ? ? ? window.webkitRequestAnimationFrame ||
? ? ? ? ? ? ? ? ? window.mozRequestAnimationFrame ? ?||
? ? ? ? ? ? ? ? ? function( callback ){
? ? ? ? ? ? ? ? ? ? window.setTimeout(callback, 1000 / 60);
? ? ? ? ? ? ? ? ? };
? ? ? ? })();
? ? ? ? function screenShot(){
? ? ? ? ? ? var canvas = document.createElement('canvas');
? ? ? ? ? ? canvas.width=320,canvas.height = 456;
? ? ? ? ? ? document.querySelector(".wrap").appendChild(canvas);
? ? ? ? ? ? var ctx = ?canvas.getContext('2d');
? ? ? ? ? ? function drawVideo(){
? ? ? ? ? ? ? ? ctx.drawImage(oCapture,0,0,320,456);
? ? ? ? ? ? ? ? ctx.font = "30px sans-serif";
? ? ? ? ? ? ? ? ctx.fillStyle = "blue";
? ? ? ? ? ? ? ? ctx.fillText("請(qǐng)眨眼", 50, 50);
? ? ? ? ? ? ? ? requestAnimationFrame(drawVideo);
? ? ? ? ? ? }
? ? ? ? ? ? window.requestAnimationFrame(drawVideo);
? ? ? ? }
? ? </script>
</body>
</html>

轉(zhuǎn)載于:https://my.oschina.net/lslDn/blog/2244711

總結(jié)

以上是生活随笔為你收集整理的HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：少侠请重新来过 - Vue学习笔记(二)
下一篇： Android x86 下运行纯ARM版