<!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. 常见电商项目的数据库表设计（MySQL版）

    转自:https://cloud.tencent.com/developer/article/1164332 简介: 目的: 电商常用功能模块的数据库设计 常见问题的数据库解决方案 环境: MySQL ...

  2. 超强XSS攻击利器

    ======================================================================= BackTrack 5 R1 XSS研究之XSSer(超 ...

  3. bzoj 3307: 雨天的尾巴【树剖lca+树上差分+线段树合并】

    这居然是我第一次写线段树合并--所以我居然在合并的时候加点结果WAWAWAMLEMLEMLE--!ro的时候居然直接指到la就行-- 树上差分,每个点建一棵动态开点线段树,然后统计答案的时候合并即可 ...

  4. bzoj 1625: [Usaco2007 Dec]宝石手镯【背包】

    裸的01背包 #include<iostream> #include<cstdio> using namespace std; int c,n,w,v,f[20001]; in ...

  5. P4575 [CQOI2013]图的逆变换

    传送门 如果新的图里存在边\((u,v)\),那么说明原图中\(u\)的终点和\(v\)的起点是同一个点 于是可以对新图中的每个点维护它的起点和终点,如果有一条边就把对应两个应该相等的点用并查集连起来 ...

  6. 【练习】Java实现的杨辉三角形控制台输出

    import java.util.Scanner; /** * YangHui_tst01 * @author HmLy * @version 000 * - - - - - - - * 练习代码.( ...

  7. 第五篇(那些JAVA程序BUG中的常见单词)

    The left-hand side of an assignment must be a variable 赋值的左侧必须是变量 left-hand side 左边 assignment 赋值

  8. SpringMVC Model，ModelMap ModelAndView

    SpringMVC 调用方法之前会创一个隐含的模型对象(即Model,ModelMap ModelAndView) //@ModelAttribute 先于login方法执行 @ModelAttrib ...

  9. docker 端口被占用问题解决

    启动容器A, A的端口映射是 80:8080 外部的25000端口映射到服务内部的8080端口:有时候将容器关闭,重新构建镜像及启动容器时会出现一些报错, 比如端口被占用的报错,但通过docker p ...

  10. ACM二分查找模板

    int main(){ == key int m; while ( l <= r ) { m = ( l + r ) >> 1; if ( x[m] == key ) return ...