作者：王艳kiki | 来源：互联网 | 2023-09-05 15:45
首先不说废话&＃xff0c;直接上代码的测试效果
利用canvas画布将视频当前帧转换成图片的实例&＃xff0c;其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入&＃xff0c;产生包含所请求类型的媒体轨道。包括视频轨道&＃xff08;由诸如照相机&＃xff0c;视频记录设备&＃xff0c;屏幕共享服务等的硬件或虚拟视频源产生&＃xff09;&＃xff0c;音频轨道&＃xff08;类似地&＃xff0c;由物理或虚拟音频源&＃xff0c;如麦克风&＃xff0c;A / D转换器等&＃xff09;&＃xff0c;以及其他可能的轨道类型。
它返回一个 Promise 解析为一个 MediaStream 对象。用户如果拒绝许可&＃xff0c;或者匹配媒体不可用&＃xff0c;则请求会被拒绝&＃xff0c;抛出 PermissionDeniedError 或 NotFoundError 错误。
注意&＃xff1a;该方法只适用于本地和 https 请求&＃xff0c;http 会提示没有权限&＃xff0c;报 PermissionDeniedError 错误。
代码如下:
DOCTYPE html>
<html>
<head><meta charset&＃61;"utf-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>testtitle><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width,height&＃61;device-height,initial-scale&＃61;1.0, minimum-scale&＃61;1.0, maximum-scale&＃61;1.0, user-scalable&＃61;no"><meta name&＃61;"keywords" content&＃61;"test"><meta name&＃61;"description" content&＃61;"test"><link rel&＃61;"shortcut icon" href&＃61;"favicon.ico"><style>#camera{float: left;margin: 20px;}#contentHolder{width: 300px;height: 300px;margin-bottom: 10px;}#btn_snap{margin: 0 auto;border: 1px solid #f0f0f0;background: #5CACEE;color: #FFF;width: 100px;height: 36px;line-height: 36px;border-radius: 8px;text-align: center;cursor: pointer;cursor: pointer;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }#imgBoxxx{width: 200px;margin: 60px 20px 20px;}
style>
head><body><div id&＃61;"camera"><div id&＃61;"contentHolder"><video id&＃61;"video" width&＃61;"300" height&＃61;"300" autoplay>video><canvas style&＃61;"display:none;" id&＃61;"canvas" width&＃61;"300" height&＃61;"300">canvas>div><div id&＃61;"btn_snap">拍照div>
div>body>
<script>var canvas &＃61; document.getElementById("canvas"),pzBtn &＃61; document.getElementById("btn_snap"),context &＃61; canvas.getContext("2d"),video &＃61; document.getElementById("video");alert(&＃39;该页面会调用您的摄像头&＃39;)if (navigator.mediaDevices &＃61;&＃61;&＃61; undefined) {navigator.mediaDevices &＃61; {};}if (navigator.mediaDevices.getUserMedia &＃61;&＃61;&＃61; undefined) {navigator.mediaDevices.getUserMedia &＃61; function (constraints) {var getUserMedia &＃61; navigator.webkitGetUserMedia || navigator.mozGetUserMedia;if (!getUserMedia) {return Promise.reject(new Error(&＃39;getUserMedia is not implemented in this browser&＃39;));}return new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});}}var constraints &＃61; { audio: false, video: {width: 720,height:720} }navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {var video &＃61; document.querySelector(&＃39;video&＃39;);if ("srcObject" in video) {video.srcObject &＃61; stream;} else {video.src &＃61; window.URL.createObjectURL(stream);}video.onloadedmetadata &＃61; function (e) {video.play();};}).catch(function (err) {console.log(err.name &＃43; ": " &＃43; err.message);});pzBtn.addEventListener("click", function () {context.drawImage(video, 0, 0, 300, 300);var image &＃61; canvas.toDataURL(&＃39;image/png&＃39;);var img &＃61; new Image();img.id &＃61; "imgBoxxx";img.src &＃61; image;document.body.appendChild(img);function dataURLtoFile(dataurl, filename) {var arr &＃61; dataurl.split(&＃39;,&＃39;), mime &＃61; arr[0].match(/:(.*?);/)[1],bstr &＃61; atob(arr[1]), n &＃61; bstr.length, u8arr &＃61; new Uint8Array(n);while (n--) {u8arr[n] &＃61; bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});}console.log(dataURLtoFile(image, &＃39;aa.png&＃39;));});
script>
html>
京公网安备 11010802041100号