JavaScript相机,js摄像头拍照

前端图片 js 怎么判断相机是横拍还是竖拍

CSS判断横屏竖屏 写在同一个CSS中

@media screen and (orientation: portrait) { /*竖屏 css*/ }

@media screen and (orientation: landscape) { /*横屏 css*/}

相关问答

Q1: html5或者JS怎样调用手机摄像头或者相册？

你给的网页用的是 input accept="image/*" type="file"，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。

Q2: 使用angularJs怎样调用手机相机和相册

AngularJS

没有相机插件，cordova。phonegap才有相机插件。

首先用命令：

phonegap

plugin

add

org.apache.cordova.camera

安装相机插件

然后再用

navigator.camera.getPicture(onSuccess,

onFail,

{

quality:

50,

destinationType:

Camera.DestinationType.FILE_URI

});

进行访问。

记得一定要在onDeviceReady()

之后调用

Q3: 怎么用html5或js调用手机的摄像头拍照上传以及调用

h5不能直接调用摄像头，只能用input type="file" /上传图片来间接调用摄像头

Q4: 怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片

1、实现头的方法代码。

2、编写CSS样式的方法代码。

3、html上传代码。

4、JS处理方法代码。

5、测试结果如下。

注意事项：

JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。

Q5: threejs怎么加入相机控制

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title手动旋转相机/title

script type="text/javascript" src="../libs/three.js"/script

script type="text/javascript" src="../libs/jquery-1.9.0.js"/script

/head

body

div id="container"/div

script type="text/javascript"

$(function(){

var container;

var camera,scene,renderer,light;

var mesh;

//这个mouseX和mouseY 记录的是鼠标相对于屏幕中心的位置，所以mouseX的范围是[-屏幕宽的一半，屏幕宽的一半]，mouseY的范围是[-屏幕高的一半，屏幕高的一半]

var mouseX = 0,mouseY = 0;

var windowHalfX = window.innerWidth/2;

var windowHalfY = window.innerHeight/2;

init();

animate();

function init(){

scene = new THREE.Scene();

container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,1000);

camera.position.z = 180;

camera.lookAt(scene.position);

light = new THREE.DirectionalLight(0xffffff,1);

light.position.set(0,0,10);

scene.add(light);

var cubeGeometry = new THREE.CubeGeometry(30,30,30);

var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000 });

mesh = new THREE.Mesh(cubeGeometry,cubeMaterial);

scene.add(mesh);

renderer = new THREE.WebGLRenderer({antialias:true});

renderer.setSize(window.innerWidth,window.innerHeight);

container.appendChild(renderer.domElement);

document.addEventListener('mousemove',onDocumentMouseMove,false);

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize(){

windowHalfX = window.innerWidth/2;

windowHalfY = window.innerHeight/2;

camera.aspect = window.innerWidth/window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth,window.innerHeight);

}

function onDocumentMouseMove(){

//因为世界坐标系的原点在屏幕的中心，所以，将屏幕实际坐标减去屏幕宽高的一半，就将屏幕坐标的坐标原点移到世界坐标系的原点。

mouseX = (event.clientX-windowHalfX);

mouseY = (event.clientY-windowHalfY);

}

function animate(){

requestAnimationFrame(animate);

render();

}

function render(){

//根据mouseX和mouseY改变相机的坐标

camera.position.x += (mouseX - camera.position.x);

camera.position.y += (mouseY - camera.position.y);

camera.lookAt(scene.position);

renderer.render( scene, camera );

}

});

/script

/body

/html