移动端摄像头技术.doc

《移动端摄像头技术.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、一•摄像头技术1.地理位置获取用户所需的拍照地物位置，点击屏幕屮的遥感影像，抓取该点屏幕坐标，转换为地理坐标，用于以后将具体地物与数据库屮的照片地址相对应起来。varmouseXY=getTouchXY(evt);if(gSelf.selectPosPho){//照相进行中varwXY=screenToWorld(mouseXY.x,mouseXY.y);varTM=getTM();gSelf.selectPosArr.id=TM;gSelf.selectPosArr.XY=wXY;document.get

2、ElementByIdx_x(,mainDiv,).removeChild(document.getElementByld('flowDivR;//删除滤镜createPhotoVideo();//调出摄像头API2.视频流HTML5的TheMediaCapture(媒体捕捉)API提供了对摄像头的可编程访问,用户可以直接用getUserMedia(请注意H前仅Chrome和Opera支持)获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得的视频作为这个标签的输入来源

3、。functioncreatePhotoVideo(){//ii择了地点varphotoDiv=document.createElementC^iv1);photoDiv.id=nphotoContainerDivH;photoDiv.innerHTML=,

4、9;positionzabsolute;width:100%;height:100%;z-index:l;left:0px;top:Opx;Mid=nunderDivnx/divximgsrc=',Mstyle=ndisplay:none;z-index:30;left:0px;top:Opx;position:absolute;nid=MphotoImgnximgsrc=Mres/toolIcon/snap1.pngnstyle二"display:none;z-index:40;left:0px;bott

5、om:30px;width:lOOpx;height:lOOpx;position:absolute;”id=”snap">：photoDiv.style.width=screen.width+MpxM;photoDiv.style.height=document.documentElement.clientHeight+HpxM;document.getElementByldC/mainDiv^.appendChildCphotoDiv);varvideo=document.querySelector(f

6、video1);varcanvas=document.querySelectorC^anvas1);gSelf.localMediaStream=null;MediaStreamTrack.getSources(gotSources);//调用摄像头(前置还是后置两种)的ID3.后置摄像头functiongotSources(sourcelnfos){varvideo_source=sourcelnfos[2].id;〃后置摄像头，sourceinfos有三个数组，每个数组有三种属性：id,label,ki

7、ndvargetUserMedia=null;getUserMedia=navigator.webkitGetUserMedia.bind(navigator);getUserMedia(/*{video:true},*/{/*audio:{optional:[{sourceld:"Audioln}]},*/video:{optional:[{sourceld:video_source}]}},function(stream){video.src=window.URL.createObjectURL(str

8、eam);gSelf.localMediaStream=stream;sizeCanvas();},function(){alert(FyourbrowserdoesnotsupportgetUserMedia');})；}4.拍照拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元索可以作为Canvas图像的输入，并且保证三种标签元素的样式大小一致，尽可能占领整个屏幕。func