web调用相机_手机web页面怎么调用摄像头执行扫描获取数据

㈠如何使用jquery webcam 调用摄像头

jQueryWebcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互，可以显示Webcam输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。

一、jQuery Webcam介绍

jQuery的摄像头插件是一个透明层，用相机直接在JavaScript中的沟通。

这个插件提供了三种不同的模式，通过一个小的接入网络摄像头应用程序接口直接与JavaScript
-或者更准确地说是jQuery。因此，它是可能带来的图像在画布上（回调模式），存储图像在服务器（保存模式）和流的Flash元素的实况图像画布上（流模式）。

二、jQuery Webcam使用方法

简单调用
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});

参数说明

windth：flash文件的宽度

height：flash文件的高度

mode：储存模式：callback, save, stream

swffile：flash文件的地址

拍照

调用webcam.capture();方法实现拍照。

保存照片

webcam.save();方法实现保存照片，简单调用里面的onSave参数是保存照片的方法，接收一个函数为照片
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data) {
var col = data.split(";");
var img = image;
for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
location.reload();
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;

if (pos >= 4 * 320 * 240) {
$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
location.reload();
});
pos = 0;
}
};
}

以上是官方的例子，创建一个canvas来保存图片，然后上传到服务端。

㈡微信web前端开发，调用设备相机和相册的接口怎么用

可以使用微信的测试平台进行测试，企业号的调用机和相册的代码如下:

㈢手机web页面怎么调用摄像头执行扫描，获取数据

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
1、视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：

var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas);

3、图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22);

如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length; //atob 可解码用base-64解码的字串

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data});

在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}

㈣用html5怎么在移动端打开相机

HTML5如何在移动网页端调用手机图片或者camera可以参考这篇文章：
如果你开始基于iOS系统(ios6 above) 的web应用，可以考虑这段代码：

点击按钮，会调用你的摄像头相册
附源码文件：
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

㈤ android 中实现网页调用摄像头功能怎么实现

android 中实现网页调用摄像头功能方法·如下：
1. 首先在Manifest.xml中添加如下权限：

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.CAMERA"/>

<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
2. 编写index.html放在android项目下的assests目录下：
index.html:
<html>
<head>
<title>Webview capture testing...</title>
<script type="text/javascript">

//android中调用js方法
function wave() {
alert('cc2');
document.getElementById("droid").innerHTML ="android_waving.png";
}

//android中调用js方法2，并更id为"droid"的span标签的值及新刚拍的照片显示到"pic0"里
function wave2(name) {
alert(name);
document.getElementById("droid").innerHTML = "Photopath: " + name;
document.getElementById("pic0").src=name;
}

//html的点击事件，并通过"window.demo.clickOnAndroid"触发android中的clickOnAndroid方法
function clickOnHtml () {
var fileName = window.demo.clickOnAndroid();
//wave2(fileName);
}

//
function revert() {
alert('cc');
document.getElementById("droid").innerHTML ="aa2";
}

</script>
<style type="text/css">
body{
font:14px;
color:#333;
line-height: 1.8em;
margin: 0;
padding: 0;
width:480px;
}
html{
outline: none;
hide-focus:expression(this.hideFocus=true);
}
</style>
</head>
<body>
<div>
<li>
<p>Here is the funtion to TakePhoto in html</p>

<a onClick="window.demo.clickOnAndroid()">TakePhoto</a><br/>
<span id='droid'>Photopath:</span>
<br/>
<br/>
<p>Here is the funtion to revert in html</p>
<input type="button" onclick="revert();" value="Revert" /> <br/>
<input type="button" onclick="javascript:window.top.location.reload()" value="Refresh" />
</li>
</div>
<div>
<p id="picpath">PhotoPath</p>
<img alt="ddd" id="pic0" width="200" height="200" src="/storage/sdcard0/webview_camera/testimg23.8156950140954181.jpg" />
</div>
</body>
</html>
3、编写Activity的布局activity_camera_webview.xml：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".CameraWebviewActivity" >

