https://www.cnblogs.com/-roc/p/14592130.html

// 原生js 手机端 调用 拍照、录像、录音、相册（含图片或视频）、音频文件等
import React, {useEffect} from 'react'
function Camera() {
useEffect(() => {
// 图片选取并回显
document.querySelector('#fileSel').onchange = function () {
var fileTag = document.getElementById('fileSel');
var file = fileTag.files[0];
console.log(file)
var fileReader = new FileReader();
fileReader.onloadend = function () {
if (fileReader.readyState === fileReader.DONE) {
document.getElementById('v_photoA').setAttribute('src', fileReader.result);
}
};
fileReader.readAsDataURL(file);
};
// 视频及音频回显未做，涉及较少
})
return (
<div>
<h4> 拍照 </h4>
<input type="file" capture="camera" accept="image/" id="fileSel" name="fileSel" />
<h4> 拍照及照片相册 </h4>
<input type="file" multiple accept="image/" name="fileSel" />
<h4> 录像 </h4>
<input type="file" capture='camcorder' accept="video/" name="fileSel" />
<h4> 录像及视频相册 </h4>
<input type="file" multiple accept="video/" name="fileSel" />
<h4> 录音 </h4>
<input type="file" accept="audio/" capture="microphone"></input>
<h4> 录音及音频文件 </h4>
<input type="file" multiple accept="audio/"></input>
{/* 图片显示 */}
<img src="" id="v_photoA" style={{'width':'100%'}} alt=''/>
</div>
)
}
export default Camera