@itmirror/uvc-camera-jssdk
Version:
封装uvc-camera安卓方法和上传功能的jssdk
147 lines (136 loc) • 4.5 kB
HTML
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>uvc camera</title>
<style>
#camera {
margin-bottom: 10px;
width: 320px;
height: 240px;
border: solid 1px #3BA3F8;
}
button {
margin: 0 10px;
}
</style>
</head>
<body>
<div class="app">
<div id="camera"></div>
<div class="action">
<button id="statusBtn" onclick="doChange()">开始</button>
<button onclick="changeLight()">换灯</button>
<button onclick="takePicture()">拍照</button>
<button onclick="upload()">上传</button>
<button onclick="destroy()">销毁</button>
</div>
<div id="result"></div>
</div>
</body>
<script src="../lib/guaguaData.js"></script>
<script src="../lib/index.js"></script>
<script>
const $result = document.getElementById('result');
const $statusBtn = document.getElementById('statusBtn');
// 初始化
let isInit = false;
let isOpen = false;
let c;
init();
function init(cb = function() {}) {
c = uvcCamera.init('camera', {
host: 'http://192.168.115.217:7001', // 上传地址
uploadAction: '/skinTest/uploadImg', // 上传地址
successAction: '/skinTest/uploadImgSuccess', // 通知地址
devData: guaguaData,
buttonEvent: function() {
console.log('button-handle');
takePicture();
}
}, function () {
isInit = true;
cb();
console.log('init success')
});
}
function doChange() {
if (!isInit) {
init(changeStatus);
} else {
changeStatus();
}
}
// 开始 or 停止
let isStop = true;
function changeStatus() {
if (!isOpen) {
// 开启摄像头
c.open((json) => {
if (!json.status) {
console.log('摄像头开启失败！')
isStop = true;
$statusBtn.innerText = '开始';
return;
}
isOpen = true;
isStop = false;
$statusBtn.innerText = '停止';
})
return
}
isStop = !isStop;
$statusBtn.innerText = isStop ? '开始' : '停止';
isStop ? c.stop() : c.start();
};
// 换灯
let light_i = 0;
const lights = ['green', 'red', 'blue'];
function changeLight() {
light_i++;
light_i = light_i > lights.length - 1 ? 0 : light_i;
c.setLight(lights[light_i])
}
// 拍照
function takePicture() {
c.takePicture(function (data) {
console.log('data is: ', data)
const img = document.createElement('img');
img.src = data;
$result.appendChild(img);
setTimeout(() => {
c.start();
}, 1500);
});
}
// 上传
function upload() {
c.upload({
success: function(res) {
$result.innerText = JSON.stringify(res)
console.log(res)
console.log('上传成功!')
},
fail: function(err) {
console.log(err)
console.log('上传失败...')
},
progress: function(val) {
console.log(val)
console.log('上传进度: ', val);
},
})
}
function destroy() {
if (c) {
c.destroy();
c = null;
isStop = true;
isInit = isOpen = false;
$statusBtn.innerText = '开始';
}
}
</script>
</html>