<Button
android:id="@+id/bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Camera"
android:layout_alignParentTop="true"
/>

<WebView
android:id="@+id/wv"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="@+id/bt"
/>

</RelativeLayout>
4.、编写activity：
public class CameraWebviewActivity extends Activity {

private final static String TAG = "CameraWebviewActivity";

private Button bt;
private WebView wv;
public String fileFullName;//照相后的照片的全整路径
private boolean fromTakePhoto; //是否是从摄像界面返回的webview

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_camera_webview);
initViews();
}

private void initViews() {

bt = (Button) findViewById(R.id.bt);
bt.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
System.out.println("----------------");
takePhoto( Math.random()*1000+1 + ".jpg");
}
});

wv = (WebView) findViewById(R.id.wv);
WebSettings setting = wv.getSettings();
setting.setJavaScriptEnabled(true);
wv.setWebViewClient(new WebViewClient(){
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
}

@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}

});

wv.setWebChromeClient(new WebChromeClient(){
@Override//实现js中的alert弹窗在Activity中显示
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.d(TAG, message);
result.confirm();
return true;
}
});

wv.loadUrl("file:///android_asset/index.html");
final Handler mHandler = new Handler();
//webview增加javascript接口，监听html页面中的js点击事件
wv.addJavascriptInterface(new Object(){
public String clickOnAndroid() {//将被js调用
mHandler.post(new Runnable() {
public void run() {
fromTakePhoto = true;
//调用启用摄像头的自定义方法
takePhoto("testimg" + Math.random()*1000+1 + ".jpg");
System.out.println("========fileFullName: " + fileFullName);

}
});
return fileFullName;
}
}, "demo");
}

/*
* 调用摄像头的方法
*/
public void takePhoto(String filename) {
System.out.println("----start to take photo2 ----");
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
intent.putExtra(MediaStore.EXTRA_MEDIA_TITLE, "TakePhoto");

//判断是否有SD卡
String sdDir = null;
boolean isSDcardExist = Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED);
if(isSDcardExist) {
sdDir = Environment.getExternalStorageDirectory().getAbsolutePath();
} else {
sdDir = Environment.getRootDirectory().getAbsolutePath();
}
//确定相片保存路径
String targetDir = sdDir + "/" + "webview_camera";
File file = new File(targetDir);
if (!file.exists()) {
file.mkdirs();
}
fileFullName = targetDir + "/" + filename;
System.out.println("----taking photo fileFullName: " + fileFullName);
//初始化并调用摄像头
intent.putExtra(MediaStore.Images.Media.MIME_TYPE, "image/jpeg");
intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(fileFullName)));
startActivityForResult(intent, 1);
}

/*
* (non-Javadoc)
* @see android.app.Activity#onActivityResult(int, int, android.content.Intent)
* 重写些方法，判断是否从摄像Activity返回的webview activity
*/
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
System.out.println("----requestCode: " + requestCode + "; resultCode " + resultCode + "; fileFullName: " + fileFullName);
if (fromTakePhoto && requestCode ==1 && resultCode ==-1) {
wv.loadUrl("javascript:wave2('" + fileFullName + "')");
} else {
wv.loadUrl("javascript:wave2('Please take your photo')");
}
fromTakePhoto = false;
super.onActivityResult(requestCode, resultCode, data);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.camera_webview, menu);
return true;
}

}

㈥ webview调用摄像头只显示一半画面

只有一半画面是因为摄像头前端被东西遮挡住了
到摄像头前看一下就可知道了。要不就是摄像头坏了，把摄像头卸下，在监控室中进行测试一下。
像你这种情况如果在待机的情况和你做其他事情的情况下屏幕都是好的，只有照相的时候屏幕有一半是黑的，那么我可以很准确的说摄像头有问题。
摄像头如果是直接焊在手机主板上的话那它就是坏了，第二如果你摄像头是通过排线插在主板上的有可能是你手机摔过造成排线插口的位置松动接触不良而导致的画面一半有一半没有。

