HTML5 通話モバイル ブラウザーのカメラの問題

ブラウザとWeChatブラウザの違いにより、capture="camera"を直接使用すると、ブラウザがカメラを呼び出します。解決策は、コンポーネントのロード時にカーネルをチェックすることです。コードは次のとおりです

<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 :src="login.avatar_url?login.avatar_url: &#39;&#39;"
                 class="head"
                 :onerror="errImage"
            >
            <img class="point" src="../../assets/images/mine/point.png">
          </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>

関連する推奨事項:

ユーザーのカメラとフォトアルバムを呼び出すためのHTML5の事前準備について

H5 move 端末がカメラ/アルバムを呼び出します

H5が携帯電話のカメラを呼び出して写真を撮り、アップロードして携帯電話のアルバム

から写真を選択して写真を撮ります

以上がHTML5 通話モバイル ブラウザーのカメラの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。