<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>摄像头拍照</title>
</head>
<body>
<video id="video" width="480" height="320" controls>
</video>
<div>
<button id="capture">拍照</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
<script>
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}

let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

function success(stream) {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);

//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}

function error(error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({video : {width: 480, height: 320}}, success, error);
} else {
alert('不支持访问用户媒体');
}

document.getElementById('capture').addEventListener('click', function () {
context.drawImage(video, 0, 0, 480, 320);
})
</script>
</body>
</html>
---------------------
作者：刘翾
来源：CSDN
原文：https://blog.csdn.net/c_kite/article/details/78536451
版权声明：本文为博主原创文章，转载请附上博文链接！

H5实现调用本地摄像头实现实时视频以及拍照功能的更多相关文章

  1. 调用本地摄像头并通过canvas拍照

    首先我们需要新建一个video标签,并且放到html里边 var video = document.createElement("video"); video.autoplay=& ...

  2. H5混合开发二维码扫描以及调用本地摄像头

    今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...

  3. 调用本地摄像头拍照（H5和画布）

    关于H5 和 画布 调用本地摄像头拍照功能的实现 1.代码的实现(html部分) <input type="button" title="开启摄像头" v ...

  4. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  5. 前端调用本地摄像头实现拍照（vue）

    由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. <template> <div class="camera_outer"> & ...

  6. HTML5调用本地摄像头画面，拍照，上传服务器

    实现功能和适用业务 采集本地摄像头获取摄像头画面,拍照保存,上传服务器: 前端上传图片处理,展示,缩小,裁剪,上传服务器 实现步骤 调取本地摄像头(getUserMedia)/上传图片,将图片/视频显 ...

  7. H5调用本地摄像头

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  8. H5调用本地摄像头[转]

    http://www.cnblogs.com/GoodPingGe/p/4726126.html <!DOCTYPE html><html><head lang=&quo ...

  9. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

随机推荐

  1. 使用反射机制恢复xml文件表示的对象

    完成如下功能:1)有一个(任意)对象,里面有N个properties以及getter和setter方法2)有一个properties文件,有N个key,value来描述对象中property的值3)有 ...

  2. jenkins配置发送邮件时，日志中显示发送成功，但是邮箱没有收到邮件

    遇到这种问题,是因为安装的Email Extension Plugin插件版本与jenkins不兼容, 经试验2.39.3版本可以正常发送邮件,在jenkins主目录中 将2.39.3的文件和文件夹复 ...

  3. bzoj1138

    dp+spfa优化 最朴素的dp是dp[i][j]表示i->j的最短路,然后把所有pair(i,i)放到队列里跑spfa,但是这样被卡掉了,那么我们要优化一下 问题在于每次我们转移的时候要枚举i ...

  4. bzoj1756

    1756: Vijos1083 小白逛公园 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1150  Solved: 371[Submit][Statu ...

  5. 【140】◀▶ ArcGIS技巧

    目录: Add XY Data 图例修改 中文字符左斜体设置 专题图只显示“度” 制作渐变图例 待定 待定 待定 1. 在ArcGIS中插入含有经纬度的*.txt或者*.xls文件等 File> ...

  6. 关于MYSQL编辑乱码问题

    今天在SQLyog中编写表数据时突然出现一个bug,在此记录分享一下. 使用MySQL数据库时,讲中文插入到数据苦衷进行刷新后全部都变成了乱码问号,如下图中studentName列: 产生乱码是因为没 ...

  7. java web课程设计截图和服务器地址

    企业办公测试截图和服务器地址 本篇博客主要围绕以下几个部分展开,登录.系统管理.工作流.个人事务管理.内部邮件.公共信息共六个部分.主要有界面截图和简要介绍. 一.登录.更改密码界面 登录界面包括以管 ...

  8. vue 相关技术文章集锦

    不断更新,如果看到好的文章~~~ 总结篇 vue组件间通信六种方式(完整版) - 原作者:简书-浪里行舟 原理/源码篇 Vue.js 技术揭秘 Vue技术内幕 实战/经验篇 Vue相关开源项目库汇总 ...

  9. 树上最长链 Farthest Nodes in a Tree LightOJ - 1094 && [ZJOI2007]捉迷藏 && 最长链

    树上最远点对(树的直径) 做法1:树形dp 最长路一定是经过树上的某一个节点的. 因此: an1[i],an2[i]分别表示一个点向下的最长链和次长链,次长链不存在就设为0:这两者很容易求 an3[i ...

  10. 配置Ubuntu16.04第03步：安装搜狗输入法

    1.进入搜狗官网:https://pinyin.sogou.com/linux/ ,下载搜狗输入法安装包 2.使用dpkg命令安装Deb包: sudo dpkg -i sogoupinyin_2.0. ...