㈦ html5怎样调用手机摄像头或者相册

㈧微信web前端开发，调用设备相机和相册的接口怎么用

调用相机和相册，可以使用H5的新特性，input type = file，代码段为

<inputtype="file"id="imgUpload"accept="image/jpeg,image/jpg,image/png"/>

查阅网上的资料，你可能会查到

accept="image/*"

这样写的确没错，*代表全部类型，但是亲测有个问题就是打开相册或者相机特别慢。要等20-30s左右。所以还是要详细写各种类型。望采纳谢谢！

㈨如何通过html5调用摄像头拍照

1. 项目背景
网站项目基于HTML5+AngularJs开发，正在做一个由HTML5调用摄像头拍照，从而实现修改头像的功能。起初觉得HTML5拍照很简单，但是做的时候才发现HTML5获取摄像头并不是那么容易。
2. 如何调用摄像头
$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;

navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getMedia) {
navigator.getMedia(
{
video: true
},
// successCallback
function (stream) {
var s = window.URL.createObjectURL(stream);
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
mediaStream = stream;
track = stream.getTracks()[0];
$scope.photoBtnDiable = false; $scope.$apply();
},
// errorCallback
function (err) {
$scope.errorPhoto();
console.log("The following error occured:" + err);
});
} else {
$scope.errorPhoto();
}

代码解析：
navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AnlarJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：
{
video: true，
audio: true
}

调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。
3. 拍照
$scope.snap = function () {
var canvas = document.createElement('canvas');
canvas.width = "400";
canvas.height = "304";

var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 400, 304);
$scope.closeCamera();
$uibModalInstance.close(canvas.toDataURL("image/png"));
};

拍照时需要使用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸大小，通过drawImage函数将video当前的图像保存到canvas标签，最后将图像数据转换为base64数据返回并关闭摄像头，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的一个对象，用来控制弹出层的显示。
4. 如何关闭摄像头
$scope.closeCamera = function () {
if (mediaStream != null) {
if (mediaStream.stop) {
mediaStream.stop();
}
$scope.videosrc = "";
}
if (track != null) {
if (track.stop) {
track.stop();
}
}
}

正如前面所说，关闭摄像头的方式是通过mediaStream和track变量，只不过，track只能关闭Chrome浏览器中的摄像头，这也是Chrome 45版本以上关闭摄像头的方式。
5. 集成到AnlarJs
事实上，前面所说的都是在AnlarJs中实现的，当然，这里只是实现了拍照并返回拍照数据，我们想要在其他地方也使用，就需要将这部分独立出来，这里我们用到了AngularJs中的service机制，将这部分单独做成一个service并在项目中注入，然后就可以在其他地方调用了。
service注册:
app().registerService("h5TakePhotoService", function ($q, $uibModal) {

this.photo = function () {
var deferred = $q.defer();
require([config.server + "/com/controllers/photo.js"], function () {
$uibModal.open({
templateUrl: config.server + "/com/views/modal_take_photo.html",
controller: "photoModalController",
windowClass: "modal-photo"
}).result.then(function (e) {
deferred.resolve(e);
});
});
return deferred.promise;
}

});

调用方式：
$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage = res;
}
});
}

h5TakePhotoService为控制器中注入的拍照service对象，最后处理返回的图像数据，设置数据显示到界面上。
6. 兼容问题
主要存在Chrome浏览器中，本地测试时，Chrome浏览器中能够正常使用，但是部署到服务器后就不能正常使用，报错消息为 [object NavigatorUserMediaError]，这是因为Chrome浏览器在使用摄像头时只支持安全源访问，所以只能通过https访问才能正常使用。
最后需要说一下，测试时只能通过http://url访问才能使用，不能通过file://url方式访问，即我们需要将代码部署才能访问，可以在Visual Studio、 java web、php中完成。

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

1、实现头的方法代码。

注意事项：

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

web调用相机

与web调用相机相关的内容