博客分类：
HTML5 中的WebRTC提供了调用摄像头，录音等功能，WebRTC是“网络实时通信”（Web Real Time Communication）的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据。
getUserMedia介绍：
navigator.getUserMedia方法目前主要用于，在浏览器中获取音频（通过麦克风）和视频（通过摄像头），将来可以用于获取任意数据流，比如光盘和传感器。但是还是存在一定的兼容问题的，如下：一片红啊
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserM
if(navigator.getUserMedia){
alert("支持");
alert("您的浏览器不支持getUserMedia");
getUserMedia方法接受三个参数
navigator.getUserMedia({
video : true,
audio : true
},success,error);
getUserMedia的第一个参数是一个对象，表示要获取哪些多媒体设备，上面的代码表示获取摄像头和麦克风;success是一个回调函数，在获取多媒体设备成功时调用；error也是一个回调函数，在取多媒体设备失败时调用。
&!-- 调用摄像头video --&
&video id="video" width="300" height="350" controls&&/video&
navigator.getUserMedia({
video : true
},onSuccess,onError);
//调用成功
function onSuccess(stream){
var video = document.querySelector("#video");
if(window.URL){
video.src = window.URL.createObjectURL(stream);
video.src =
video.play();
window.URL.revokeObjectURL(stream);
//调用失败
function onError(error){
alert("navigator.getUserMedia error: "+error);
运行方式:必须在服务器中运行，可以使用http-server打开，方便快捷，当然也可以说tomcat，apache之类的，然后在浏览器中输入地址就可以了，它会提示你是否调用摄像头，
浏览: 10964 次
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'HTML5如何调用电脑或手机上的摄像头
查看: 7065|
摘要: 很多同学问的最多的一个问题就是,html5在不利用phoengap调用原生的情况下如何调用手机摄像头，今天给大家分享一个HTML5如何调用电脑或手机上的摄像头 的文章希望对大家有帮助移动设备和桌面电脑上的客户端API起初并
多同学问的最多的一个问题就是,html5在不利用phoengap调用原生的情况下如何调用手机摄像头，今天给大家分享一个HTML5如何调用电脑或手机上的摄像头 的文章希望对大家有帮助移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。HTML代码下面的代码里我写了一部分注释，请阅读：&pre&&!--
理想情况下我们应该先判断你的设备上是否 有摄像头或相机，但简单起见，我们在这里直接 写出了HTML标记，而不是用JavaScript先判断
然后动态生成这些标记
--&&video id="video" width="640" height="480" autoplay&&/video&
&button id="snap"&Snap Photo&/button&
&canvas id="canvas" width="640" height="480"&&/canvas&&/pre&在写出上面这些标记前应该判断用户的客户端是否有摄像头支持，但这里为了不那么麻烦，这里直接写出了这些HTML标记，需要注意的是我们这里使用的长宽是640×480。JavaScript代码因为我们是手工写出的HTML，所以下面的js代码会比你想象的要简单了很多。// Put event listeners into placewindow.addEventListener("DOMContentLoaded", function() {&&& // Grab elements, create settings, etc.&&& var canvas = document.getElementById("canvas"),&&& &&& context = canvas.getContext("2d"),&&& &&& video = document.getElementById("video"),&&& &&& videoObj = { "video": true },&&& &&& errBack = function(error) {&&& &&& &&& console.log("Video capture error: ", error.code); &&& &&& };&&& // Put video listeners into place&&& if(navigator.getUserMedia) { // Standard&&& &&& navigator.getUserMedia(videoObj, function(stream) {&&& &&& &&& video.src =&&& &&& &&& video.play();&&& &&& }, errBack);&&& } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed&&& &&& navigator.webkitGetUserMedia(videoObj, function(stream){&&& &&& &&& video.src = window.webkitURL.createObjectURL(stream);&&& &&& &&& video.play();&&& &&& }, errBack);&&& }&&& else if(navigator.mozGetUserMedia) { // Firefox-prefixed&&& &&& navigator.mozGetUserMedia(videoObj, function(stream){&&& &&& &&& video.src = window.URL.createObjectURL(stream);&&& &&& &&& video.play();&&& &&& }, errBack);&&& }}, false);一旦判断出用户浏览器支持getUserMedia ，下面就非常简单了，只需要将那个video元素的src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情！拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器，将视频画面画到画布上。// 触发拍照动作document.getElementById("snap")&&&&&& .addEventListener("click", function() {&&& context.drawImage(video, 0, 0, 640, 480);});当然，你还可以在图片上加一些滤镜效果….我还是把这些技术放到以后的文章里再说吧。但至少你可以将这个画布图像转换成一张图片。以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头，这不免有些复杂。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头，而且是因为HTML5的画布技术及其强大，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！有兴趣的童鞋可以试试这种方法
刚表态过的朋友 ()
上一篇：下一篇：
站长推荐 /1
Ionic3.x入门到实战（打造京东商城项目），从基础入门到项目实战，由浅入深，循序渐进，手把手教学，快速掌握Ionic3.X,学习3-15天即可独立开发项目
Powered byhtml5调用手机摄像头
项目中需要用到 html5调用手机摄像头，找了很多资料，大都是 js调用api ，做了几个demo测试发现根本不行， 后来恍然大悟，用html5自带的 input file="" ，纯html5，并且不涉及到js ，就可以实现。
代码如下：
capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。
accept表示，直接打开系统文件目录。
其实html5的input:file标签还支持一个multiple属性，表示可以支持多选，如：
加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
耕耘10载，做移动电商我们更专业！互联网解决方案提供商！
互联网解决方案提供商！你值得拥有！
今日搜狐热点html5调用摄像头功能
前些天，线上笔试的时候，发现需要浏览器同意开启摄像头，感觉像是 js 调用的，由于当时笔试，也就没想到这么多?。今天闲来无事，看了下自己的 todo，发现有这个调用摄像头的todo，才想到?。网上查了一下，果然 js 有调用摄像头的 api，为此自己写一个 demo ，避免忘记。
调用摄像头
一共有两种实现方式，一种是使用navigator.getUserMedia（该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性），前面一种已经从 Web 标准中删除，仅为了向后兼容而存在，第二种是使用navigator.mediaDevices.getUserMedia(推荐使用),这两种方法 Safari 貌似都不支持。。。。
第一种方法navigator.getUserMedia用法详见
，代码如下：
&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&摄像头调用1&/title&
&/head&
&video id=&v&&&/video&
!(function () {
function userMedia() {
return navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
if (userMedia()) {
var constraints = {
video: true,
audio: false
var media = navigator.getUserMedia(constraints, function (stream) {
var v = document.getElementById('v');
var url = window.URL || window.webkitURL;
v.src = url ? url.createObjectURL(stream) :
}, function (error) {
console.log(&ERROR&);
console.log(error);
console.log(&不支持&);
&/script&
&/body&
&/html&
第二种方法navigator.mediaDevices.getUserMedia用法详见。navigator.mediaDevices.getUserMedia 其实和第一种差不多，主要第二种返回是一个 Promise 对象，代码如下：
&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&摄像头调用2&/title&
&/head&
&video id=&v&&&/video&
!(function () {
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserM
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
const constraints = {
video: true,
audio: false
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream =& {
let v = document.getElementById('v');
// 旧的浏览器可能没有srcObject
if (&srcObject& in v) {
v.srcObject =
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.URL.createObjectURL(stream);
v.onloadedmetadata = function (e) {
}).catch(err =& {
console.error(err.name + &: & + err.message);
&/script&
&/body&
&/html&
思路是设置一个标志变量 videoPlaying 看看是否 video 有在 play，监听拍照按钮的点击事件，如果videoPlaying 为 true ，使用一个canvas 获取 video 的宽高（默认 canvas 是不显示的），然后使用 canvas 的,然后使用 canvas 的 返回一个 data url，将这个 url，设置在一个 img 标签上即可?
第一种方法navigator.getUserMedia实现代码：
&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&拍照1&/title&
&/head&
&button id=&take&&拍照&/button&
&br /&
&video id=&v& style=&width: 640height: 480&&&/video&
&canvas id=&canvas& style=&display:&&&/canvas&
&br /&
&img src=&http://placehold.it/640&text=Your%20image%20here%20...& id=&photo& alt=&photo&&
!(function () {
function userMedia() {
return navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
if (userMedia()) {
let videoPlaying =
let constraints = {
video: true,
audio: false
let video = document.getElementById('v');
let media = navigator.getUserMedia(constraints, function (stream) {
let url = window.URL || window.webkitURL;
video.src = url ? url.createObjectURL(stream) :
video.play();
videoPlaying =
}, function (error) {
console.log(&ERROR&);
console.log(error);
document.getElementById('take').addEventListener('click', function () {
if (videoPlaying) {
let canvas = document.getElementById('canvas');
canvas.width = video.videoW
canvas.height = video.videoH
canvas.getContext('2d').drawImage(video, 0, 0);
let data = canvas.toDataURL('image/webp');
document.getElementById('photo').setAttribute('src', data);
}, false);
console.log(&不支持&);
&/script&
&/body&
&/html&
第二种navigator.mediaDevices.getUserMedia实现方法:
&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&拍照2&/title&
&/head&
&button id=&take&&拍照&/button&
&br /&
&video id=&v& style=&width: 640height: 480&&&/video&
&canvas id=&canvas& style=&display:&&&/canvas&
&br /&
&img src=&http://placehold.it/640&text=Your%20image%20here%20...& id=&photo& alt=&photo&&
!(function () {
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserM
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
const constraints = {
video: true,
audio: false
let videoPlaying =
let v = document.getElementById('v');
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream =& {
// 旧的浏览器可能没有srcObject
if (&srcObject& in v) {
v.srcObject =
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.URL.createObjectURL(stream);
v.onloadedmetadata = function (e) {
videoPlaying =
}).catch(err =& {
console.error(err.name + &: & + err.message);
document.getElementById('take').addEventListener('click', function () {
if (videoPlaying) {
let canvas = document.getElementById('canvas');
canvas.width = v.videoW
canvas.height = v.videoH
canvas.getContext('2d').drawImage(v, 0, 0);
let data = canvas.toDataURL('image/webp');
document.getElementById('photo').setAttribute('src', data);
}, false);
&/script&
&/body&
&/html&
微信公众号搜索： FedJavaScript ，选择关注，与十万前端开发者一起探讨前端学习
你可能感兴趣的文章：
YouTube视频网站现在默认使用HTML5播放器，这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
HTML5规范终于在今年正式定稿，对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长，DCloud CEO王安也发表了文章，从开发者和用户两个角度分析了HTML对两个人群的优势。其实，关于HTML5的开发工具，我们以往的...
本世纪初，全球网络建设仍处于早期阶段，发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制，早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及，网民对内容的需求也不断变化。死板的文字加图片的网站...
这已经是第N次，HTML5火热了起来，这次的火热是否可以延续？
H5的最大优势就是可以在网页上直接调试和修改，而且更重要的是，它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统：Android和iOS，一个做应用的团队，怎么...
本报告数据，来源于百度统计所覆盖的超过150万的站点，而不是baidu.com的流量数据。
注：奇虎360浏览器份额在2010年10月至2011年3月，和2012年9月以来，两次大幅下降，是因为360浏览器去掉了原本的浏览器特征（User...
即使你不是技术控，你也应该感受到过去一年时间身边发生的HTML5事件，去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏，都证明了HTML5的营销价值。
HTML5已经出来很多年了，HTML5是一个基于浏览器的协作标准，可以让各种不...
在互联网行业中，一个行业从零到成熟，开发者生态也是对应的，我们今年看到很多大公司，包括像微软和Google，也参与到了HTML5
开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处？下面我们来试着讨论一下。
在前段时间的项目开发中，用到了拍照上传的地方，后来发现了最为简单的一种方法,现总结如下：
&form id=&form& method=&post& action=&http:&#x2...
HTML5技术的应用从未像今天如此火爆，从手游领域蔓延至整个移动互联网，从创业公司掘金到巨头深度介入。HTML5正推动移动互联网发展新趋势的诞生，引领未来投资的风向标，围绕HTML5创业的黄金时代即将到来。
追根溯源，HTML5手游之所以备...
HTML5最近这几年声誉鹊起，而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边，都不好意思和客户打招呼！移动应用开发中，HTML5更是不可或缺的角色，市面上不少移动应用中间件产品都号称支持HTML5，例如APP...
微信公众号搜索： FedJavaScript ，选择关注，与十万前端开发者一起探讨前端学习
本站(www.javascriptcn.com)所提供的等资源来源互联网，仅供学习研究之用，版权归该资源的合法拥有者所有，如用于商业用途，请购买正版，原作者若认为本站侵犯了您的版权，请联系我们，我们会立即删除！
鄂ICP备号-1
没有账号？