<!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. leetcode 戳气球

    有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...

  2. Properties 文件的简单操作

    properties 文件里面主要 存 一个Key对应一个Value  一般用来存放账户密码资料 方法有:Properties p=new  Properties(); p.setproperty(& ...

  3. CodeForces 722A Broken Clock (水题)

    题意:给定一个时间,然后改最少的数字,使得它成为12进制或者24进制. 析:24进制主要判是不是大于23,如果是把第一位变成0,12进制判是不是大于12,如果是再看第二位是不是0,是0,第一位变成1, ...

  4. CF741D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths（dsu on tree）

    一棵根为1 的树,每条边上有一个字符(a-v共22种). 一条简单路径被称为Dokhtar-kosh当且仅当路径上的字符经过重新排序后可以变成一个回文串. 求每个子树中最长的Dokhtar-kosh路 ...

  5. Drawable新属性

    mSelectEndorseReasonTv.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.toup, 0);新属性替换: Draw ...

  6. [POI2011]Temperature

    Description The Byteotian Institute of Meteorology (BIM) measures the air temperature daily. The mea ...

  7. LightOj 1138 Trailing Zeroes (III)

    题目描述: 假设有一个数n,它的阶乘末尾有Q个零,现在给出Q,问n最小为多少? 解题思路: 由于数字末尾的零等于min(因子2的个数,因子5的个数),又因为2<5,那么假设有一无限大的数n,n= ...

  8. poj 3295 Tautology 伪递归

    题目链接: http://poj.org/problem?id=3295 题目描述: 给一个字符串,字符串所表示的表达式中p, q, r, s, t表示变量,取值可以为1或0.K, A, N, C, ...

  9. 不通过getElementByName实现获取表单数据 (document.form表单的name值.input输入框的name值)

    function update() { //document.form表单的name值.input输入框的name值 var username = document.form1.username; v ...

  10. 190 Reverse Bits 颠倒二进制位

    颠倒给定的32位无符号整数的二进制位.例如,给定输入 43261596(二进制表示为 00000010100101000001111010011100 ),返回 964176192(二进制表示为 00 ...