正文
html5调用接口,Html接口
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何使用html5调用iPhone的后置摄像头
html5需要使用接口chrome30+ for android 已经实现了利用webcam，调用手机后置摄像头，代码如下：
!DOCTYPE html
html xmlns=""
head
titleHTML5 GetUserMedia Demo/title
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /
/head
body
input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /br /
video height="120px" autoplay="autoplay"/videohr /
input type="button" title="拍照" value="拍照" onclick="getPhoto();" /br /
canvas id="canvas1" height="120px" /canvashr /
input type="button" title="视频" value="视频" onclick="getVedio();" /br /
canvas id="canvas2" height="120px"/canvas
script type="text/javascript"
var video = document.querySelector('video');
var audio, audioType;
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
var exArray = []; //存储设备源ID
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);
}
}
});
function getMedia() {
if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': {
'optional': [{
'sourceId': exArray[1] //0为前置摄像头，1为后置
}]
},
'audio':true
}, successFunc, errorFunc); //success是获取成功的回调函数
}
else {
alert('Native device media streaming (getUserMedia) not supported in this browser.');
}
}
function successFunc(stream) {
//alert('Succeed to get media!');
if (video.mozSrcObject !== undefined) {
//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
video.mozSrcObject = stream;
}
else {
video.src = window.URL window.URL.createObjectURL(stream) || stream;
}
//video.play();
// 音频
audio = new Audio();
audioType = getAudioType(audio);
if (audioType) {
audio.src = 'polaroid.' + audioType;
audio.play();
}
}
function errorFunc(e) {
alert('Error！'+e);
}
// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
function drawVideoAtCanvas(video,context) {
window.setInterval(function () {
context.drawImage(video, 0, 0,90,120);
}, 60);
}
//获取音频格式
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
return ('aac');
} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return ("ogg");
}
}
return false;
}
// vedio播放时触发，绘制vedio帧图像到canvas
// video.addEventListener('play', function () {
// drawVideoAtCanvas(video, context2);
// }, false);
//拍照
function getPhoto() {
context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
}
//视频
function getVedio() {
drawVideoAtCanvas(video, context2);
}
/script
/body
/html
HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：
1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的
相关问答
Q1: html5调用json数据接口怎么写
HTML5中可以通过localStorage数据与JSON对象的转换，快速实现存储更多数据的功能。
将localStorage数据转成JSON对象，需要调用JSON对象的parse()方法，JSON.parse(data)。其中data就是localStorage对象获取的数据，调用该方法将返回一个装载data数据的JSON对象。
通过stringify()方法，将一个实体对象转换为JSON格式的文本数据，JSON.stringify(obj)。obj表示任意一个实体对象，该方法返回一个由实体对象转成JSON格式的文本数据集。
下例所示：
function addStu(){
var sno=$$("sno").value,
name=$$("name").value,
sex=$$("sex").value,
score=$$("score").value;
//声明一个实体对象，将学生的信息当作对象的成员
var
dataSet=new Object;
dataSet.sno=sno;
dataSet.name=name;
dataSet.sex=sex;
dataSet.score=score;
//把dataSet这个对象转换成JSON格式的文本数据
var
list=JSON.stringify(dataSet);
localStorage.setItem(sno,list);
getlocalData();
}
function getlocalData(){
var addInfo="";
for(var i=0;i
var key=localStorage.key(i);
//把json格式的字符串转换成JSON对象
var
dataSet=JSON.parse(localStorage.getItem(key));
addInfo+="
"+dataSet.sno
+""+dataSet.name
+""+dataSet.sex
+""+dataSet.score
+"";
$$("allInfo").innerHTML=addInfo;
}
}
Q2: html5是什么干什么的
HTML的全称是超文本标记语言，是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本，可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言，它是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。
Q3: 如何在html5获取接口方法中返回的map信息
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。
我们先来看函数showError()，它规定获取用户地理位置失败时的一些错误代码处理方式：
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}
我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。
function showPosition(position){
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
alert('纬度:'+lat+',经度:'+lag);
}
利用百度地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度，那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。
