如何html5在浏览器里访问手机后置摄像头
TML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：
1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的
android手机，浏览器chrome32版本下实现了浏览器调用设备摄像头进行拍照。主要分3个步骤来完成:
1）获取视频流
添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源
var video = 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图像的输入
function scamera() {
var videoElement = document.getElementByIdx_x_x('video');
var canvasObj = document.getElementByIdx_x_x('canvas1');
var context1 = 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图像
var imgData=canvas.toDataURL(“image/png”);
imgData格式如下：”data:image/png;base64,xxxxx“
真正图像数据是base64编码逗号之后的部分
html5需要使用接口chrome30+ for android 已经实现了利用webcam，调用手机后置摄像头，代码如下：
HTML5 GetUserMedia Demo
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); }
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 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：
1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的
如果是在手机浏览器上运行的，直接使用input type=file标签可以调用摄像头，文件夹那些。如果是嵌在webview里面的话，file标签被禁用，需要安卓改写openFileChooser的相关方法，具体可以看这个文章http://my.oschina.net/aicoding/blog/90689
我也是后来才发现，chrome好像不支持访问后置摄像头，不知道怎么回事，但firefox和opera是支持访问后置摄像头的，你可以试试
我也是后来才发现，chrome好像不支持访问后置摄像头，不知道怎么回事，但firefox和opera是支持访问后置摄像头的，你可以试试
怎么让浏览器支持html5怎么让浏览器支持flash
在以“HTML5播放器”为小标题的第一段文字下面有个“→【使用点我】←”的链接，点击该链接。就会弹出一个小窗口，显示“HTML5播放器使用”，在下面的文字“开启HTML5播放器试用”前的选框中打√即可。但我发现在edge浏览器中“开启HTML5播放器试用”前的选框显示灰色，无法打勾，于是使用ie浏览器...
怎样用html5实现在微信内置浏览器中正常播放视频?
安卓版微信直接调用系统浏览器内核，系统需要升级，老系统没法用微信本身并没有自己开发一款浏览器，安卓端的微信使用的是一个自带的专用浏览器，一个精简版的手机QQ浏览器，新版微信的内置浏览器也是手机qq浏览器内核，对html5的支持很不错
如何让ie浏览器支持html5ie支持html5么
如何让ie浏览器支持html5 让ie浏览器支持html5标签 HTML5出现很久了。很多网站都改版了页面。为了减少代码量(没有太多的类名)，提高加载速度，改善标签的语义，网页中广泛使用了section、article、header等HTML5标签。最近在写一个响应式布局的例子，也是用header之类的标签。我还是希望能让它兼容“老浏览...
html5如何在手机浏览器上播放mp3文件
这跟音频文件格式和浏览器是什么有关系，由于在支持 HTML5 的所有浏览器中仅存在几种支持的格式，因此要赢得最大范围的受众，则可以使用 source 元素指定要尝试的多种文件格式。<audio controls="true"> <source src="demo.mp3" type="audio\/mp3"> <source src="demo.ogg" type="audio\/ogg...
为什么自己做的html5的代码在浏览器运行总是没反应
教你个在开发中找错最有效的方法，加减法，先就在一个html文件保持最基本的样式，然后把你的代码一级一级往上面添加！
Macbook用网页看视频怎么用html5
使用文本编辑编辑html5，然后用Mac自带浏览器运行html5，Mac电脑自带方便快捷，缺点是复杂的html5布局会混乱。复杂的html5可以在Mac上下载专门的web工具，下载相应的软件进行html5开发，如VSCode以.html结尾的文件可以使用文本编辑打开，也可以使用Mac自带浏览器直接打开 ...
支持html5播放器的浏览器有哪些?
资料来源航歌网，其他浏览器则根据内核为准。网上有专门的H5兼容性测试网站，由于回答策略的限制无法发送链接，自己找找就有了 FormFollowsFunction就是一个展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互操作以及视觉效果。这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色...
如何使用html5?
5，循环播放 使用loop属性让视频播放结束时，再从头开始播放。<video src="hangge.mp4" controls loop><\/video>1 6，设置替换视频的图片（封面图片）通过poster属性可以设置，浏览器在下面三种情况下会使用这个图片：（1）视频第一帧未加载完毕 （2）把preload属性设置为none （3）没有找到指定的视频...
ie怎么支持html5ie支持html5吗
如何让ie浏览器支持html5 让ie浏览器支持html5标签 HTML5出现很久了。很多网站都改版了页面。为了减少代码量(没有太多的类名)，提高加载速度，改善标签的语义，网页中广泛使用了section、article、header等HTML5标签。最近在写一个响应式布局的例子，也是用header之类的标签。我还是希望能让它兼容“老浏览...
请问支持Html5的浏览器有那些
如图：2.HTML5网页内嵌对象 HTML5 最令人期待的地方，包括内置画布canvas，视频，音频等对象。这方面结果还算乐观，Chrome，Safari，Firefox 3.6，Opera 10.5都能全部支持。IE家族则全军覆没。3.html5音频视频编码 Opera 10.5 支持的最全，IE 家族又是全军覆没。其他浏览器也不容乐观。音频：视频：4...
戎詹复方： 一、iOS + Safari1、打开手机web检查器.通过【设置】>【Safari】>【高级】>【Web检查器】打开.见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好.2.链接电脑(Mac)2.1 先在手机Safari中打开你想调...
巴州区19248363338： html5文件怎么在手机上打开 - ？
戎詹复方： 直接打开就可以了,如果提示你选择什么程序打开,选择你手机上的浏览器打开就可以了.
巴州区19248363338： 如何html5在浏览器里访问手机后置摄像头 - ？
戎詹复方： 我也是后来才发现, chrome好像不支持访问后置摄像头, 不知道怎么回事, 但firefox和opera是支持访问后置摄像头的,你可以试试
巴州区19248363338： 怎么在手机上查看自己做的html5页面 - ？
戎詹复方： 给自己的电脑设置一个局域网内的动态ip,比如:192.168.1.5 电脑安装了如xampp之类的服务器运行环境,将做好的页面放到安装目录下,手机输入192.168.1.5/+目录,或者用浏览器生成二维码功能,直接扫码.
巴州区19248363338： 如何在移动设备上调试html5开发的网页 - ？
戎詹复方： 移动设备上调试html5开发的网页方法:一、iOS + Safari通过【设置】>【Safari】>【高级】>【Web检查器】打开.见下图:二、Android + Chrome【设置】>【关于手机】>【版本号(Build number)】,对版本号这一项连点7下(这是官方文档里的说法)就会提示“你已成为开发者”.
巴州区19248363338： 如何使用Html5生成安卓手机桌面图标? - ？
戎詹复方： HTML5是没有这个功能的,可以使用浏览器的内置发送到桌面图标功能,以下以UC为例:1、进入UC浏览器首页后,点击所示的图标2、会看到【书签/历史】点击它 3、进入书签后,随后长按几秒你想发送到手机桌面的书签网址4、接着会弹出后台打开、删除书签、编辑书签、加入导航、发送至桌面五个操作按钮,点击【发送至桌面】出现添加桌面书签,点击【确定】5、发送桌面成功,退出后就可以看到书签在手机桌面上.随时想看就看,很方便的哦
巴州区19248363338： 手机浏览器怎么支持html5拍照 - ？
戎詹复方： 最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个<input id=＂input＂ type=＂file＂/>标签,iOS直接就支持吊起相机拍照或是相册选择,但android中不支持吊起相机拍照,只能吊起相册选择,...
巴州区19248363338： 如何通过Html网页调用本地安卓app - ？
戎詹复方： 通过Html网页调用本地安卓app 一、通过html页面打开Android本地的app1、首先在编写一个简单的html页面<html><head><meta http-equiv=＂Content-Type＂ content=＂text/html; charset=UTF-8＂><title>Insert title here</title></head><...
巴州区19248363338： html5页面怎么支持手机浏览器 - ？
戎詹复方： html5页面是和手机浏览器兼容的.BootStrap响应式开发.开发手机端响应式布局网站,适合移动开发人员学习.也就是响应式开发.
巴州区19248363338： 怎么让手机访问html网页 - ？
戎詹复方： 那要把HTML文件上传服务器绑定域名,然后用手机访问域名就可以了啊!
