已解决问题
我的安卓手机的相机是拍照是前摄像头不知道怎么调到后面
浏览次数：6266
用手机阿里扫一扫
最满意答案
该答案已经被保护
1、在手机的设置里面去找相机的设置，&&&&在拍照的功能下也可以在选项里面找到更换摄像头的选项，&&&&一般都是按左键出来选单的。2、在手机菜单里面勾选展开详细?
答案创立者
以企业身份回答&
正在进行的活动
生意经不允许发广告，违者直接删除
复制问题或回答，一经发现，拉黑7天
快速解决你的电商难题
店铺优化排查提升2倍流量
擅长&nbsp 店铺优化
您可能有同感的问题
扫一扫用手机阿里看生意经
问题排行榜
当前问题的答案已经被保护，只有知县（三级）以上的用户可以编辑！写下您的建议，管理员会及时与您联络！
server is ok在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
HTML5可以通过调用navigator.getUserMedia来获取手机设备摄像头，兼容性写法如下
window.navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserM
但是navigator.getUserMediau已经从 Web 标准中删除，虽然部分浏览器可以使用，生产环境中还是要做好兼容。新的API更替为MediaDevices.getUserMedia。MediaDevices.getUserMedia可以通过video的facingMode属性指定调用手机的前置或后置摄像头video:{ 'facingMode': "user" }//调用前置摄像头video: { facingMode: { exact: "environment" } }//后置
具体代码：
&!DOCTYPE html&
&html lang="en"&
&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-row { flex-direction: justify-content: space- align-items: }
.flex-column { flex-direction: justify-content: flex- align-items: }
body { overflow: background: # }
.title { width: 920 padding: 30 align-items: flex- }
.title h1 { padding-bottom: 20 font-size: 38 color: # text-shadow: 0 1px 3px #222222; }
.title p { font-size: 18 color: #f5f5f5; text-shadow: 0 1px 3px #565656; }
.wrap { width: 1220 }
.wrap .reference { position: padding: 10 background-color: rgba(255, 255, 255, 0); border-radius: 10 box-shadow: 0 0 20px #a1a19f; }
.wrap .reference img.face { display: width: 320 height: border-radius: 10 }
.wrap .reference img.toggle { position: right: 10 top: 10 width: 50 height: 50 }
.wrap .scan video { background-color: rgba(0, 0, 0, .8); border-radius: 10 }
.wrap .control { justify-content: space- height: 456 padding: 0 20 }
.wrap .control p { width: 160 height: 60 background-color: #f9f9f9; text-align: line-height: 60 color: # font-size: 24 border-radius: 8 cursor: 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 # }
.wrap .scan { position: overflow: }
.wrap .scan .strainer { position: top: 10 width: 320 z-index: 999; height: 3 }
.wrap .scan .capture { width: 320 height: 456 }
.wrap .scan .strainer.on { background: linear-gradient(to left, transparent, #0bffb2, transparent); animation: scan 1 }
@keyframes scan {
0% { top: 10 }
50% { top: 456 }
100% { top: 10 }
&script type="text/javascript" src="vconsole.min.js"&&/script&
&div class="title flex flex-column"&
&div class="wrap flex flex-row"&
&div class="control flex flex-column"&
&p class="open"&开启摄像头&/p&
&p class="recognition"&显示到Canvas&/p&
&p class="close"&关闭摄像头&/p&
&div class="scan reference"&
&div class="strainer"&&/div&
&video class="capture" width="320" height="456" src=""&&/video&
&script type="text/javascript"&
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.msGetUserM
function invokingCarera(){
if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia({
'audio':true,
'video':{ 'facingMode': "user" }//调用前置摄像头，后置摄像头使用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)
alert('不支持摄像头调用！')
//调用成功
function getVideoStream(stream){
if(oCapture.mozSrcObject !== undefined){
oCapture.mozSrcObject =
oCapture.src = window.URL && window.URL.createObjectURL(buffer);
oCapture.play();
function getFail(){
recognition.onclick = function(){
control.addEventListener('click',function(e){
e = e || window.
var className = e.target.classN
switch(className){
case 'open':
invokingCarera();
case 'close':
closeCamera();
case 'recognition':
screenShot();
function closeCamera(){
buffer&&buffer.getTracks()[1].stop();//关闭摄像头
window.requestAnimFrame = (function(){
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);
canvas.getContext('2d');
function drawVideo(){
ctx.drawImage(oCapture,0,0,320,456);
ctx.font = "30px sans-serif";
ctx.fillStyle = "blue";
ctx.fillText("请眨眼", 50, 50);
requestAnimationFrame(drawVideo);
window.requestAnimationFrame(drawVideo);
以上代码并没有进行太多的错误处理，比如用户拒绝授权访问摄像头或浏览器不支持等情况，生产环境使用需添加错误处理代码
以上代码在PC端和Android手机端和微信测试通过，IOS下浏览器均不支持，据说IOS11会开放权限。注意，以上HTML需要在HTTPS下访问方可正常工作，如果使用微信访问可能被屏蔽，微信打开链接后点击右下角“访问原网页”如需本地测试请使用Chrome插件：;webserver使用方法：chrome://apps & web-server & choose folder 勾选 Show Advanced Settings下Set CORS Headers即可使用input type=”file”调用摄像头拍照可以参考
补充下，获取vedio的实际尺寸，可以通过：this.videoWidth，this.videoHeight获取。
HTML5之drawImage函数
drawImage(image, x, y) //按原图片大小绘制。
drawImage(image, x, y, width, height) //按指定大小绘制。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) //常用于图片裁剪
image:所要绘制的图像。这必须是表示
标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。
x和y：图片在文档中的坐标位置。
width和height：图片的宽高。
对于drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight) 常用有图片的裁剪。其参数含义是原来image上从某一个位置开始(sourceX,sourceY)，指定长宽进行剪切(sourceX,sourceY),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上，当然裁剪后的会覆盖原来的图片。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&drawImage&/title&
&canvas id="myCanvas" width="500" height="400"&&/canvas&
&script type="text/javascript"&
var canv=document.getElementById("myCanvas");
var ctx = canv.getContext("2d");
img = new Image();
img.src = "2.jpg";
//当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕
//当然画不上去喽，这就和浏览器的性能有关了。
img.onload=function(){
ctx.drawImage(img,0,0,500,500);
//ctx.drawImage(img,0,0,100,100,300,100,100,100);
除此之外，drawImage()还可以画video，
3 收藏&&|&&8
你可能感兴趣的文章
11 收藏，2k
27 收藏，12.6k
7 收藏，2.4k
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。(吴京最爱国)
(因为羊毛转yy黑)
(我是男人l君)
第三方登录：还在纠结前置还是后置摄像头? OPPO R11帮你全搞定
稿源：耿直的西装
自智能手机问世以来，拍照就一直是一个能引起人们热议的话题，随着手机行业的持续发展，技术的不断进步，手机上的拍照功能也趋向完善，人们讨论的问题点也从原先哪部手机的拍照强发展到了现在的一部手机前置摄像头强还是后置摄像头更强。自OPPO R11上市以来，越来越多的消费者都使用上了这款最新的时尚单品，同样的问题也在R11上展开了激烈的议论。为此OPPO官微发起了一场关于前置拍照和后置拍照之间的对决。从图中可以看得出，OPPO邀请了他的两位代言人，陈伟霆和李易峰两个男神来领衔这场“谁是拍照KING”对决，就在今天早上陈伟霆在微博上爆出了一张用R11自拍的洗浴照，可以看出陈伟霆选择的是前置摄像头，这张自拍野性十足，估计让不少女粉丝都鼻血直流，简直帅气到爆炸，下面甚至有网友回复陈伟霆简直就是在犯规。从照片中不难发现，在有水汽的环境下，OPPO R11前置摄像头拍出的照片依然是十分清晰地，即使是细小的头发丝也能看得清。另一边选择后置摄像头的李易峰立马用R11的后置摄像头拍了一张照片怼了回来，而且还是使用的红色限定版，估计很多人都很眼红吧，不过没办法谁让这款手机就是他本人的定制版呢，细心地朋友肯定发现了，虽说他选择的是一个背景光线十分亮的环境，但是完全没有影响到人物的特写，依旧表现的很突出。从他们两人的对比就能看出来，其实无论是前置的自拍还是后置的拍照都是不错的，这个只是一种个人选择或者说喜好罢了，不过ZOL手机大数据就对该问题做了一个调研，调研结果显示，有73%的用户更经常使用后置摄像头，更是有超过八成的用户认为后置双摄比前置双摄更重要，当然前置自拍也是有他的市场的。不过一部好的手机就能帮你同时解决自拍和拍照的问题，就像OPPO R11一样，前后都同样配备了2000w的超高像素的摄像头，并且内部还搭载了OPPO与高通联合定制的旗舰影响处理器，用更低功耗达到了更快的图像处理速度，进一步突破了手机拍照技术的局限。能做到OPPO R11这样前后一视同仁的配置在业内是很少有的，无论是前置还是后置的拍照，都能让你展现出最真实的自己。
有好的文章希望站长之家帮助分享推广，猛戳这里
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页发现手机前置摄像头照出来的我，和镜子里看到的我很不一样，那到底哪一个才是真正的我呢？还是说两个都不是？摄像头里看到的我，和镜子里的我，和别人眼中看到的我，又一不一样呢？ - 知乎87被浏览<strong class="NumberBoard-itemValue" title="3,190分享邀请回答9210 条评论分享收藏感谢收起41 条评论分享收藏感谢收起