需求： 某知名化妝品牌，要做個(gè)在線問(wèn)卷調(diào)查。需要試用著自拍上傳
注：使用navigator.mediaDevices.getUserMedia 需要使用https請(qǐng)求協(xié)議否者視為不安全，無(wú)法訪問(wèn)，開(kāi)發(fā)階段需要將啟動(dòng)改為https 在package.json中
前端開(kāi)發(fā)環(huán)境啟動(dòng)項(xiàng)目將http協(xié)議改為https協(xié)議
?
?授權(quán)，默認(rèn)前置，切換后置文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-504529.html
注意切換攝像頭時(shí)要注意，一定要像關(guān)閉攝像頭不然會(huì)有問(wèn)題在部分手機(jī)上文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-504529.html
import {
Button,
Dialog,
ImageUploader,
Modal,
Popup,
Toast,
} from 'antd-mobile';
import React, { useEffect, useState } from 'react';
import { useRef } from 'react';
import { history } from 'umi';
import {
uploadFile,
getProjectInfo,
saveUploadFile,
deleteFile,
getQuestionsByResultId,
} from '@/app/request/requestApi'; // 接口
import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader';
import { CameraOutline, ExclamationCircleFill } from 'antd-mobile-icons';
import './style.less';
const index = (props: any) => {
const [fileList, setFileList] = useState<any[]>([]);
const [projectInfo, setProjectInfo] = useState<any>({});
const [visible, setVisible] = useState(false);
const [rotvisible, setRotVisible] = useState(false);
const [direction, setDirection] = useState(0);
const [language, setLanguage] = useState('ZH');
useEffect(() => {
setLanguage(localStorage.getItem('language') ?? 'ZH');
}, []);
useEffect(() => {
setTimeout(() => {
document.getElementsByTagName('title')[0].text = '上傳圖片';
}, 500);
getProjectInfo().then((res) => {
if (res.success) {
localStorage.setItem('projectInfo', JSON.stringify(res.data));
setProjectInfo(res.data);
} else {
Dialog.alert({
content: res.msg,
onConfirm: () => {
history.push('../');
},
});
}
});
}, []);
useEffect(() => {
if (!visible) {
// 關(guān)閉
if (document.getElementById('video')?.srcObject) {
document.getElementById('video').srcObject.getTracks()[0].stop();
}
return;
}
if (
//@ts-ignore
// 開(kāi)啟
navigator.mediaDevices.getUserMedia ||
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
navigator.oGetUserMedia
) {
var facingMode: any = null;
if (direction == 1) {
facingMode = { exact: 'environment' };
} else {
facingMode = { exact: 'user' };
}
// 切換攝像頭需先關(guān)閉再打開(kāi)
if (document.getElementById('video')?.srcObject) {
document.getElementById('video').srcObject.getTracks()[0].stop();
}
//調(diào)用用戶媒體設(shè)備, 訪問(wèn)攝像頭
getUserMedia(
{ video: { width: 480, height: 320, facingMode: facingMode } }, // user 前置
success,
error,
);
} else {
alert('不支持訪問(wèn)用戶媒體');
}
}, [visible, direction]);
let model: any = localStorage.getItem('model');
const onUpload = async (file: any) => {
let formData = new FormData();
formData.append('projectId', projectInfo.projectId);
formData.append('projectTimeId', projectInfo.timeId);
formData.append('phone', model);
formData.append('fileInfos', file);
var res = await uploadFile(formData);
if (res.success) {
return {
url: res.data[0].imageUrl,
} as ImageUploadItem;
} else {
Dialog.alert({
content: res.msg,
onConfirm: () => {
//history.push("../");
},
});
return {
url: URL.createObjectURL(file),
} as ImageUploadItem;
}
};
const getUserMedia = (constraints: any, success: any, error: any) => {
if (navigator.mediaDevices.getUserMedia) {
//最新的標(biāo)準(zhǔn)API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心瀏覽器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox瀏覽器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//舊版API
navigator.getUserMedia(constraints, success, error);
}
};
const success = (stream: any) => {
//兼容webkit核心瀏覽器
let CompatibleURL = window.URL || window.webkitURL;
//將視頻流設(shè)置為video元素的源
let videoElement = document.getElementById('video');
//@ts-ignore
videoElement.srcObject = stream;
//@ts-ignore
videoElement.play();
};
const error = (error: any) => {
alert(`訪問(wèn)用戶媒體設(shè)備失敗${error.name}, ${error.message}`);
console.log(`訪問(wèn)用戶媒體設(shè)備失敗${error.name}, ${error.message}`);
};
return (
<>
<span className="projectTitle">{projectInfo.projectName}</span>
<ImageUploader
style={{ '--cell-size': '98px' }}
value={fileList}
onDelete={(item: any) => {
console.log(item);
return Dialog.confirm({
content: '是否確認(rèn)刪除',
}).then((res) => {
if (!res) {
return false;
} else {
return deleteFile({
id: item.id,
}).then((res) => {
if (res.success) {
return true;
} else {
Dialog.alert({
content: res.msg,
onConfirm: () => {
//history.push('../');
},
});
return false;
}
});
}
});
}}
onChange={(files) => {
setFileList(files);
}}
disableUpload={true}
upload={onUpload}
children={
<div
style={{
width: 98,
height: 98,
//borderRadius: 40,
backgroundColor: '#f5f5f5',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#999999',
}}
>
<CameraOutline
onClick={() => {
Dialog.alert({
content:
language == 'ZH'
? '請(qǐng)摘掉眼鏡，露出額頭和耳朵，在光線明亮的地方，原地旋轉(zhuǎn)每30度左右拍一張，共6張'
: 'Please take off your glasses, expose your forehead and ears, and take a picture every 60 degrees or so in a bright place. A total of 6 pictures',
onConfirm: () => {
setVisible(true);
},
});
}}
style={{ fontSize: 32 }}
/>
</div>
}
/>
<div style={{ marginLeft: '20px' }}>
<ExclamationCircleFill style={{ color: 'rgb(255,51,102)' }} />
<span>
{language == 'ZH'
? '上傳圖片需最少六張圖片才可進(jìn)入下一步'
: 'A minimum of six images are required to upload images to proceed to the next step'}
</span>
</div>
<div
style={{
position: 'absolute',
bottom: '8px',
textAlign: 'center',
width: '100%',
}}
>
<Button
className="btnNext"
onClick={() => {
if (fileList.length < 6) {
Toast.show({
icon: 'fail',
content:
language == 'ZH'
? '請(qǐng)至少上傳6張照片！'
: 'Please upload at least 6 photos!',
});
return;
}
saveUploadFile({
projectId: projectInfo.projectId,
projectTimeId: projectInfo.timeId,
phone: model,
PhoneUniqueId: localStorage.getItem('PhoneUniqueId'),
}).then((res) => {
if (res.success) {
if (!projectInfo.timeId) {
Modal.show({
closeOnMaskClick: false,
bodyStyle: {
width: '270px',
height: '220px',
textAlign: 'center',
paddingTop: '47px',
},
showCloseButton: false,
header: null,
actions: [],
content: (
<>
<img className="imgSuccess" />
<div
style={{
marginTop: '14px',
fontSize: '14px',
fontWeight: 'bold',
color: '#333333',
}}
>
{' '}
{language == 'ZH'
? '感謝您的參與！'
: 'Thank you for your participation.'}
</div>
</>
),
});
return;
}
localStorage.setItem('resultId', res.data);
localStorage.setItem('files', JSON.stringify(fileList));
getQuestionsByResultId({
resultId: res.data,
}).then((res) => {
if (res.success) {
localStorage.setItem(
'question',
JSON.stringify(res.data.projectTimeInfo[0]),
);
history.push('form');
} else {
Dialog.alert({
content: res.msg,
onConfirm: () => {},
});
}
});
} else {
Dialog.alert({
content: res.msg,
onConfirm: () => {},
});
}
});
}}
>
{language == 'ZH' ? ' 下一步 >' : 'Next >'}
</Button>
</div>
<Popup
visible={visible}
onMaskClick={() => {
setVisible(false);
}}
forceRender={true}
position="top"
bodyStyle={{
minWidth: '100%',
minHeight: '100%',
backgroundColor: 'black',
}}
>
<div
style={{
width: '100%',
height: '60px',
textAlign: 'center',
lineHeight: '75px',
paddingLeft: '80%',
}}
>
// 切換攝像頭
<CameraOutline
onClick={() => {
setDirection(direction == 1 ? 0 : 1);
console.log('切換攝像頭');
}}
style={{ fontSize: '30px', lineHeight: '60px', color: 'white' }}
/>
</div>
// video 視頻
<video
id="video"
width="100%"
webkit-playsinline="true"
playsInline={true}
></video>
<Button
onClick={() => {
setVisible(false);
}}
style={{
position: 'absolute',
left: '20px',
bottom: '30px',
backgroundColor: 'transparent',
border: 'none',
zIndex: '999',
color: 'white',
}}
>
取消
</Button>
// 拍照截取當(dāng)前幀繪制到畫(huà)布上
<div className="divBtn">
// 主要是獲取攝像頭的視頻流并顯示在Video 簽中
<CameraOutline
onClick={() => {
var canvas = document.getElementById('canvas');
canvas.width = document.getElementById('video')?.offsetWidth;
canvas.height = document.getElementById('video')?.offsetHeight;
//@ts-ignore
canvas
?.getContext('2d')
?.drawImage(
document.getElementById('video'),
0,
0,
document.getElementById('video')?.offsetWidth,
document.getElementById('video')?.offsetHeight,
);
canvas.getContext('2d')?.canvas.toBlob(
(blob: any) => {
let files = new window.File(
[blob],
new Date().getTime() + '.jpg',
);
let formData = new FormData();
formData.append('projectId', projectInfo.projectId);
formData.append('projectTimeId', projectInfo.timeId);
formData.append(
'phone',
model,
// navigator.userAgent.split('AppleWebKit')[0],
);
formData.append('fileInfos', files);
setVisible(false);
uploadFile(formData).then((res) => {
if (res.success) {
setFileList([
...fileList,
{
key: new Date().getTime(),
url: URL.createObjectURL(files),
id: res.data[0].id,
},
]);
} else {
Dialog.alert({
content: res.msg,
onConfirm: () => {},
});
}
});
},
'image/jpeg',
0.7,
);
//@ts-ignore
var cutAvater = canvas.getContext('2d')?.canvas.toDataURL(0.7);
var arr = cutAvater?.split(',');
//@ts-ignore
var data = window.atob(arr[1]);
//@ts-ignore
var mime = arr[0].match(/:(.*?);/)[1];
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
var blob = new Blob([ia], { type: 'image/jpeg' });
}}
className="camerBtn"
/>
</div>
</Popup>
<canvas
style={{ position: 'absolute', left: '-1500px' }}
id="canvas"
// width="480"
// height="320"
></canvas>
</>
);
};
export default index;
main {
padding: 24px 24px 16px;
display: flex;
}
video {
margin-right: 16px;
box-sizing: content-box;
//border: 4px solid #ffaabb;
}
canvas {
box-sizing: content-box;
border: 4px solid #aabbff;
}
.actions {
padding: 0 24px;
}
.actions button {
margin-right: 16px;
}
.imgSuccess {
width: 142px;
height: 119px;
background: url('../../../assets/images/success.png') no-repeat;
background-size: 100%;
border: 1px dashed gray;
}
.projectTitle {
display: block;
font-size: 26px;
color: #b18b35;
font-weight: bold;
font-family: 'MicrosoftYaHei-Bold';
margin: 20px 0 21px 20px;
}
.adm-image-uploader .adm-space-item {
width: 100px;
height: 100px;
border: 1px dashed black;
padding-bottom: 0px !important;
margin-top: 10px;
}
.adm-image-uploader {
margin-bottom: 40px;
}
.adm-image-uploader {
margin-left: 20px;
}
.adm-text-area-element {
background-color: #ffffff !important;
}
.btnNext {
color: white;
font-size: 12px;
font-weight: bold;
background-color: #b18b34;
border: none;
width: 236px;
height: 39px;
border-radius: 18px;
}
.adm-image-img {
// width: auto;
// height: 100%;
// margin:0 auto;
}
.camerBtn {
font-size: 60px;
color: white;
}
.divBtn {
position: absolute;
bottom: 0px;
width: 100%;
height: 80px;
text-align: center;
}
到了這里，關(guān)于H5 頁(yè)面通過(guò)navigator.mediaDevices.getUserMedia調(diào)用手機(jī)攝像頭拍照上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
