HTML5 calling mobile browser camera problem

Because the browser is different from the WeChat browser, if you use capture="camera" directly, the browser will call the camera. The solution is to judge the kernel when loading the component.

The code is as follows

<template>
  <p id="info-container">
    <ul class="nav-wrapper">
      <li class="head-item">
        <p class="item-wrapper">
          <p class="left-item">头像</p>
          <p class="right-item">
            <img class="head lazy"  src="/static/imghwm/default1.png"  data-src="login.avatar_url?login.avatar_url: &#39;&#39;"  :
                 
                 :onerror="errImage"
            >
            <img  class="point lazy"  src="/static/imghwm/default1.png"  data-src="../../assets/images/mine/point.png"    alt="HTML5 calling mobile browser camera problem" >
          </p>
        </p>
        <!-- 
        这是需要样式控制input，让其定位到父集元素顶层，透明度为0
        -->
        <input type="file"
               accept="image/*"
               ref="uploadFile"
               @change="changeFileHandler"
               capture="camera"
               v-if="iswx"
        />
        <input type="file"
               accept="image/*"
               ref="uploadFile"
               @change="changeFileHandler"
               v-if="!iswx"
        />
      </li>
    </ul>
  </p></template><script>import {
  USER_DEFAULT_BASE64,
  HEAD_IMAGE_SIZE_TO_BIG
} from &#39;../../utils/Constants&#39;import { mapGetters, mapActions } from &#39;vuex&#39;export default {
  name: &#39;info-container&#39;,
  computed: {
    ...mapGetters([      &#39;getAuthLogin&#39;
    ]),
    login () {      return this.$store.getters.getAuthLogin
    }
  },
  created () {    const agent = navigator.userAgent.toLowerCase()    this.iswx = agent.indexOf(&#39;qqbrowser&#39;) >= 0
  },
  methods: {
    ...mapActions([      &#39;authUpdateAvatarUrl&#39;
    ]),
    showTextHandler (text = &#39;&#39;) {      this.$vux.toast.text(text)
    },
    changeFileHandler (e) {      const files = e.target.files      const uploadFile = this.$refs.uploadFile      const localFile = files[0]      const fileSize = localFile.size / 1024
      const fileName = localFile.name      if (fileSize > 1024 * 3) {        this.showTextHandler(HEAD_IMAGE_SIZE_TO_BIG)
      } else {        // 表单文件上传
        this.authUpdateAvatarUrl({fileName, localFile})
      }      // 延迟一段事件清除内容
      setTimeout(() => { uploadFile.value = &#39;&#39; }, 200)
    }
  },
  data () {   return {
      iswx: false,
      errImage: USER_DEFAULT_BASE64
    }
  }
}</script><style scoped lang="less">
    //TODO 样式</style>

Related recommendations:

About HTML5 preliminary arrangement of calling the user's camera and album

H5 mobile terminal calling the camera/album

H5 calls the phone’s camera to take photos, upload them and select the photos from the phone album

The above is the detailed content of HTML5 calling mobile browser camera problem. For more information, please follow other related articles on the PHP Chinese website!