<!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. NPU 2015年陕西省程序设计竞赛网络预赛（正式赛）F题 和谐的比赛（递推 ||卡特兰数（转化成01字符串））

    Description 今天西工大举办了一场比赛总共有m+n人,但是有m人比较懒没带电脑,另外的n个人带了电脑.不幸的是,今天机房的电脑全坏了只能用带的电脑,一台电脑最多两人公用,确保n>=m. ...

  2. Sql Server 查询重复记录

    参考网址:http://database.51cto.com/art/201103/250046.htm SQL Server数据库多种方式查找重复记录 select * from dbo.T0058 ...

  3. E20180228-hm-xa

    bounds n. 界限; 界限; 出界; 在(某人允许进入的)界限以外; 出格的; 跳跃( bound的名词复数 ); (球等的) 反跳; indice  n. 指数(指指标, 如健康指数的指数); ...

  4. codeforces 880E. Maximum Subsequence(折半搜索+双指针)

    E. Maximum Subsequence time limit per test 1 second memory limit per test 256 megabytes input standa ...

  5. bzoj3550: [ONTAK2010]Vacation（单纯形法+线性规划）

    传送门 直接暴力把线性规划矩阵给打出来然后单纯形求解就行了 简单来说就是每个数记一个\(d_i\)表示选或不选,那么就是最大化\(\sum d_ic_i\),并满足一堆限制条件 然后不要忘记限制每个数 ...

  6. Poj 2516 Minimum Cost (最小花费最大流)

    题目链接: Poj  2516  Minimum Cost 题目描述: 有n个商店,m个仓储,每个商店和仓库都有k种货物.嘛!现在n个商店要开始向m个仓库发出订单了,订单信息为当前商店对每种货物的需求 ...

  7. CentOS安装GlassFish4.0 配置JDBC连接MySQL

    转自:http://linux.it.net.cn/CentOS/course/2014/0724/3319.html 版本glassfish-4.0.zip 1.解压,拷贝到指定安装路径   unz ...

  8. 移动web开发基础（二）——viewport

    本文主要研究为什么移动web开发需要设置viewport,且一般设置为<meta name="viewport" content="width=device-wid ...

  9. java封装的优点

    在面向对象程式设计方法中,封装(英语:Encapsulation)是指一种将抽象性函式接口的实现细节部份包装.隐藏起来的方法. 封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代码随机 ...

  10. AJPFX关于代码块的总结

    代码块:        {                执行语句;        }(1) 当出现在局部位置时, 为局部代码块.        局部位置: 如语句块中, 函数中, 构造代码块中, 静 ...