当前位置:网站首页>JS调用摄像头
JS调用摄像头
2022-07-06 09:25:00 【星时代曹波涛】
<!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> //获得video摄像头区域 let video = document.getElementById("video"); function getMedia() {
let constraints = {
video: {
width: 500, height: 500}, audio: true }; /* 这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia() 这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等) 返回的是一个Promise对象。 如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then() 如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch() */ let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(function (MediaStream) {
video.srcObject = MediaStream; video.play(); }).catch(function (PermissionDeniedError) {
console.log(PermissionDeniedError); }) } function takePhoto() {
//获得Canvas对象 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 500, 500); } </script>
</body>
</html>
边栏推荐
- Want to change jobs? Do you know the seven skills you need to master in the interview software test
- Your wechat nickname may be betraying you
- HDU - 6024 Building Shops(女生赛)
- Cost accounting [14]
- CS zero foundation introductory learning record
- Jupyter installation and use tutorial
- Research Report of pharmaceutical solvent industry - market status analysis and development prospect prediction
- Medical colposcope Industry Research Report - market status analysis and development prospect forecast
- cs零基础入门学习记录
- Unpleasant error typeerror: cannot perform 'ROR_‘ with a dtyped [float64] array and scalar of type [bool]
猜你喜欢
Learning record: Tim - capacitive key detection
力扣刷题记录
STM32如何使用STLINK下载程序:点亮LED跑马灯(库版本)
UCORE LaB6 scheduler experiment report
Matlab comprehensive exercise: application in signal and system
Visual analysis of data related to crawling cat's eye essays "sadness flows upstream into a river" | the most moving film of Guo Jingming's five years
FSM和i2c实验报告
基于485总线的评分系统
Flex --- detailed explanation of flex layout attributes
Your wechat nickname may be betraying you
随机推荐
How to build a nail robot that can automatically reply
VS2019初步使用
STM32學習記錄:輸入捕獲應用
12306: mom, don't worry about me getting the ticket any more (1)
ucore lab5
Cost accounting [23]
Unpleasant error typeerror: cannot perform 'ROR_‘ with a dtyped [float64] array and scalar of type [bool]
数据在内存中的存储&载入内存,让程序运行起来
STM32学习记录:输入捕获应用
学习记录:TIM—电容按键检测
Visual analysis of data related to crawling cat's eye essays "sadness flows upstream into a river" | the most moving film of Guo Jingming's five years
Report on the market trend, technological innovation and market forecast of printing and decorative paper in China
Learning record: Tim - Basic timer
Accounting regulations and professional ethics [2]
STM32 learning record: play with keys to control buzzer and led
Cost accounting [19]
学习记录:如何进行PWM 输出
Flex --- detailed explanation of flex layout attributes
Learning record: understand systick system timer and write delay function
LeetCode#237. Delete nodes in the linked list