网站调用手机摄像头源码_安卓手机如何在网页上调用手机摄像头

‘壹’ 手机网页（html5）如何调用手机的摄像头和相册

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web RTC 测试</title>
<style>
.booth {
width:400px;

background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<video id="video" width="400" height="300"></video>
<button id='tack'> snap shot</button>
<canvas id='canvas' width='400' height='300'></canvas>
<img id='img' src=''>
</div>

<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;

//媒体对象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不适用音频
}, function(strem){
console.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
console.log(error);
});
snap.addEventListener('click', function(){

//绘制canvas图形
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

//把canvas图像转为img图片
img.src = canvas.toDataURL("image/png");

})
</script>
</body>
</html>

‘贰’ html5调用手机摄像头，实现拍照上传功能

html5提供了
navigator.getusermedia接口使用设备摄像头，chrome28上测试已经可用，手机端浏览器测试发现只有opera浏览器可用。
浏览器未完善之前可以使用phonegap完成，它提供了
navigator.camera.getpicture接口，使用js可以方便调用设备摄像头。

‘叁’ 打开网站调用摄像头实现视频相关代码

这么犀利的功能只给10分。你还可以小气点吗用as3调用摄像头，代码如下：package {
import flash.display.Sprite;
import flash.text.*;
import flash.media.Camera;
import flash.events.StatusEvent;
import flash.events.ActivityEvent;
import flash.media.Video; public class CameraEx extends Sprite
{
private var label:TextField;
private var camera:Camera;

public function CameraEx()
{
label=addLabel("CameraEx");

camera=Camera.getCamera();

if(camera!=null){
camera.addEventListener(StatusEvent.STATUS,statusHandler);
camera.addEventListener(ActivityEvent.ACTIVITY,activityHandler);

var video:Video=new Video(200,200);
video.attachCamera(camera);
addChild(video);
video.x=20;
video.y=20;
}
else{
label.text="不能使用";
}
}

private function statusHandler(evt:StatusEvent):void{
if(camera.muted) label.text="不能使用";
}

private function activityHandler(evt:ActivityEvent):void{
if(evt.activating){
label.text="检测开始";
}
else{
label.text="检测停止";
}
}

private function addLabel(text:String):TextField{
var label:TextField=new TextField();
label.autoSize=TextFieldAutoSize.LEFT;
label.text=text;
addChild(label);
return label;
}
}
}网上DOWN的没环境。自己试试。

‘肆’ 如何通过html5调用手机摄像头

HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：
1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的

android手机，浏览器chrome32版本下实现了浏览器调用设备摄像头进行拍照。主要分3个步骤来完成:
1）获取视频流
添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源

java">varvideo=document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true},function(stream){
video.src=window.webkitURL.createObjectURL(stream);
},function(error){alert(error);});

2）拍照
关于拍照功能，采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入

functionscamera(){
varvideoElement=document.getElementByIdx_x_x('video');
varcanvasObj=document.getElementByIdx_x_x('canvas1');
varcontext1=canvasObj.getContext('2d');
context1.fillStyle="#ffffff";
context1.fillRect(0,0,320,240);
context1.drawImage(videoElement,0,0,320,240);
}
3）图片获取

要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像

varimgData=canvas.toDataURL(“image/png”);

imgData格式如下：”data:image/png;base64,xxxxx“
真正图像数据是base64编码逗号之后的部分

‘伍’ html5怎样调用手机摄像头或者相册

只需要在Html5代码中加入下列代码就可以调用手机摄像头或者相册。

<input type="file" accept="image/*;capture=camera">输入此行代码可以调用相机。

<input type="file" accept="image/*" />选择此行代码刻意选择调用相机，图片或者相册。

(5)网站调用手机摄像头源码扩展阅读:

一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。

标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

头部内容

标记符< html>：说明该文件是用超文本标记语言来描述的，它是文件的开头，而</html>则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

<head></head>：这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。

头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单。

‘陆’ 安卓手机如何在网页上调用手机摄像头

根据你描述，这个功能是flash来实现的
只需根据提示安装flash即可
自己是没法增加这种功能的

‘柒’ html5或者JS怎样调用手机摄像头或者相册

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

