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