如何在h5页面中调用摄像头来完成拍照之类的操作

纸飞机 发表于 2021/10/19 22:11:09 2021/10/19
【摘要】 一.该案例情况 框架:vue; 运行环境:PC; 二.准备 在pc端中需要使用https地址才可以访问到摄像头流信息, 所以在生产环境中,我们可以通过vue.config.js来配置localhost的https地址 在正式环境中,可以给域名配置https证书达到要求,所以影响不大 vue.config.js主要代码 /...

一.该案例情况

框架:vue;

运行环境:PC;

二.准备

在pc端中需要使用https地址才可以访问到摄像头流信息,

所以在生产环境中,我们可以通过vue.config.js来配置localhost的https地址

在正式环境中,可以给域名配置https证书达到要求,所以影响不大

vue.config.js主要代码


  
  1. /*
  2. webpack配置
  3. */
  4. var path = require('path')
  5. function resolve (pathUrl){
  6. return path.resolve(__dirname,pathUrl)
  7. }
  8. module.exports = {
  9. devServer: {
  10. // 前端端口
  11. port: 8080,
  12. // 代理地址
  13. // proxy: 'http://g5rdyr.ngrok.io'
  14. proxy: 'http://localhost:8081',
  15. https: true
  16. },
  17. }

三.写代码(app.vue)


  
  1. <template>
  2. <div id="app">
  3. <video ref="video" id="video" width="320" height="240" controls></video>
  4. <canvas id="canvas" ref="canvas" width="320px" height="240px"></canvas>
  5. <button type="button" class="btn btn-info" @click="camera('environment')">Back Camera</button>
  6. <button type="button" class="btn btn-info" @click="camera('user')">front Camera</button>
  7. </div>
  8. </template>

  
  1. <script>
  2. export default {
  3. name: 'app',
  4. data() {
  5. return {
  6. video: {},
  7. localstream: undefined
  8. }
  9. },
  10. mounted() {
  11. this.$nextTick(()=>{
  12. this.camera('environment');
  13. })
  14. },
  15. methods: {
  16. camera (face) {
  17. this.stop();
  18. this.gum(face);
  19. },
  20. stop () {
  21. return this.video.srcObject && this.video.srcObject.getTracks().map(t => t.stop());
  22. },
  23. gum (face) {
  24. const fa = face === 'user' ? { facingMode: 'user' } : { facingMode: { exact: 'environment' } };
  25. return navigator.mediaDevices.getUserMedia({ audio: false, video: fa })
  26. .then(stream => {
  27. console.log(stream)
  28. let video = document.getElementById("video"),
  29. canvas = document.getElementById("canvas"),
  30. context = canvas.getContext("2d"),
  31. vHeight = video.offsetHeight,
  32. vWidth = video.offsetWidth;
  33. canvas.width = vWidth; // 改变画布的宽高
  34. canvas.height = vHeight;
  35. context.drawImage(video, 0, 0, vWidth, vHeight);
  36. // 获取图片src base64格式
  37. photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
  38. console.log(photoSrc)
  39. this.$refs.video.srcObject = stream;
  40. this.$refs.video.play();
  41. }).catch(() => {
  42. navigator.mediaDevices.getUserMedia({ audio: false, video: true })
  43. .then(stream => {
  44. this.$refs.video.srcObject = stream;
  45. this.$refs.video.play();
  46. });
  47. });
  48. }
  49. }
  50. }
  51. </script>

四.效果

1.进入页面

2.点击camera按钮拍照

文章来源: root181.blog.csdn.net,作者:前端纸飞机,版权归原作者所有,如需转载,请联系作者。

原文链接:root181.blog.csdn.net/article/details/107217338

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。