‘捌’ 如何html5在浏览器里访问手机后置摄像头

html5需要使用接口chrome30+ for android 已经实现了利用webcam，调用手机后置摄像头，代码如下：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>HTML5 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"></video><hr /> <input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br /> <canvas id="canvas1" height="120px" ></canvas><hr /> <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移动端页面上调用手机摄像头扫描二维码并获取二维码信息代码

html5移动端调用手机摄像头扫描二维码并获取二维码信息代码如下：

[html]view plain

<!DOCTYPEhtml>

<title>HTML5codeReader</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

</head>

<styletype="text/css">

html,body{height:100%;width:100%;text-align:center;}

</style>

<scriptsrc="jquery-1.9.1.js"></script>

//这段代主要是获取摄像头的视频流并显示在Video签中

varcanvas=null,context=null,video=null;

window.addEventListener("DOMContentLoaded",function()

{

try{

canvas=document.getElementById("canvas");

context=canvas.getContext("2d");

video=document.getElementById("video");

varvideoObj={"video":true,audio:false},

flag=true,

MediaErr=function(error)

{

flag=false;

if(error.PERMISSION_DENIED)

{

alert('用户拒绝了浏览器请求媒体的权限','提示');

}elseif(error.NOT_SUPPORTED_ERROR){

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器','提示');

}elseif(error.MANDATORY_UNSATISFIED_ERROR){

alert('指定的媒体类型未接收到媒体流','提示');

}else{

alert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试','提示');

}

};

//获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）

if(navigator.getUserMedia)

{

//qq浏览器不支持

if(navigator.userAgent.indexOf('MQQBrowser')>-1){

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器','提示');

returnfalse;

}

navigator.getUserMedia(videoObj,function(stream){

video.src=stream;

video.play();

},MediaErr);

}

elseif(navigator.webkitGetUserMedia)

{

navigator.webkitGetUserMedia(videoObj,function(stream)

{

video.src=window.webkitURL.createObjectURL(stream);

video.play();

},MediaErr);

}

elseif(navigator.mozGetUserMedia)

{

navigator.mozGetUserMedia(videoObj,function(stream){

video.src=window.URL.createObjectURL(stream);

video.play();

},MediaErr);

}

elseif(navigator.msGetUserMedia)

{

navigator.msGetUserMedia(videoObj,function(stream){

$(document).scrollTop($(window).height());

video.src=window.URL.createObjectURL(stream);

video.play();

},MediaErr);

}else{

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器');

returnfalse;

}

if(flag){

alert('为了获得更准确的测试结果，请尽量将二维码置于框中，然后进行拍摄、扫描。请确保浏览器有权限使用摄像功能');

}

//这个是拍照按钮的事件，

$("#snap").click(function(){startPat();}).show();

}catch(e){

printHtml("浏览器不支持HTML5CANVAS");

}

},false);

//打印内容到页面

functionprintHtml(content){

$(window.document.body).append(content+"<br/>");

}

//开始拍照

functionstartPat(){

setTimeout(function(){//防止调用过快

if(context)

{

context.drawImage(video,0,0,320,320);

CatchCode();

}

},200);

}

//抓屏获取图像流，并上传到服务器

functionCatchCode(){

if(canvas!=null)

{

//以下开始编数据

varimgData=canvas.toDataURL();

//将图像转换为base64数据

varbase64Data=imgData;//.substr(22);//在前端截取22位之后的字符串作为图像数据

//开始异步上

$.post("saveimg.php",{"img":base64Data},function(result)

{

printHtml("解析结果："+result.data);

if(result.status=="success"&&result.data!="")

{

printHtml("解析结果成功！");

}else{

startPat();//如果没有解析出来则重新抓拍解析

}

},"json");

}

</script>

<body>

<divid="support"></div>

<divid="contentHolder">

<videoid="video"width="320"height="320"autoplay>

</video>

<canvasstyle="display:none;background-color:#F00;"id="canvas"width="320"height="320">

</canvas><br/>

<buttonid="snap"style="display:none;height:50px;width:120px;">开始扫描</button>

</div>

</body></html>

导航:首页 > 源码编译 > 网站调用手机摄像头源码

网站调用手机摄像头源码

与网站调用手机摄像头源码相关的资料