js调用（前/后）摄像头，截取照片，关闭摄像头

全部代码：（详细注释已在代码中标明）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title>
</head>
<body>
<p><button onclick="openMedia()">打开</button><button onclick="closeMedia()">关闭</button><button onclick="drawMedia()">截取</button>
</p>
<!-- 摄像展示要用video标签 -->
<video id="video" class="bg" ></video>
<!-- 截取的照片用canvas标签展示 -->
<canvas id="qr-canvas"></canvas>
</body>
<script type="text/javascript">var video = document.querySelector('video');var text = document.getElementById('text');var canvas1 = document.getElementById('qr-canvas');var context1 = canvas1.getContext('2d');var mediaStreamTrack;// 一堆兼容代码window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}return new Promise(function(resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});}} //摄像头调用配置var mediaOpts = {audio: false,video: true,video: { facingMode: "environment"}, // 调用前置摄像头
// video: { width: 1280, height: 720 },  //影响呈现的大小。注意不能用百分比
//  video: { facingMode: { exact: "environment" } }// 这个是调用后置摄像头}// 回调function successFunc(stream) {mediaStreamTrack = stream;video = document.querySelector('video');if ("srcObject" in video) {video.srcObject = stream} else {video.src = window.URL && window.URL.createObjectURL(stream) || stream}video.play();}function errorFunc(err) {alert(err.name);}// 正式启动摄像头function openMedia(){navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);}//关闭摄像头function closeMedia(){mediaStreamTrack.getVideoTracks().forEach(function (track) {track.stop();context1.clearRect(0, 0,context1.width, context1.height);//清除画布});}//截取视频function drawMedia(){canvas1.setAttribute("width", video.videoWidth);canvas1.setAttribute("height", video.videoHeight);context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);}</script></html>

重点提取

/摄像头调用配置var mediaOpts = {audio: false,video: true,video: { facingMode: "environment"}, // 调用前置摄像头
// video: { width: 1280, height: 720 },  //影响呈现的大小。注意不能用百分比
//  video: { facingMode: { exact: "environment" } }// 这个是调用后置摄像头}

//截取视频function drawMedia(){canvas1.setAttribute("width", video.videoWidth);canvas1.setAttribute("height", video.videoHeight);context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);}

js调用（前/后）摄像头，截取照片，关闭摄像头相关推荐

com调用excel后，进程未关闭解决方案
COM调用结束后,进程未关闭 1. c++ com C++直接调用com的,可以通过Application::GetHwnd()获取窗口句柄,之后通过窗口句柄获取进程pid,然后kill进程,参考下面 ...
JS返回前一页（或关闭本页面，返回首页）
navigator.userAgent在判断浏览器版本时,需要自己核对下,不同的浏览器返回的window.history.length值也不同,需要特殊情况特殊处理,但核心逻辑就是如此,先判断浏览器版 ...
js调用APP后，如果有App直接进App，没有则进入App下载页面
在网上找了一圈,都没有合格的. 看下边这段 setTimeout(function() {alert('你还没安装,去下载去');// 去某个下载页面// const u = navigator.us ...
JS调用摄像头拍照，上传图片并显示到前端页面
本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下: index.jsp 展示界面,按钮点击拍照,将拍照图片显示 <img id="showImage_img ...
js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
利用JS调用手机摄像头小功能源码
介绍: 一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限. 1.由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari ...
js调用pc摄像头实现拍照、录视频等，新版Chrome无访问http页面无法打开麦克风、摄像头
js调用pc摄像头实现拍照.录视频等,新版Chrome无访问http页面无法打开麦克风.摄像头新版Chrome配置 vue环境下的前端 function部分 ##由于没有https环境,只有http ...
nw.js 调用驱动程序_使用NW.js创建照片发现应用程序（第2部分）
nw.js 调用驱动程序 NW.js (formerly known as Node Webkit) is a framework for creating cross-platform deskto ...
JS调用摄像头、实时视频流上传（一次不成功的试验）
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...

js调用（前/后）摄像头，截取照片，关闭摄像头

全部代码：（详细注释已在代码中标明）

重点提取

js调用（前/后）摄像头，截取照片，关闭摄像头相关推荐

最新文章

热门文章