设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 调用问题
返回列表 发新帖
查看: 4350|回复: 2

[已解决]调用问题

[复制链接]
高山
发表于 2021-7-7 08:38:25 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
网页如何调用摄像头？
最佳答案
月排行榜 / 总排行榜
Darth_EF
2021-7-9 09:31:26
之前做过一个用vue做的。开摄像头扫码的东西。里面有两个方法是专门用来开摄像头的
代码有点长。。。但是我懒得把东西提出来了
  1. <template>
  2.   <div>
  3.     <input type="file" accept="video/*" capture="camera">  
  4.     <button @click="openSuccess">open success</button>
  5.     <br/>
  6.     {{userMediaMsg}}
  7.     <br/>
  8.     <video ref="showSuccess" src=""></video>
  9.   </div>
  10. </template>
  11. <script>
  12. import { qrcode } from '../static/js/llqrcode';


  15. // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
  16. if (navigator.mediaDevices === undefined) {
  17.   navigator.mediaDevices = {};
  18. }

  20. // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
  21. // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
  22. if (navigator.mediaDevices.getUserMedia === undefined) {
  23.   navigator.mediaDevices.getUserMedia = function(constraints) {

  25.     // 首先，如果有getUserMedia的话，就获得它
  26.     var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  28.     // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
  29.     if (!getUserMedia) {
  30.       return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
  31.     }else{}

  33.     // 否则，为老的navigator.getUserMedia方法包裹一个Promise
  34.     return new Promise(function(resolve, reject) {
  35.       getUserMedia.call(navigator, constraints, resolve, reject);
  36.     });
  37.   }
  38. }

  40. export default {
  41.     data(){
  42.         let that=this;
  43.         qrcode.callback=function(e){
  44.             if(e==qrcode.errorContent){
  45.                 console.log("读取失败");
  46.             }else{
  47.                 console.log("读取成功")
  48.                 console.log(e);
  49.             }
  50.             that.qrcode_val=e;
  51.         };

  53.         var canvas=document.createElement("canvas"),
  54.             context=canvas.getContext("2d");

  56.         return {
  57.             qrcode_val:'',
  58.             mediaOpts : {
  59.                 audio: false,
  60.                 video: true,
  61.                 video: { facingMode: "environment"} // 或者 "user"
  62.                 // video: { width: 1280, height: 720 }
  63.                 // video: { facingMode: { exact: "environment" } }// 或者 "user"
  64.             },
  65.             canvas:canvas,
  66.             context:context,
  67.             userMediaMsg:'',
  68.             stype:0
  69.         }
  70.     },
  71.     methods: {
  72.         onchang(e){
  73.             var that=e.target;
  74.             console.log(that.files);
  75.             this.decode_file(that.files);
  76.         },
  77.         /**
  78.          * 打开摄像头
  79.          */
  80.         openSuccess(){
  81.             this.setwebcam();
  82.         },
  83.         /**
  84.          * 方法集合
  85.          */
  86.         getSucessFunc(){
  87.             let that=this;
  88.             
  89.             let video=this.$refs["showSuccess"];
  90.             this.userMediaMsg="getSucessFunc";

  92.             function successFunc(stream) {
  93.                 that.userMediaMsg="nndt"
  94.             that.mediaStreamTrack = stream;
  95.             video = document.querySelector('video');
  96.             if ("srcObject" in video) {
  97.             &#160;video.srcObject = stream
  98.             } else {
  99.             &#160;video.src = window.URL && window.URL.createObjectURL(stream) || stream
  100.             }
  101.             video.play();
  102.             }

  104.             function errorFunc(err) {
  105.             alert(err);
  106.             }
  107.             this.userMediaMsg="getSucessFunc F";

  109.             return {success:successFunc,error:errorFunc};
  110.         },
  111.         drawMedia(){
  112.             let video=this.$ref("showSuccess");
  113.             this.canvas.setAttribute("width", video.videoWidth);
  114.             this.canvas.setAttribute("height", video.videoHeight);
  115.             this.context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
  116.             // 返回解码是否成功
  117.             return (this.qrcode_val=qrcode.decode(this.canvas.toDataURL)===qrcode.errorContent);
  118.             
  119.         },
  120.         scanCode(){
  121.             if(this.drawMedia()){
  122.                 // 失败
  123.                 let that=this;
  124.                 setTimeout(function(){
  125.                     that.scanCode();
  126.                 },500);
  127.             }else{
  128.                 // 成功
  129.                 console.log(this.qrcode_val);
  130.                 this.closeMedia();
  131.             }
  132.         },
  133.         closeMedia(){
  134.             let that=this;
  135.             this.mediaStreamTrack.getVideoTracks().forEach(function (track) {
  136.                 track.stop();
  137.                 that.context1.clearRect(0, 0,that.canvas.width, that.canvas.height); // 清除画布
  138.             &#160;});
  139.         },
  140.     // ------------------------------------------------------
  141.         t_qrcode(){
  142.             alert(this.qrcode_val);
  143.             this.$emit('t_qrcode',this.qrcode_val);
  144.         },

  146.         
  147.         setwebcam()
  148.         {
  149.             var that=this;
  150.             var options = true;
  151.             if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
  152.             {
  153.                 try{
  154.                     navigator.mediaDevices.enumerateDevices()
  155.                     .then(function(devices) {
  156.                     devices.forEach(function(device) {
  157.                         if (device.kind === 'videoinput') {
  158.                         if(device.label.toLowerCase().search("back") >-1)
  159.                             options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;
  160.                         }
  161.                         console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
  162.                     });
  163.                     that.setwebcam2(options);
  164.                     });
  165.                 }
  166.                 catch(e)
  167.                 {
  168.                     console.log(e);
  169.                 }
  170.             }
  171.             else{
  172.                 console.log("no navigator.mediaDevices.enumerateDevices" );
  173.                 that.setwebcam2(options);
  174.             }
  175.             
  176.         },

  178.         setwebcam2(options)
  179.         {
  180.             var that=this;
  181.             var fncs=this.getSucessFunc();
  182.             var success=fncs.success,
  183.                 error=fncs.error;
  184.             var stype=this.stype;
  185.             function captureToCanvas(){
  186.                 that.scanCode();
  187.             }
  188.             console.log(options);
  189.                 this.userMediaMsg=stype;
  190.             if(stype==1)
  191.             {
  192.                 setTimeout(captureToCanvas, 500);   
  193.                 return;
  194.             }
  195.             var n=navigator;
  196.             this.userMediaMsg="进入cam2";
  197.             if(n.mediaDevices.getUserMedia)
  198.             {
  199.                 that.userMediaMsg="n.mediaDevices.getUserMedia";
  200.                 n.mediaDevices.getUserMedia({video: options, audio: false}).
  201.                     then(function(stream){
  202.                         that.userMediaMsg="cnmdsb";
  203.                         success(stream);
  204.                     }).catch(function(error){
  205.                         that.userMediaMsg=n.mediaDevices.getUserMedia;
  206.                         error(error)
  207.                     });
  208.             }
  209.             else
  210.             if(n.getUserMedia)
  211.             {
  212.                 webkit=true;
  213.                 that.userMediaMsg="n.getUserMedia";
  214.                 n.getUserMedia({video: options, audio: false}, success, error);
  215.             }
  216.             else
  217.             if(n.webkitGetUserMedia)
  218.             {
  219.                 webkit=true;
  220.                 that.userMediaMsg="n.webkitGetUserMedia";
  221.                 n.webkitGetUserMedia({video:options, audio: false}, success, error);
  222.             }
  223.             this.stype=1;
  224.             setTimeout(captureToCanvas, 500);
  225.         }
  226.     }
  227. }
  228. </script>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

Jin_Yu
发表于 2021-7-7 12:48:51 | 显示全部楼层
这问题问的特别有水准

评分

参与人数 1荣誉 -1 鱼币 -1 收起 理由
高山 -1 -1 请不要灌水

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Darth_EF
发表于 2021-7-9 09:31:26 | 显示全部楼层    本楼为最佳答案   
之前做过一个用vue做的。开摄像头扫码的东西。里面有两个方法是专门用来开摄像头的
代码有点长。。。但是我懒得把东西提出来了
  1. <template>
  2.   <div>
  3.     <input type="file" accept="video/*" capture="camera">  
  4.     <button @click="openSuccess">open success</button>
  5.     <br/>
  6.     {{userMediaMsg}}
  7.     <br/>
  8.     <video ref="showSuccess" src=""></video>
  9.   </div>
  10. </template>
  11. <script>
  12. import { qrcode } from '../static/js/llqrcode';


  15. // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
  16. if (navigator.mediaDevices === undefined) {
  17.   navigator.mediaDevices = {};
  18. }

  20. // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
  21. // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
  22. if (navigator.mediaDevices.getUserMedia === undefined) {
  23.   navigator.mediaDevices.getUserMedia = function(constraints) {

  25.     // 首先，如果有getUserMedia的话，就获得它
  26.     var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  28.     // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
  29.     if (!getUserMedia) {
  30.       return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
  31.     }else{}

  33.     // 否则，为老的navigator.getUserMedia方法包裹一个Promise
  34.     return new Promise(function(resolve, reject) {
  35.       getUserMedia.call(navigator, constraints, resolve, reject);
  36.     });
  37.   }
  38. }

  40. export default {
  41.     data(){
  42.         let that=this;
  43.         qrcode.callback=function(e){
  44.             if(e==qrcode.errorContent){
  45.                 console.log("读取失败");
  46.             }else{
  47.                 console.log("读取成功")
  48.                 console.log(e);
  49.             }
  50.             that.qrcode_val=e;
  51.         };

  53.         var canvas=document.createElement("canvas"),
  54.             context=canvas.getContext("2d");

  56.         return {
  57.             qrcode_val:'',
  58.             mediaOpts : {
  59.                 audio: false,
  60.                 video: true,
  61.                 video: { facingMode: "environment"} // 或者 "user"
  62.                 // video: { width: 1280, height: 720 }
  63.                 // video: { facingMode: { exact: "environment" } }// 或者 "user"
  64.             },
  65.             canvas:canvas,
  66.             context:context,
  67.             userMediaMsg:'',
  68.             stype:0
  69.         }
  70.     },
  71.     methods: {
  72.         onchang(e){
  73.             var that=e.target;
  74.             console.log(that.files);
  75.             this.decode_file(that.files);
  76.         },
  77.         /**
  78.          * 打开摄像头
  79.          */
  80.         openSuccess(){
  81.             this.setwebcam();
  82.         },
  83.         /**
  84.          * 方法集合
  85.          */
  86.         getSucessFunc(){
  87.             let that=this;
  88.             
  89.             let video=this.$refs["showSuccess"];
  90.             this.userMediaMsg="getSucessFunc";

  92.             function successFunc(stream) {
  93.                 that.userMediaMsg="nndt"
  94.             that.mediaStreamTrack = stream;
  95.             video = document.querySelector('video');
  96.             if ("srcObject" in video) {
  97.             &#160;video.srcObject = stream
  98.             } else {
  99.             &#160;video.src = window.URL && window.URL.createObjectURL(stream) || stream
  100.             }
  101.             video.play();
  102.             }

  104.             function errorFunc(err) {
  105.             alert(err);
  106.             }
  107.             this.userMediaMsg="getSucessFunc F";

  109.             return {success:successFunc,error:errorFunc};
  110.         },
  111.         drawMedia(){
  112.             let video=this.$ref("showSuccess");
  113.             this.canvas.setAttribute("width", video.videoWidth);
  114.             this.canvas.setAttribute("height", video.videoHeight);
  115.             this.context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
  116.             // 返回解码是否成功
  117.             return (this.qrcode_val=qrcode.decode(this.canvas.toDataURL)===qrcode.errorContent);
  118.             
  119.         },
  120.         scanCode(){
  121.             if(this.drawMedia()){
  122.                 // 失败
  123.                 let that=this;
  124.                 setTimeout(function(){
  125.                     that.scanCode();
  126.                 },500);
  127.             }else{
  128.                 // 成功
  129.                 console.log(this.qrcode_val);
  130.                 this.closeMedia();
  131.             }
  132.         },
  133.         closeMedia(){
  134.             let that=this;
  135.             this.mediaStreamTrack.getVideoTracks().forEach(function (track) {
  136.                 track.stop();
  137.                 that.context1.clearRect(0, 0,that.canvas.width, that.canvas.height); // 清除画布
  138.             &#160;});
  139.         },
  140.     // ------------------------------------------------------
  141.         t_qrcode(){
  142.             alert(this.qrcode_val);
  143.             this.$emit('t_qrcode',this.qrcode_val);
  144.         },

  146.         
  147.         setwebcam()
  148.         {
  149.             var that=this;
  150.             var options = true;
  151.             if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
  152.             {
  153.                 try{
  154.                     navigator.mediaDevices.enumerateDevices()
  155.                     .then(function(devices) {
  156.                     devices.forEach(function(device) {
  157.                         if (device.kind === 'videoinput') {
  158.                         if(device.label.toLowerCase().search("back") >-1)
  159.                             options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;
  160.                         }
  161.                         console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
  162.                     });
  163.                     that.setwebcam2(options);
  164.                     });
  165.                 }
  166.                 catch(e)
  167.                 {
  168.                     console.log(e);
  169.                 }
  170.             }
  171.             else{
  172.                 console.log("no navigator.mediaDevices.enumerateDevices" );
  173.                 that.setwebcam2(options);
  174.             }
  175.             
  176.         },

  178.         setwebcam2(options)
  179.         {
  180.             var that=this;
  181.             var fncs=this.getSucessFunc();
  182.             var success=fncs.success,
  183.                 error=fncs.error;
  184.             var stype=this.stype;
  185.             function captureToCanvas(){
  186.                 that.scanCode();
  187.             }
  188.             console.log(options);
  189.                 this.userMediaMsg=stype;
  190.             if(stype==1)
  191.             {
  192.                 setTimeout(captureToCanvas, 500);   
  193.                 return;
  194.             }
  195.             var n=navigator;
  196.             this.userMediaMsg="进入cam2";
  197.             if(n.mediaDevices.getUserMedia)
  198.             {
  199.                 that.userMediaMsg="n.mediaDevices.getUserMedia";
  200.                 n.mediaDevices.getUserMedia({video: options, audio: false}).
  201.                     then(function(stream){
  202.                         that.userMediaMsg="cnmdsb";
  203.                         success(stream);
  204.                     }).catch(function(error){
  205.                         that.userMediaMsg=n.mediaDevices.getUserMedia;
  206.                         error(error)
  207.                     });
  208.             }
  209.             else
  210.             if(n.getUserMedia)
  211.             {
  212.                 webkit=true;
  213.                 that.userMediaMsg="n.getUserMedia";
  214.                 n.getUserMedia({video: options, audio: false}, success, error);
  215.             }
  216.             else
  217.             if(n.webkitGetUserMedia)
  218.             {
  219.                 webkit=true;
  220.                 that.userMediaMsg="n.webkitGetUserMedia";
  221.                 n.webkitGetUserMedia({video:options, audio: false}, success, error);
  222.             }
  223.             this.stype=1;
  224.             setTimeout(captureToCanvas, 500);
  225.         }
  226.     }
  227. }
  228. </script>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-20 01:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表