欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)調(diào)用PC端攝像頭實時拍照

 更新時間:2021年09月29日 17:00:38   作者:小咸魚大翻身  
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)調(diào)用PC端攝像頭實時拍照,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

Vue之調(diào)用PC端攝像頭實時拍照,供大家參考,具體內(nèi)容如下

由于我使用的是點擊按鈕打開模態(tài)框拍照所以在這里吧按鈕和模態(tài)框代碼都粘貼如下。

<!-- 打開模態(tài)框按鈕-->
        <el-form-item label="*照片:" prop="headImage">
          <el-input type="text" v-model="imgSrc" />
            <el-col :span="1.5">
              <el-button
                @click="onTake"
                icon="el-icon-camera"
                size="small">
                拍照上傳
              </el-button>
            </el-col>
        </el-form-item>
        <!--拍照后顯示圖片-->
        <el-form-item label="" prop="imgSrc">
          <img v-if="imgSrc"  :src="imgSrc" style="width: 200px;height: 240px;" />
</el-form-item>

<!--拍照模態(tài)框-->
    <el-dialog
      title="拍照上傳"
      :visible.sync="visible"
      @close="onCancel"
      width="1065px">
      <div class="box">
        <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
        <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
      </div>
      <div slot="footer">
        <el-button
          @click="drawImage"
          icon="el-icon-camera"
          size="small">
          拍照
        </el-button>
        <el-button
          v-if="os"
          @click="getCompetence"
          icon="el-icon-video-camera"
          size="small">
          打開攝像頭
        </el-button>
        <el-button
          v-else
          @click="stopNavigator"
          icon="el-icon-switch-button"
          size="small">
          關(guān)閉攝像頭
        </el-button>
        <el-button
          @click="resetCanvas"
          icon="el-icon-refresh"
          size="small">
          重置
        </el-button>
        <el-button
          @click="onCancel"
          icon="el-icon-circle-close"
          size="small">
          完成
        </el-button>
   </div>
</el-dialog>

下來我們來看js代碼,我把不需要的部分刪除了,因為涉及單位項目問題實屬抱歉哈

<script>
export default {
  name: "XXX",
  data() {
    return {
      visible: false,//彈窗
      loading: false,//上傳按鈕加載
      os: false,//控制攝像頭開關(guān)
      thisVideo: null,
      thisContext: null,
      thisCancas: null,
      videoWidth: 500,
      videoHeight: 400,
      postOptions:[],
      CertCtl:'',
      // 遮罩層
      loading: true,
      // 選中數(shù)組
      ids: [],
      // 非單個禁用
      single: true,
      // 非多個禁用
      multiple: true,
      // 總條數(shù)
      total: 0,
      // 項目人員表格數(shù)據(jù)
      akworkerList: [],
      //工種類別數(shù)據(jù)字典
      workerTypeOptions:[],
      // 彈出層標(biāo)題
      title: "",
      // 是否顯示彈出層
      open: false,
      // 查詢參數(shù)
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        imgSrc:undefined,
      },
      // 表單參數(shù)
      form: {},
      // 表單校驗
      rules: {
      }
    };
  },
  created() {
   
  },
  methods: {
    /*調(diào)用攝像頭拍照開始*/
    onTake() {
      this.visible = true;
      this.getCompetence();
    },
    onCancel() {
      this.visible = false;
     /* this.resetCanvas();*/
      this.stopNavigator();
    },
    // 調(diào)用攝像頭權(quán)限
    getCompetence() {
      //必須在model中render后才可獲取到dom節(jié)點,直接獲取無法獲取到model中的dom節(jié)點
      this.$nextTick(() => {
        const _this = this;
        this.os = false;//切換成關(guān)閉攝像頭
        this.thisCancas = document.getElementById('canvasCamera');
        this.thisContext = this.thisCancas.getContext('2d');
        this.thisVideo = document.getElementById('videoCamera');
        // 舊版本瀏覽器可能根本不支持mediaDevices,我們首先設(shè)置一個空對象
        if (navigator.mediaDevices === undefined) {
          navigator.menavigatordiaDevices = {}
        }
        // 一些瀏覽器實現(xiàn)了部分mediaDevices,我們不能只分配一個對象
        // 使用getUserMedia,因為它會覆蓋現(xiàn)有的屬性。
        // 這里,如果缺少getUserMedia屬性,就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先獲取現(xiàn)存的getUserMedia(如果存在)
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
            // 有些瀏覽器不支持,會返回錯誤信息
            // 保持接口一致
            if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
            }
            // 否則,使用Promise將調(diào)用包裝到舊的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject)
            })
          }
        }
        const constraints = {
          audio: false,
          video: {width: _this.videoWidth, height: _this.videoHeight, transform: 'scaleX(-1)'}
        };
        navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
          // 舊的瀏覽器可能沒有srcObject
          if ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = stream
          } else {
            // 避免在新的瀏覽器中使用它,因為它正在被棄用。
            _this.thisVideo.src = window.URL.createObjectURL(stream)
          }
          _this.thisVideo.onloadedmetadata = function (e) {
            _this.thisVideo.play()
          }
        }).catch(err => {
          this.$notify({
            title: '警告',
            message: '沒有開啟攝像頭權(quán)限或瀏覽器版本不兼容.',
            type: 'warning'
          });
        });
      });
    },
    //繪制圖片
    drawImage() {
      // 點擊,canvas畫圖
      this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
      // 獲取圖片base64鏈接
      this.imgSrc = this.thisCancas.toDataURL('image/png');
      /*const imgSrc=this.imgSrc;*/
    },
    //清空畫布
    clearCanvas(id) {
      let c = document.getElementById(id);
      let cxt = c.getContext("2d");
      cxt.clearRect(0, 0, c.width, c.height);
    },
    //重置畫布
    resetCanvas() {
      this.imgSrc = "";
      this.clearCanvas('canvasCamera');
    },
    //關(guān)閉攝像頭
    stopNavigator() {
      if (this.thisVideo && this.thisVideo !== null) {
        this.thisVideo.srcObject.getTracks()[0].stop();
        this.os = true;//切換成打開攝像頭
      }
    },
  /*調(diào)用攝像頭拍照結(jié)束*/
  }
};
</script>

