VUE 调用PC摄像头,亲测可用 末蓝、 2022-11-25 04:29 242阅读 0赞 ### 首先声明一下,对于我的博客整理出来的。绝对是我自己亲测测试后有效果的,对于一些大佬说没用什么的,请仔细检查下您的代码!谢谢 ### 在当前网页安全的情况下,浏览器会开启 navigator.mediaDevices.getUserMedia 我们通过它来实现拍照 如果当前网页不安全可以通过设置谷歌浏览器强制该网页安全: 1.浏览器进入:chrome://flags/\#unsafely-treat-insecure-origin-as-secure 2.然后改下参数配置,如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][] 这一步感谢这位大佬[https://blog.csdn.net/qq\_41614928/article/details/107715577][https_blog.csdn.net_qq_41614928_article_details_107715577] 都准备好之后,直接上代码: <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> // 拍照上传组件 // 父组件通过函数 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 // 是否开始捕获媒体 // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象 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 = stream audio.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的数据传送到img里 alert(img.src) // 这边的值可以传入后端 } // 监听视频流就位事件,即视频可以播放了 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][https_bingxl.cn_webrtc.html] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221124/1a689b335a75486d95cfbcdcca787a15.png [https_blog.csdn.net_qq_41614928_article_details_107715577]: https://blog.csdn.net/qq_41614928/article/details/107715577 [https_bingxl.cn_webrtc.html]: https://bingxl.cn/webrtc.html
还没有评论,来说两句吧...