JavaScripts调用摄像头【MediaDevices.getUserMedia()】
h5调用摄像头(允许自定义界面)【MediaDevices.getUserMedia()】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.video-wrapper{
position: relative;
}
.mask{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .6);
}
.content{
position: absolute;
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;
z-index: 9;
}
</style>
</head>
<body>
<div class="video-wrapper">
<div class="mask"></div>
<div class="content">
<video id="video" width="480" height="320" controls>
</video>
</div>
</div>
<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>
JavaScripts调用摄像头【MediaDevices.getUserMedia()】的更多相关文章
- 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE
<template> <div> <!--canvas截取流--> <canvas ref="canvas" ...
- getUserMedia API及HTML5 调用摄像头和麦克风
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- js调用摄像头
详情源码请参见下方的 GitHub !!! <div> <b>调用移动端摄像头</b><br> <label>照相机: <input ...
- [转]html5调用摄像头实例
原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...
- html调用摄像头的方法汇总
1.在PC端打开摄像头的方法:(移动端不能使用) 能够实现打开摄像头并截图 <!doctype html> <html lang="en"> <hea ...
- 摄像头调用,h5调用摄像头进行扫一扫插件备份
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia,做扫描二维码,并识别内容
本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- html5调用摄像头截图
关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...
随机推荐
- 【LeetCode】238. Product of Array Except Self 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 两次遍历 日期 题目地址:https://leetcode.c ...
- 【LeetCode】647. Palindromic Substrings 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:暴力循环 方法二:固定起点向后找 方法三:动 ...
- 【LeetCode】48. Rotate Image 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 记一次引入Elasticsearch的系统架构实战
前言 我曾经面试安踏的技术岗,当时面试官问了我一个问题:如果你想使用某个新技术但是领导不愿意,你怎么办? 对于该问题我相信大家就算没有面试被问到过,现实工作中同事之间的合作也会遇到. 因此从我的角度重 ...
- visual studio code的python编程中遇到的SyntaxError:invalid syntax问题的原因和解决办法
一.问题重现描述 1.最开始,正常执行语句 2.当我在"终端窗口"输入python进入交互模式后,再选择默认的"在终端中运行python文件"运行代码报错 3. ...
- IOS 如何获取app更新链接 如【itms-apps://itunes.apple.com/cn/app/id1362432761?mt=8】
这是iTunes接口地址 ,有兴趣可以看一下,我们要用到的接口如下,xxx 处换成自己 App 的 AppId ,AppId 可以在 iTunes Connect 里面看到. http://itune ...
- Two pointer方法
I.何为Two pointer 用两个哨兵指向两个序列,通过利用序列本身的性质减少遍历次数,来更快得解决一些归并问题 基本问题 给定一个正整数递增序列和一个正整数M,求序列中两个不同位置的a,b使得a ...
- 使用 windows bat 脚本命令 一键启动MySQL服务
@echo off rem Copyright (c) 2019 Moses and/or its affiliates. rem Get Administrator Rights >nul 2 ...
- 编写Java程序,演练匿名内部类应用
返回本章节 返回作业目录 需求说明: 定义一个抽象类 Bird,创建使用匿名内部类的操作类Action. 实现思路: 定义抽象类Bird.在其中定义一个String类型的name属性,一个返回类型是i ...
- VMware桥接模式连接局域网和互联网
第一步:确认本地网关地址 第二步选择桥接模式: 我比较幸运,桥接到"自动",就已经连接成功.不用逐个试错. 修改 ifcfg-ens33 和 新建 ifcfg-br0 [root@ ...