在此,本篇文章也就分享完畢了,若有什么不對之處還望各位大佬多多指點,若有相似之處還望聯(lián)系修改刪除,謝謝

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決vue2中使用elementUi打包報錯的問題

    解決vue2中使用elementUi打包報錯的問題

    這篇文章主要介紹了解決vue2中使用elementUi打包報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 詳解如何在vue項目中使用layui框架及采坑

    詳解如何在vue項目中使用layui框架及采坑

    這篇文章主要介紹了vue使用layui框架,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Composition API思想封裝NProgress示例詳解

    Composition API思想封裝NProgress示例詳解

    這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • vue項目頁面的打印和下載PDF加loading效果的實現(xiàn)(加水印)

    vue項目頁面的打印和下載PDF加loading效果的實現(xiàn)(加水印)

    這篇文章主要介紹了vue項目頁面的打印和下載PDF加loading效果的實現(xiàn)(加水印),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • graphQL在前端vue中使用實例代碼

    graphQL在前端vue中使用實例代碼

    這篇文章主要介紹了graphQL在前端vue中使用過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • vue中緩存組件keep alive的介紹及使用方法

    vue中緩存組件keep alive的介紹及使用方法

    這篇文章主要介紹了vue緩存組件keepalive的相關(guān)資料,keep-alive組件是使用 include exclude這兩個屬性傳入組件名稱來確認(rèn)哪些可以被緩存的,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2022-08-08
  • Vue Element前端應(yīng)用開發(fā)之菜單資源管理

    Vue Element前端應(yīng)用開發(fā)之菜單資源管理

    在權(quán)限管理系統(tǒng)中,菜單也屬于權(quán)限控制的一個資源,屬于角色控制的一環(huán)。不同角色用戶,登錄系統(tǒng)后,出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合,實現(xiàn)可訪問路由的過濾,也就實現(xiàn)了對應(yīng)角色菜單的展示和可訪問路由的控制。
    2021-05-05
  • vue3-HTTP請求方式

    vue3-HTTP請求方式

    這篇文章主要介紹了vue3-HTTP請求方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue3中如何獲取鼠標(biāo)在瀏覽器x軸和y軸的位置

    Vue3中如何獲取鼠標(biāo)在瀏覽器x軸和y軸的位置

    這篇文章主要介紹了Vue3中如何獲取鼠標(biāo)在瀏覽器x軸和y軸的位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • Vue2中配置Cesium全過程

    Vue2中配置Cesium全過程

    這篇文章主要介紹了Vue2中配置Cesium全過程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05

最新評論