html调用摄像头的方法汇总
1.在PC端打开摄像头的方法:(移动端不能使用)
能够实现打开摄像头并截图
<!doctype html>
<html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>
<script>
function getMedia() {
let constraints = {
video: {width: 500, height: 500},
audio: true
};
//获得video摄像头区域
let video = document.getElementById("video");
//这里介绍新的方法,返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
} function takePhoto() {
//获得Canvas对象
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
}
</script>
</body>
</html>
2.在移动端打开摄像头的方法:(在PC端不能使用)
<input type=file id=browsefile accept="image/*" capture="camera" style="visibility:hidden" onchange=filepath.value=this.value>
<input type=textfield id=filepath>
<input type=button id=filebutton value="拍照" onclick="browsefile.click()">
使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。
accept表示,直接打开系统文件目录。
html调用摄像头的方法汇总的更多相关文章
- unity调用摄像头的方法
http://blog.csdn.net/cocoa_china/article/details/10527995 using UnityEngine; using System.Collection ...
- 【C#】#100 调用摄像头
需求:由于项目需要获得用户的头像,所以需要用C#调用摄像头获取头像. 下面写一个调用摄像头的方法 案例:调用摄像头的一个DEMO[效果图] 使用的类库:AForge.dll [Demo下载,Dem ...
- 【Java】调用摄像头进行拍照并保存【详细】以及处理no jniopencv_core in java.library.path的一种方法
[之前困扰笔者的问题描述] date:2019.12.18 网上教程很多,但是没有看见完整的,所以写一个出来. 调用摄像头需要javaCV的jar包和openCV的jar包,现在已经不需要安装包了 ...
- 鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总
<span style="float:left">上一篇:[!--info.pre--]</span><span style="float: ...
- 树莓派小用手册(安装系统,配置图形界面,连接WiFi,调用摄像头,安装ffmpeg)
安装树莓派系统(重装) 准备工作: 安装需要干净的TF卡(最好 8G 以上),如果是重装的话,需要先将其清理后再使用.清理步骤下面会给出,清理需要工具 DiskGenius,下载链接:http://w ...
- Java实现时间动态显示方法汇总
这篇文章主要介绍了Java实现时间动态显示方法汇总,很实用的功能,需要的朋友可以参考下 本文所述实例可以实现Java在界面上动态的显示时间.具体实现方法汇总如下: 1.方法一 用TimerTask: ...
- Android入门(十六)调用摄像头相册
原文链接:http://www.orlion.ga/665/ 一.调用摄像头 创建一个项目ChoosePicDemo,修改activity_main.xml: <LinearLayout xml ...
- UITextView实现placeHolder方法汇总
UITextField中有一个placeholder属性,可以设置UITextField的占位文字,起到提示用户的作用.可是UITextView就没那么幸运了,apple没有给UITextView提供 ...
- 将编码从GB2312转成UTF-8的方法汇总(从前台、程序、数据库)
这篇文章主要介绍了将编码从GB2312转成UTF-8的方法汇总(从前台.程序.数据库),需要的朋友可以参考下 一个网站如果需要国际化,就需要将编码从GB2312转成UTF-8,其中有很多的问题需要注意 ...
随机推荐
- 面试通用tips--来源某猎头人员
- E-R图样例
基本知识 基本的ER模型包含三类元素:实体.关系.属性. 实体(Entities):实体是首要的数据对象,常用于表示一个人.地方.某样事物或某个事件.一个特定的实体被称为实体实例(entity ins ...
- zk常见面试题
一个客户端修改了某个节点的数据,其它客户端能够马上获取到这个最新数据吗 ZooKeeper不能确保任何客户端能够获取(即Read Request)到一样的数据,除非客户端自己要求:方法是客户端在获取数 ...
- Unity-EasyTouch插件之Two Finger
今天,我们来学习下多手指触摸屏幕的事件,分别有挤压(缩放),挤压(旋转) 挤压(缩放): 在easytouch中,双手指挤压缩放的英文为Pinch 好了今天我们的测试是双手指挤压对物体进行缩放.我们测 ...
- 解决kylin报错:java.lang.IllegalStateException
一个kylin build job执行到第三步Extract Fact Table Distinct Columns时报错: 2017-05-24 20:04:07,930 ERROR [pool-9 ...
- [转]Insert, Update, and Delete Destination table with SSIS
本文转自:http://www.rad.pasfu.com/index.php?/archives/150-Insert,-Update,-and-Delete-Destination-table-w ...
- php中自定义事件---事件驱动
PHP中自定义事件驱动,处理机制. 原文:https://www.cnblogs.com/mafeifan/p/4322271.html ------------------------------- ...
- MongoDB数据库设计中6条重要的经验法则
Part 1 原文:6 Rules of Thumb for MongoDB Schema Design: Part 1 By William Zola, Lead Technical Support ...
- windows系统中常用的快捷键
开发中,一些常用的键盘技巧: (1)快速切换桌面(alt+tab)或者是(window+tab) (2)迅速关闭当前页面 (3)迅速收起所有页面 (4)直接回到桌面页面 (5)锁定你的屏幕
- 文字溢出显示省略号,兼容ie9以上浏览器
最近遇上一个问题,文字溢出展示省略号在ie上不管用,经过查找,是少了word-wrap: normal;这个css属性 width:100px; overflow: hidden; white-spa ...