首先聲明一下，對于我的博客整理出來的。絕對是我自己親測測試后有效果的，對于一些大佬說沒用什么的，請仔細(xì)檢查下您的代碼！謝謝

在當(dāng)前網(wǎng)頁安全的情況下，瀏覽器會開啟
navigator.mediaDevices.getUserMedia
我們通過它來實(shí)現(xiàn)拍照
如果當(dāng)前網(wǎng)頁不安全可以通過設(shè)置谷歌瀏覽器強(qiáng)制該網(wǎng)頁安全：
1.瀏覽器進(jìn)入：chrome://flags/#unsafely-treat-insecure-origin-as-secure
2.然后改下參數(shù)配置，如下圖

這一步感謝這位大佬https://blog.csdn.net/qq_41614928/article/details/107715577

都準(zhǔn)備好之后，直接上代碼：

<template><div><article><section><video id="video"></video></section><section><audio id="audio"></audio></section><button id="btn" @click="tackcapture">拍照</button><button @click="opening">開啟</button><section><canvas id="canvas"></canvas></section><section><img src="" alt="" id="img" /></section></article></div> </template><script> // 拍照上傳組件 // 父組件通過函數(shù) getImg 獲取照片路徑,如 @getImg="getImg" const Address = '' export default {name: 'TakePhotos',data () {return {}},methods: {opening () {let convas = document.querySelector('#canvas') //let video = document.querySelector('#video')let audio = document.querySelector('audio')let img = document.querySelector('#img')let btn = document.querySelector('button')let context = canvas.getContext('2d')let width = 320 // 視頻和canvas的寬度let height = 0 //let streaming = false // 是否開始捕獲媒體// 老的瀏覽器可能根本沒有實(shí)現(xiàn) mediaDevices，所以我們可以先設(shè)置一個空的對象if (navigator.mediaDevices == undefined) {navigator.mediaDevices = {}}// 獲取用戶媒體,包含視頻和音頻navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {video.srcObject = stream // 將捕獲的視頻流傳遞給video 放棄window.URL.createObjectURL(stream)的使用video.play() // 播放視頻audio.srcObject = streamaudio.play()})},tackcapture () {// 需要判斷媒體流是否就緒let convas = document.querySelector('#canvas') //let video = document.querySelector('#video')let audio = document.querySelector('audio')let img = document.querySelector('#img')let btn = document.querySelector('button')let context = canvas.getContext('2d')let width = 320 // 視頻和canvas的寬度let height = 0 //let streaming = true // 是否開始捕獲媒體if (streaming) {context.drawImage(video, 0, 0, 350, 200) // 將視頻畫面捕捉后繪制到canvas里面img.src = canvas.toDataURL('image/png') // 將canvas的數(shù)據(jù)傳送到img里alert(img.src) // 這邊的值可以傳入后端}// 監(jiān)聽視頻流就位事件,即視頻可以播放了video.addEventListener('canplay',function (ev) {if (!streaming) {height = video.videoHeight / (video.videoWidth / width)video.setAttribute('width', width)video.setAttribute('height', height)canvas.setAttribute('width', width)canvas.setAttribute('height', height)streaming = true}},false)}} } </script>

感謝這位大佬：https://bingxl.cn/webrtc.html

總結(jié)

以上是生活随笔為你收集整理的VUE 调用PC摄像头,亲测可用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。