天津网站制作|天津网站制作公司|天津网站设计|天津网站设计公司-龙禧科技专注网站建设19年，服务客户超过7000家！

function getMedia() { 
 if (navigator.getUserMedia) { 
 navigator.getUserMedia({ 
 'video': { 
 'optional': [{ 
 }] 
 }
 }, successFunc, errorFunc); 
 } 
 else { 
 alert('Native device media streaming (getUserMedia) not supported in this browser.'); 
 }
} 
var localStream;
function successFunc(stream) { 
 document.getElementById('video').src = window.URL && window.URL.createObjectURL(stream) || stream;
 localStream = stream; 
} 
function errorFunc(e) { 
 alert('Error！'+e); 
} 
function closeMedia() { 
 localStream.stop();
 document.getElementById('video').src = '';
}

var exArray = []; //存储设备源ID 
if (navigator.getUserMedia) { 
 MediaStreamTrack.getSources(function (sourceInfos) { 
 for (var i = 0; i != sourceInfos.length; ++i) { 
 var sourceInfo = sourceInfos[i]; 
 //这里会遍历audio,video，所以要加以区分 
 if (sourceInfo.kind === 'video') { 
 exArray.push(sourceInfo.id); 
 } 
 }
 navigator.getUserMedia({ 
 'video': { 
 'optional': [{ 
 'sourceId': exArray[1] //0为前置摄像头，1为后置 
 }] 
 },
 'audio':false 
 }, successFunc, errorFunc); 
 });
}

<style>
#videoBox{position: absolute;left: 50%;top: 50%;z-index: 1;-webkit-transform: translate(-50%,-50%);-webkit-transform-origin: 50% 50%;}
#videoWrap{position: relative;left: 0;top: 0;background: #4CAABE;overflow: hidden;}
</style>
<div id="videoWrap">
 <video autoplay="autoplay" id="videoBox"></video>
</div>
<script>
var videoWrap = document.getElementById('videoWrap');
videoWrap.style.width = window.innerWidth + 'px';
videoWrap.style.height = window.innerHeight + 'px';
</script>

/***瞄准判定***/
var v = camera.getWorldDirection();
//左右判断
var a1 = new THREE.Vector2( a.position.x, a.position.z );
var b1 = new THREE.Vector2( v.x, v.z );
dt1 = a1.angle()-b1.angle();
//上下判断
var a2 = new THREE.Vector2( a.position.y, a.position.z );
var b2 = new THREE.Vector2( v.y, v.z );
dt2 = a2.angle()-b2.angle();
if(Math.abs(dt1)<0.1 && Math.abs(dt2)<0.1){
 //居中啦！
}

var v = camera.getWorldDirection();
var geometry = new THREE.SphereGeometry( 1000, 16, 8 );
 geometry.scale( -1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
 map: new THREE.TextureLoader().load( 'bg.jpg' )
} );
var stage = new THREE.Mesh( geometry, material );
stage.lookAt(new THREE.Vector3( v.x, 0, v.z ));
stage.rotateY((85 * Math.PI)/180);
stage.rotateZ((-4 * Math.PI)/180);
scene.add( stage );

if(!hasMoved && typeof(defaultCameraDirection)!='undefined'){
 var v = camera.getWorldDirection();
 if( v.x != defaultCameraDirection.x
 || v.y != defaultCameraDirection.y
 || v.z != defaultCameraDirection.z
 ){
 hasMoved = true;
 resetLocationAndRotation();//初始化
 }
}

function getMedia() { 
 if (navigator.getUserMedia) { 
 }, successFunc, errorFunc);//errorFunc是设备支持getUserMedia但是用户不同意调用摄像头的情况
 } 
 else { 
 //设备不支持getUserMedia
 }
} 
function errorFunc(e) { 
 alert('Error！'+e); 
}

<script src="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js"></script>
<script>
if(!Detector.webgl) {
 //不支持WebGL
}else{
 //支持WebGL
}
</script>

console.error = (function(origin){ 
 return function(errorlog) {
 if(/THREE/.test(errorlog)) {
 //Three报错
 }
 } 
})(console.error);
console.warn = (function(origin){ 
 return function(errorlog) {
 if(/^THREE.WebGLRenderer:$/.test(errorlog)) {
 //Three渲染时报错
 }
 } 
})(console.warn);

if(window.DeviceOrientationEvent) {
 //支持陀螺仪
}else{
 //不支持陀螺仪
}

var agent = navigator.userAgent.toLowerCase() ;
var version;
if(agent.indexOf("like mac os x") > 0){
 //ios
 var regStr_saf = /os [\d._]*/gi ;
 var verinfo = agent.match(regStr_saf) ;
 version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
}
var version_str = version+"";
if(version_str != "undefined" && version_str.length >0){
 version=version.substring(0,1);
 if(version>5 && version <9){
 //版本为iOS8以下直接跳转落地页
 }
}