js调用摄像头，实现简单的视频展台软件
参考文档：
web api：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices
codeantenna：https://codeantenna.com/a/Py4bUtGBSS
极客教程：https://geek-docs.com/javascript/javascript-ask-answer/g_how-to-get-camera-resolution-using-javascript.html
功能：
显示设备名称、放大、缩小、旋转（0°、90°、180°、270°）、上下镜像、左右镜像、拍照、录像、识别二维码、批注、橡皮檫、清空批注内容、冻结视频
网页效果：↓
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HP CamScan(web)</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
<style>
body{
margin: 0;
padding: 0;
overflow-y: hidden;
}
#side_bar{
background-color: rgb(45, 45, 45);
float: left;
width: 50px;
height: 500px;
padding-top: 40px;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 2px;
}
#video_bar{
background-color: black;
float: left;
text-align: center;
}
#tool_bar{
position: absolute;
bottom: 50px;
left:50%;
width: 310px;
height: 80px;
margin-left: -150px;
z-index: 9999;
}
#corner_bar{
position: absolute;
bottom: 50px;
right: 50px;
width: 120px;
height: 60px;
} #side_bar button{
width: 50px;height: 50px;
border: none;
padding: 5px;
background-color: rgb(45, 45, 45);
}
#side_bar button:hover{
border: 1px solid gray;
border-radius: 25px;
background-color: gray;
}
#side_bar button img{
width: 40px;height: 40px;
}
#device_select_dialog{
border: 1px solid #696969;
border-radius: 10px;
background-color: rgba(105, 105, 105, 0.5);
width: 400px;
height: 260px;
position: absolute;
top: 40px;
left: 65px;
padding: 10px;
}
#device_select_dialog p{
color: #66CD00;
font-size: 8px;
}
#suofang_dialog{
width: 400px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -200px;
text-align: center;
}
#suofang_dialog #suofang_dialog_beishu{
width: 58px;
height: 32px;
border: 1px solid white;
border-radius: 16px;
background-color: white;
font-size: 14px;
color: black;
}
#suofang_dialog #suofang_dialog_suoxiao{
width: 100px;
height: 100px;
background-color: transparent;
padding: 30px;
border: none;
}
#suofang_dialog #suofang_dialog_suoxiao:hover{
border: 1px solid gray;
border-radius: 50px;
background-color: rgba(128, 128, 128, 0.5);
}
#suofang_dialog #suofang_dialog_huakuai{
width: 180px;
height: 50px;
line-height: 50px;
}
#suofang_dialog #suofang_dialog_fangda{
width: 100px;
height: 100px;
background-color: transparent;
padding: 30px;
border: none;
}
#suofang_dialog #suofang_dialog_fangda:hover{
border: 1px solid gray;
border-radius: 50px;
background-color: rgba(128, 128, 128, 0.5);
}
#xuanzhuan_dialog{
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
text-align: center;
}
#xuanzhuan_dialog button{
margin: 10px;
border: 2px solid white;
border-radius: 10px;
background-color: transparent;
width: 20px;height: 20px;
}
#xuanzhuan_dialog #xuanzhuan_dialog_dushu{
width: 280px;height: 280px;
border: 2px solid white;
border-radius: 140px;
color: black;
font-size: 32px;
}
#tool_bar button{
width: 80px;height: 80px;
border: 1px solid white;
border-radius: 40px;
background-color: rgba(52,43,34,0.8);
}
#tool_bar #tool_pizhu{
width: 52px;height: 52px;
border: 1px solid rgba(190, 190, 190, 0.8);/*rgb(28, 28, 22)*/
border-radius: 26px;
background-color: rgba(190, 190, 190, 0.8);
}
#corner_bar button{
width: 46px;
height: 46px;
margin: 5px;
padding: 0px;
background-color: rgb(17,14,14);
border: 1px solid rgb(17,14,14);
border-radius: 24px;
}
#pizhu_dialog{
width: 160px;
height: 50px;
border: 1px solid rgba(190, 190, 190, 0.8);
border-radius: 26px;
background-color: rgba(190, 190, 190, 0.8);
position: absolute;
bottom: 59px;
left: 50%;
margin-left: 105px;
z-index: 999;
}
#pizhu_dialog button{
float: right;
width: 52px;
height: 52px;
border: 1px solid rgba(190, 190, 190, 0.8);
border-radius: 26px;
background-color: rgba(190, 190, 190, 0.8);
}
#pizhu_clear_all{
width: 100px;
height: 40px;
position: absolute;
bottom: 120px;
left: 50%;
margin-left: 190px;
z-index: 999;
background-color: rgba(10, 15, 20, 0.7);
color: white;
font-weight: 700;
border: none;
}
</style>
</head>
<body onload="load()">
<!-- 侧边栏按钮组 -->
<div id="side_bar">
<button onclick="select_video_dialog()"><img src="HPImage/shexiangtou.png" alt=""></button>
<button onclick="suofang_dialog()"><img src="HPImage/suofang.png" alt=""></button>
<button onclick="xuanzhuan_dialog()"><img src="HPImage/xuanzhuan.png" alt=""></button>
<button><img src="HPImage/jingxiang.png" alt=""></button>
<button onclick="shangxiajingxiang()"><img src="HPImage/shangxiajingxiang.png" alt=""></button>
<button onclick="zuoyoujingxiang()"><img src="HPImage/zuoyoujingxiang.png" alt=""></button>
</div>
<!-- 视频区域 -->
<div id="video_bar"><video src="" id="video"></video></div>
<!-- 工具栏：拍照、批注按钮组 -->
<div id="tool_bar">
<!-- <button>更多</button> -->
<button id="tool_paizhao" onclick="tool_paizhao()"><img width="50px" height="50px" src="HPImage/paizhao.png" alt=""></button>
<button id="tool_luxiang" onclick="tool_luxiang()"><img id="tool_luxiang_img" width="50px" height="50px" src="HPImage/luxiang_start.png" alt=""></button>
<button id="tool_tiaoma" onclick="tool_tiaoma()"><img width="50px" height="50px" src="HPImage/saoma.png" alt=""></button>
<button id="tool_pizhu" onclick="tool_pizhu()"><img id="tool_pizhu_img" width="40px" height="40px" src="HPImage/pizhu.png" alt=""></button>
</div>
<!-- 工具栏：冻结、九宫格按钮组 -->
<div id="corner_bar">
<button id="tool_dongjie" onclick="tool_dongjie()"><img id="tool_dongjie_img" width="38px" height="38px" src="HPImage/dongjie.png" alt=""></button>
<!-- <button id="tool_sigongge" onclick="tool_sigongge()"><img id="tool_sigongge_img" width="38px" height="38px" src="HPImage/sigongge.png" alt=""></button> -->
</div> <!-- 哈哈哈哈哈哈哈哈哈哈哈 begin 哈哈哈哈哈哈哈哈哈哈哈啊哈 -->
<!-- 画布 -->
<canvas id="canvas" style="display:none;"></canvas>
<!-- 请选择摄像头 -->
<div id="device_select_dialog">
<p>Select Camera</p>
<p id="device_select_dialog_name" style="padding-left: 30px;font-size: 14px;color: white;"></p>
</div>
<!-- 缩放 -->
<div id="suofang_dialog">
<button id="suofang_dialog_beishu">1x</button>
<br>
<button id="suofang_dialog_suoxiao" onclick="suofang_dialog_suoxiao()"><img width="40px" height="40px" src="HPImage/suoxiao.png" alt=""></button>
<input type="range" id="suofang_dialog_huakuai" min="1" max="10" step="1" value="1">
<button id="suofang_dialog_fangda" onclick="suofang_dialog_fangda()"><img width="40px" height="40px" src="HPImage/fangda.png" alt=""></button>
</div>
<!-- 旋转 -->
<div id="xuanzhuan_dialog">
<button onclick="xuanzhuan_dialog_90()" id="xuanzhuan_dialog_90"></button><br>
<button onclick="xuanzhuan_dialog_180()" id="xuanzhuan_dialog_180"></button>
<button id="xuanzhuan_dialog_dushu">0°</button>
<button onclick="xuanzhuan_dialog_0()" id="xuanzhuan_dialog_0"></button><br>
<button onclick="xuanzhuan_dialog_270()" id="xuanzhuan_dialog_270"></button>
</div>
<!-- 批注 总窗口 -->
<div id="pizhu_dialog">
<button onclick="pizhu_dialog_xiangpicha()"><img id="pizhu_dialog_xiangpicha_img" width="30px" height="30px" src="HPImage/xiangpicha.png" alt=""></button>
<button onclick="pizhu_dialog_bi()"><img id="pizhu_dialog_bi_img" width="30px" height="30px" src="HPImage/bi.png" alt=""></button>
</div>
<!-- 批注画布 -->
<canvas id="pizhu_canvas" style="background-color: transparent;position: absolute;top: 0px;left: 54px;"></canvas>
<!-- 批注，清空按钮 -->
<button id="pizhu_clear_all" onclick="pizhu_qingkong()">ClearAll</button>
<!-- 哈哈哈哈哈哈哈哈哈哈哈 end 哈哈哈哈哈哈哈哈哈哈哈哈啊哈 --> <script>
// 全局变量
var video = document.getElementById("video"); // 视频对象
var record = null; // 录像对象
var recordData = []; // 存储视频流
var context; // 绘制对象
var canvas = document.getElementById("canvas"); // 画布对象
var zoom = document.getElementById("suofang_dialog_huakuai"); // 缩放滑块 var pizhu_canvas = document.getElementById("pizhu_canvas"); // 批注画布
var pizhu_ctx = pizhu_canvas.getContext("2d"); var state = {
"side_shexiangtou": false,
"side_suofang": false,
"side_xuanzhuan": false,
"side_shangxiajingxiang": false,
"side_zuoyoujingxiang": false,
"tool_luxiang": false,
"tool_pizhu": false,
"tool_dongjie": false,
"pizhu": {
"pizhu_bi": false,
"pizhu_xiangpicha": false,
"pizhu_qingkong": false,
"pizhu_press": false,
"lastX": 0,
"lastY": 0
}
}; // 加载网页时运行
function load(){
// 设置侧边栏css
let side_bar = document.getElementById("side_bar");
side_bar.style.width = 50 + "px";
side_bar.style.height = window.innerHeight + "px"; // 设置视频区域css
let video_bar = document.getElementById("video_bar");
video_bar.style.width = window.innerWidth - 54 + "px";
video_bar.style.height = window.innerHeight + "px"; // 设置拍照
let tool_bar = document.getElementById("tool_bar"); // 设置批注画布
pizhu_canvas.width = window.innerWidth - 54;
pizhu_canvas.height = window.innerHeight; // 打开视频
OpenVideo()
video.style.height = window.innerHeight + "px"; // 设置先关的dialog隐藏
document.getElementById("device_select_dialog").style.display = "none";
document.getElementById("suofang_dialog").style.display = "none";
document.getElementById("xuanzhuan_dialog").style.display = "none";
document.getElementById("pizhu_dialog").style.display = "none";
pizhu_canvas.style.display = "none";
document.getElementById("pizhu_clear_all").style.display = "none"; document.getElementById("xuanzhuan_dialog_0").style.backgroundColor = "green";
} // 请选择摄像头
function select_video_dialog(){
state.side_shexiangtou = state.side_shexiangtou == true ? false :true;
if(state.side_shexiangtou){
document.getElementById("device_select_dialog").style.display = "block";
}else{
document.getElementById("device_select_dialog").style.display = "none";
}
} // 缩放按钮
function suofang_dialog(){
state.side_suofang = state.side_suofang == true ? false :true;
if(state.side_suofang){
document.getElementById("suofang_dialog").style.display = "block";
}else{
document.getElementById("suofang_dialog").style.display = "none";
}
} // 缩小
function suofang_dialog_suoxiao(){
let zoom_val = zoom.value;
if(zoom_val == "1"){return;} let new_val = parseInt(zoom_val) + 10 - 1;
let height_val = window.innerHeight;
video.style.height = height_val / 10 * new_val + "px";
zoom.value = parseInt(zoom_val) - 1;
document.getElementById("suofang_dialog_beishu").innerHTML = zoom.value + "x";
} // 放大
function suofang_dialog_fangda(){
let zoom_val = zoom.value;
if(zoom_val == "10"){return;} let new_val = parseInt(zoom_val) + 10;
let height_val = window.innerHeight;
video.style.height = height_val / 10 * new_val + "px";
zoom.value = parseInt(zoom_val) + 1;
document.getElementById("suofang_dialog_beishu").innerHTML = zoom.value + "x";
} // 旋转按钮
function xuanzhuan_dialog(){
state.side_xuanzhuan = state.side_xuanzhuan == true ? false :true;
if(state.side_xuanzhuan){
document.getElementById("xuanzhuan_dialog").style.display = "block";
}else{
document.getElementById("xuanzhuan_dialog").style.display = "none";
}
} // 旋转0
function xuanzhuan_dialog_0(){
document.getElementById("xuanzhuan_dialog_0").style.backgroundColor = "green";
document.getElementById("xuanzhuan_dialog_90").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_180").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_270").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_dushu").innerHTML = "0°";
video.style.transform = "rotate(0deg)";
}
function xuanzhuan_dialog_90(){
document.getElementById("xuanzhuan_dialog_0").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_90").style.backgroundColor = "green";
document.getElementById("xuanzhuan_dialog_180").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_270").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_dushu").innerHTML = "90°";
video.style.transform = "rotate(90deg)";
}
function xuanzhuan_dialog_180(){
document.getElementById("xuanzhuan_dialog_0").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_90").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_180").style.backgroundColor = "green";
document.getElementById("xuanzhuan_dialog_270").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_dushu").innerHTML = "180°";
video.style.transform = "rotate(180deg)";
}
function xuanzhuan_dialog_270(){
document.getElementById("xuanzhuan_dialog_0").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_90").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_180").style.backgroundColor = "transparent";
document.getElementById("xuanzhuan_dialog_270").style.backgroundColor = "green";
document.getElementById("xuanzhuan_dialog_dushu").innerHTML = "270°";
video.style.transform = "rotate(270deg)";
} // 上下镜像
function shangxiajingxiang(){
state.side_shangxiajingxiang = state.side_shangxiajingxiang == true ? false :true;
if(state.side_shangxiajingxiang){
video.style.transform = "rotateX(180deg)";
}else{
video.style.transform = "rotateX(0deg)";
}
} // 左右镜像
function zuoyoujingxiang(){
state.side_zuoyoujingxiang = state.side_zuoyoujingxiang == true ? false :true;
if(state.side_zuoyoujingxiang){
video.style.transform = "rotateY(180deg)";
}else{
video.style.transform = "rotateY(0deg)";
}
} // 拍照
function tool_paizhao(){
let ctx = canvas.getContext("2d");
canvas.width = 1920;
canvas.height = 1080;
ctx.drawImage(video, 0,0,1920,1080); let data = new Date();
let fileName = data.toLocaleString() + data.getMilliseconds() + ".jpg";
fileName = fileName.replaceAll("/", "-");
fileName = fileName.replaceAll(":", "_"); let a = document.createElement("a");
a.setAttribute("download", fileName);
a.href = canvas.toDataURL("image/jpeg");
a.click();
} // 录制视频
function tool_luxiang(){
if(record == null){
record = new MediaRecorder(video.captureStream());
record.ondataavailable = (e) => {
console.log(e);
recordData.push(e.data);
};
record.onstop = (e) =>{
const blob = new Blob(recordData, {"type": record.mimeType});
const videoUrl = window.URL.createObjectURL(blob); let data = new Date();
let fileName = data.toLocaleString() + data.getMilliseconds() + ".mp4";
fileName = fileName.replaceAll("/", "-");
fileName = fileName.replaceAll(":", "_"); let a = document.createElement("a");
a.setAttribute("download", fileName);
a.href = videoUrl;
a.click(); window.URL.revokeObjectURL(videoUrl);
};
} state.tool_luxiang = state.tool_luxiang == false ? true : false;
if(state.tool_luxiang){
record.start();
document.getElementById("tool_luxiang_img").src = "HPImage/luxiang_stop.png";
}else{
record.stop();
recordData.splice(0, recordData.length);
document.getElementById("tool_luxiang_img").src = "HPImage/luxiang_start.png";
}
} // 识别条码
function tool_tiaoma(){
let ctx = canvas.getContext("2d");
canvas.width = 1920;
canvas.height = 1080;
ctx.drawImage(video, 0,0,1920,1080); let imageData = ctx.getImageData(0,0,1920, 1080);
let code = jsQR(imageData.data, 1920, 1080, {inversionAttmpts: "dontInvert"})
console.log(code);
if(code){
const textArea = document.createElement("textarea");
textArea.value = code.data;
document.body.appendChild(textArea); textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
}
} // 批注
function tool_pizhu(){
state.tool_pizhu = state.tool_pizhu == true ? false : true;
if(state.tool_pizhu){
document.getElementById("pizhu_dialog").style.display = "block";
document.getElementById("tool_pizhu").style.backgroundColor = "rgb(44, 40, 41)";
document.getElementById("tool_pizhu").style.border = "1px solid rgb(44, 40, 41)";
document.getElementById("tool_pizhu_img").src = "HPImage/pizhu2.png";
document.getElementById("pizhu_dialog_bi_img").src = "HPImage/bi2.png";
pizhu_canvas.style.display = "block";
state.pizhu.pizhu_bi = true;
}else{
document.getElementById("pizhu_dialog").style.display = "none";
document.getElementById("tool_pizhu").style.backgroundColor = "rgba(190, 190, 190, 0.8)";
document.getElementById("tool_pizhu").style.border = "1px solid rgba(190, 190, 190, 0.8)";
document.getElementById("tool_pizhu_img").src = "HPImage/pizhu.png";
document.getElementById("pizhu_dialog_xiangpicha_img").src = "HPImage/xiangpicha.png";
pizhu_canvas.style.display = "none";
document.getElementById("pizhu_clear_all").style.display = "none";
state.pizhu.pizhu_bi = false;
state.pizhu.pizhu_xiangpicha = false;
state.pizhu.pizhu_qingkong = false;
}
} // 橡皮檫
function pizhu_dialog_xiangpicha(){
// 已经选中橡皮檫了，再次点击，就显示【清空全部】
if(state.pizhu.pizhu_xiangpicha){
state.pizhu.pizhu_qingkong = state.pizhu.pizhu_qingkong == true ? false : true;
if(state.pizhu.pizhu_qingkong){
document.getElementById("pizhu_clear_all").style.display = "block";
}else{
document.getElementById("pizhu_clear_all").style.display = "none";
}
} state.pizhu.pizhu_xiangpicha = true;
state.pizhu.pizhu_bi = false; document.getElementById("pizhu_dialog_xiangpicha_img").src = "HPImage/xiangpicha2.png";
document.getElementById("pizhu_dialog_bi_img").src = "HPImage/bi.png";
} // 笔
function pizhu_dialog_bi(){
state.pizhu.pizhu_bi = true;
if(state.pizhu.pizhu_bi){
document.getElementById("pizhu_dialog_xiangpicha_img").src = "HPImage/xiangpicha.png";
document.getElementById("pizhu_dialog_bi_img").src = "HPImage/bi2.png"; state.pizhu.pizhu_bi = true;
state.pizhu.pizhu_xiangpicha = false;
state.pizhu.pizhu_qingkong = false;
document.getElementById("pizhu_clear_all").style.display = "none";
}
} // 冻结
function tool_dongjie(){
state.tool_dongjie = state.tool_dongjie == false ? true : false;
if(state.tool_dongjie){
document.getElementById("tool_dongjie_img").src = "HPImage/dongjie2.png";
video.pause();
}
else{
document.getElementById("tool_dongjie_img").src = "HPImage/dongjie.png"
video.play();
}
} // 打开视频
function OpenVideo(){
navigator.mediaDevices.getUserMedia({video: true})
.then(function(mediaStream){
video.srcObject = mediaStream;
video.play(); // 记录设备名称
let device_name = mediaStream.getVideoTracks()[0].label;
document.getElementById("device_select_dialog_name").innerHTML = device_name;
})
.catch(function(err){ alert(err.message); })
} /* ================== 批注相关 begin ================================== */
pizhu_canvas.addEventListener("mousedown", (e)=>{
state.pizhu.pizhu_press = true;
if(state.pizhu.pizhu_bi){[state.pizhu.lastX, state.pizhu.lastY] = [e.offsetX, e.offsetY];} if(state.pizhu.pizhu_xiangpicha){pizhu_ctx.clearRect(e.offsetX - 4, e.offsetY - 4, 8, 8);}
}) pizhu_canvas.addEventListener("mousemove", (e)=>{
if(state.pizhu.pizhu_bi && state.pizhu.pizhu_press){
drawLine(state.pizhu.lastX, state.pizhu.lastY, e.offsetX, e.offsetY);
[state.pizhu.lastX, state.pizhu.lastY] = [e.offsetX, e.offsetY];
} if(state.pizhu.pizhu_xiangpicha && state.pizhu.pizhu_press){
pizhu_ctx.clearRect(e.offsetX - 4, e.offsetY - 4, 8, 8);
}
}) pizhu_canvas.addEventListener("mouseup", (e)=>{state.pizhu.pizhu_press = false;}) function drawLine(x1, y1, x2, y2){
pizhu_ctx.beginPath();
pizhu_ctx.moveTo(x1, y1);
pizhu_ctx.lineTo(x2, y2);
pizhu_ctx.lineWidth = 5;
pizhu_ctx.strokeStyle = "#FF0000";
pizhu_ctx.stroke();
} function pizhu_qingkong(){
pizhu_ctx.clearRect(0,0,pizhu_canvas.width, pizhu_canvas.height);
}
/* ================== 批注相关 end ==================================== */
</script>
</body>
</html>
js调用摄像头，实现简单的视频展台软件的更多相关文章
- 使用js调用摄像头拍照
在一些浏览器里已经可以使用web api调用摄像头功能了. 基于此可以经行拍照摄像功能,网上找了些资料,然后实现了简单的拍照功能 演示地址 bingxl.cn/webrtc.html 代码 <! ...
- JS调用摄像头拍照，编辑jscam.swf自定义清晰度，兼容IE
超级简单自定义宽高的jscam.swf文件: 下载swfmill,地址:http://download.csdn.net/download/wu3431214/9967414 下载mtasc,地址:h ...
- js调用摄像头
详情源码请参见下方的 GitHub !!! <div> <b>调用移动端摄像头</b><br> <label>照相机: <input ...
- JS调用摄像头并上传图片到服务器
本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了! 直接上代码,需要的朋友直接复制就可以使用了. <!DOCTYPE html> ...
- js 调用手机摄像头或相册并展示图片
效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...
- js实现初始化调用摄像头
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- [Unity3D]unity3d5.0简单的调用摄像头
Unity3D中新建一个工程,加一个Plane,新建一个C# 脚本,将这个脚本添加到Plane上,调用摄像头.(如果显示的图片居然是翻转的,Plane的Rotation 值就可以了) 以下是脚本内容: ...
- HTML之调用摄像头实现拍照和摄像功能
应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...
- OCX 打包 CAB 与 JS 调用具体教程
近期在做一个 WEB 项目.须要调用 OCX 进行连接读卡器读卡.本来并不想用 OCX 技术.由于 ActiveX 技术是微软出品.这样就导致整个系统仅仅能使用 IE 浏览器(其它浏览器能够通 ...
- 树莓派小用手册（安装系统，配置图形界面，连接WiFi，调用摄像头，安装ffmpeg）
安装树莓派系统(重装) 准备工作: 安装需要干净的TF卡(最好 8G 以上),如果是重装的话,需要先将其清理后再使用.清理步骤下面会给出,清理需要工具 DiskGenius,下载链接:http://w ...
随机推荐
- 【Azure 应用服务】Azure Function 不能被触发
问题描述 Azure Function 不能被Postman 触发,错误信息如下: Error: write EPROTO 4020778632:error:100000f7:SSL routines ...
- 【Azure 环境】Notification Hub无法创建Policy : 出现 500 Internal Server Error
问题描述 Notification Hub出现问题,无法创建Policy(Rule). 获得的错误消息: Error: Error making Read request on Authorizati ...
- Vue3学习（二十二）- 保存文档内容
写在前面 前面已经调整了布局,富文本编辑器也能正确显示了,那么接下来就是怎么把数据保存到数据库里了,那么怎么做呢? 保存文档内容并显示 1.任务拆解 前端获取输入富文本框的html内容 改造保存接口, ...
- 4、dubbo的高可用
1.zookeeper宕机与dubbo直连 现象:zookeeper注册中心宕机,还可以消费dubbo暴露的服务. 原因: 健壮性 l 监控中心宕掉不影响使用,只是丢失部分采样数据 l 数据库宕掉后, ...
- Kubernetes CKA考试之Killer Simulator（下）
写在前面 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 注:学习交流使用 目录 写在前面 Question 16 | Na ...
- Git修改最近一次提交的日志信息
一.问题由来 当前自己所在的项目组中,每次发完一个版本后,就需要创建个人新版本的git提交凭证,其实就是系统自动 生成的一串编码,如果没有这个凭证,代码是提交不了的,这是公司制定的开发规范之一.这两天 ...
- sentienl
整合springboot Spring Cloud Alibaba Sentinel 下载 导入依赖 <dependency> <groupId>com.alibaba.clo ...
- vscode 快速重新启动 reload Window
vscode 快速重新启动 reload Window ctrl + shift + P 输入 reload
- 宝塔Linux面板 https://www.bt.cn/ 服务器环境搭建软件
宝塔Linux面板 https://www.bt.cn/
- python 读取txt并绘制波形图实例解析
一 用python绘图有很多方法,笔者找到了一种最简单的方法,使用非常便利,这里分享一下: import numpy as np import matplotlib.pyplot as plt a = ...