原生js 手机端 调用 拍照、录像、录音、相册（含图片或视频）、音频文件等

// 原生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

 

// 涉及图片压缩等

https://blog.csdn.net/qq_37953358/article/details/90438101