多摄像头打印优化

src/renderer/components/views/receiveDeliveryNote.vue

@@ -43,19 +43,18 @@
     </a-card>
     <a-card>
       <video id="video" v-ant-ref="(c) => (video = c)" width="640" height="480" autoplay hidden></video>
-      <button id="snap" v-ant-ref="(c) => (snap = c)" hidden>拍照</button>
-      <button id="save" v-ant-ref="(c) => (save = c)" hidden>保存</button>
+      <!--            <button id="snap" v-ant-ref="(c) => (snap = c)" hidden>拍照</button>-->
+      <!--            <button id="save" v-ant-ref="(c) => (save = c)" hidden>保存</button>-->
       <canvas id="canvas" v-ant-ref="(c) => (canvas = c)" width="640" height="480" hidden></canvas>
+      <video id="video2" v-ant-ref="(c) => (video2 = c)" width="640" height="480" autoplay hidden></video>
+      <canvas id="canvas2" v-ant-ref="(c) => (canvas2 = c)" width="640" height="480" hidden></canvas>
+      <video id="video3" v-ant-ref="(c) => (video3 = c)" width="640" height="480" autoplay hidden></video>
+      <canvas id="canvas3" v-ant-ref="(c) => (canvas3 = c)" width="640" height="480" hidden></canvas>
     </a-card>
   </div>
 </template>
 <script>
 
-var video;
-var snap;
-var save;
-var canvas;
-
 import moment from 'moment'
 import {sendPrintSock, webSock} from "../../store/modules/hrPrint";
 
@@ -151,6 +150,7 @@ export default {
       selectedRowKeys: [],
       selectedRows: [],
       loading: false,
+      deviceIds: [],
       rowSelection: {
         onChange: (selectedRowKeys, selectedRows) => {
           this.selectedRowKeys = selectedRowKeys;
@@ -169,7 +169,13 @@ export default {
         showTotal: total => `共 ${total} 条`, // 分页中显示总的数据
         // hideOnSinglePage: true, // 只有一页时是否隐藏分页器
         pageSize: 10 // 每页条数，所有页设置统一的条数
-      }
+      },
+      video:undefined,
+      canvas:undefined,
+      video2:undefined,
+      canvas2:undefined,
+      video3:undefined,
+      canvas3:undefined
     }
   },
   methods: {
@@ -247,37 +253,55 @@ export default {
       self.loading = true
       var video = self.video;
       var canvas = self.canvas;
+      var video2 = self.video2;
+      var canvas2 = self.canvas2;
+      var video3 = self.video3;
+      var canvas3 = self.canvas3;
       // Get access to the camera!
       if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
         // Not adding `{ audio: true }` since we only want video now
-        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
-          // video.src = window.URL.createObjectURL(stream);
-          video.srcObject = stream;
-          video.play();
-        });
+        for (let i = 0; i < self.deviceIds.length; i++) {
+          navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: self.deviceIds[i] } } })
+              .then(function(stream) {
+                // 访问成功，可以做一些处理，比如显示摄像头画面
+                if (i == 0) {
+                  video.srcObject = stream;
+                  video.play();
+                } else if (i == 1) {
+                  video2.srcObject = stream;
+                  video2.play();
+                } else if (i == 2) {
+                  video3.srcObject = stream;
+                  video3.play();
+                }
+              })
+              .catch(function(err) {
+                console.log(err.name + ": " + err.message);
+              });
+        }
       }
       setTimeout(function () {
-          // Elements for taking the snapshot
-          var context = canvas.getContext('2d');
-          context.drawImage(video, 0, 0, 640, 480);
-          // var a = document.createElement('a');
-          // console.log(context.drawImage);
-          // a.setAttribute('href', canvas.toDataURL());　　//toDataUrl：将canvas画布信息转化为base64格式图片
-          // a.setAttribute('download', 'downImg')　　//这个是必须的，否则会报错
-          // a.setAttribute('target', '_self');
-          // console.log(a.href);
-          // a.click()
-          var picBase64 = canvas.toDataURL()
-          // if(picBase64.length < 10000){
-          //   this.$message.info('摄像头初始化中!', 2);
-          //   return;
-          // }
-          var file = self.base64toBlob(picBase64)
-
-          let formData = new FormData();
-          formData.append('list',JSON.stringify(self.selectedRows));
-          formData.append('loginName',self.default_login_name);
-          formData.append('files',file);
+        let formData = new FormData();
+        formData.append('list',JSON.stringify(self.selectedRows));
+        formData.append('loginName',self.default_login_name);
+          for (let i = 0; i < self.deviceIds.length; i++) {
+            if (i == 0) {
+              var context = canvas.getContext('2d');
+              context.drawImage(video, 0, 0, 640, 480);
+              var picBase64 = canvas.toDataURL()
+              formData.append('file1',self.base64toBlob(picBase64));
+            } else if (i == 1) {
+              var context = canvas2.getContext('2d');
+              context.drawImage(video2, 0, 0, 640, 480);
+              var picBase642 = canvas2.toDataURL()
+              formData.append('file2',self.base64toBlob(picBase642));
+            } else if (i == 2) {
+              var context = canvas3.getContext('2d');
+              context.drawImage(video3, 0, 0, 640, 480);
+              var picBase643 = canvas3.toDataURL()
+              formData.append('file3',self.base64toBlob(picBase643));
+            }
+          }
           let config = {
             headers:{'Content-Type':'multipart/form-data'}
           };
@@ -415,40 +439,58 @@ export default {
         }
       }
 
+      self.loading = true
       var video = self.video;
       var canvas = self.canvas;
+      var video2 = self.video2;
+      var canvas2 = self.canvas2;
+      var video3 = self.video3;
+      var canvas3 = self.canvas3;
       // Get access to the camera!
       if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
         // Not adding `{ audio: true }` since we only want video now
-        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
-          // video.src = window.URL.createObjectURL(stream);
-          video.srcObject = stream;
-          video.play();
-        });
+        for (let i = 0; i < self.deviceIds.length; i++) {
+          navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: self.deviceIds[i] } } })
+              .then(function(stream) {
+                // 访问成功，可以做一些处理，比如显示摄像头画面
+                if (i == 0) {
+                  video.srcObject = stream;
+                  video.play();
+                } else if (i == 1) {
+                  video2.srcObject = stream;
+                  video2.play();
+                } else if (i == 2) {
+                  video3.srcObject = stream;
+                  video3.play();
+                }
+              })
+              .catch(function(err) {
+                console.log(err.name + ": " + err.message);
+              });
+        }
       }
-
       setTimeout(function () {
-        // Elements for taking the snapshot
-        var context = canvas.getContext('2d');
-        context.drawImage(video, 0, 0, 640, 480);
-        // var a = document.createElement('a');
-        // console.log(context.drawImage);
-        // a.setAttribute('href', canvas.toDataURL());　　//toDataUrl：将canvas画布信息转化为base64格式图片
-        // a.setAttribute('download', 'downImg')　　//这个是必须的，否则会报错
-        // a.setAttribute('target', '_self');
-        // console.log(a.href);
-        // a.click()
-        var picBase64 = canvas.toDataURL()
-        // if(picBase64.length < 10000){
-        //   this.$message.info('摄像头初始化中!', 2);
-        //   return;
-        // }
-        var file = self.base64toBlob(picBase64)
-
         let formData = new FormData();
         formData.append('list',JSON.stringify(self.selectedRows));
         formData.append('loginName',self.default_login_name);
-        formData.append('files',file);
+        for (let i = 0; i < self.deviceIds.length; i++) {
+          if (i == 0) {
+            var context = canvas.getContext('2d');
+            context.drawImage(video, 0, 0, 640, 480);
+            var picBase64 = canvas.toDataURL()
+            formData.append('file1',self.base64toBlob(picBase64));
+          } else if (i == 1) {
+            var context = canvas2.getContext('2d');
+            context.drawImage(video2, 0, 0, 640, 480);
+            var picBase642 = canvas2.toDataURL()
+            formData.append('file2',self.base64toBlob(picBase642));
+          } else if (i == 2) {
+            var context = canvas3.getContext('2d');
+            context.drawImage(video3, 0, 0, 640, 480);
+            var picBase643 = canvas3.toDataURL()
+            formData.append('file3',self.base64toBlob(picBase643));
+          }
+        }
         let config = {
           headers:{'Content-Type':'multipart/form-data'}
         };
@@ -467,7 +509,7 @@ export default {
         // })
         self.axios.post('/Print/printReceiveDeliveryNote.action',formData,config)
                 .then(function (res) {
-                  console.log(res)
+                  self.loading = false
                   if (res.data.code === "success") {
                     const msg = res.data.data
                     var printData = msg.printData;
@@ -615,12 +657,32 @@ export default {
         }, 2000);
       }
     },
+    getDevices() {
+      const self = this;
+      try {
+        navigator.mediaDevices.enumerateDevices()
+            .then(function(devices) {
+              devices.forEach(function(device) {
+                if (device.kind === 'videoinput') {
+                  self.deviceIds.push(device.deviceId)
+                  console.log(self.deviceIds)
+                }
+              });
+            })
+            .catch(function(err) {
+              console.log(err.name + ": " + err.message);
+            });
+      } catch (err) {
+        console.log(err.name + ": " + err.message);
+      }
+    }
   },
   mounted() {
     this.$nextTick(() => {
       this.$refs.identityCard.focus()
     })
     const self = this
+    self.getDevices()
     self.axios({
       method: "post",//指定请求方式
       url: "/Print/getCustomerList.action",//请求接口（相对接口，后面会介绍到）

src/renderer/components/views/sendDeliveryNote.vue

@@ -26,18 +26,18 @@
         </a-card>
         <a-card>
             <video id="video" v-ant-ref="(c) => (video = c)" width="640" height="480" autoplay hidden></video>
-            <button id="snap" v-ant-ref="(c) => (snap = c)" hidden>拍照</button>
-            <button id="save" v-ant-ref="(c) => (save = c)" hidden>保存</button>
+<!--            <button id="snap" v-ant-ref="(c) => (snap = c)" hidden>拍照</button>-->
+<!--            <button id="save" v-ant-ref="(c) => (save = c)" hidden>保存</button>-->
             <canvas id="canvas" v-ant-ref="(c) => (canvas = c)" width="640" height="480" hidden></canvas>
+          <video id="video2" v-ant-ref="(c) => (video2 = c)" width="640" height="480" autoplay hidden></video>
+          <canvas id="canvas2" v-ant-ref="(c) => (canvas2 = c)" width="640" height="480" hidden></canvas>
+          <video id="video3" v-ant-ref="(c) => (video3 = c)" width="640" height="480" autoplay hidden></video>
+          <canvas id="canvas3" v-ant-ref="(c) => (canvas3 = c)" width="640" height="480" hidden></canvas>
         </a-card>
     </div>
 </template>
 <script>
 
-var video;
-var snap;
-var save;
-var canvas;
 
 import {sendPrintSock, webSock} from "../../store/modules/hrPrint";
 
@@ -89,6 +89,7 @@ export default {
             searchModel: {deliveryNote: undefined},
             list: [],
             loading: false,
+            deviceIds: [],
             columns,
             selectedRowKeys: [],
             rowSelection: {
@@ -98,6 +99,12 @@ export default {
                 }
             },
             intervalID:undefined,
+            video:undefined,
+            canvas:undefined,
+            video2:undefined,
+            canvas2:undefined,
+            video3:undefined,
+            canvas3:undefined
         }
     },
     components: {
@@ -161,36 +168,55 @@ export default {
             self.loading = true
             var video = self.video;
             var canvas = self.canvas;
+            var video2 = self.video2;
+            var canvas2 = self.canvas2;
+            var video3 = self.video3;
+            var canvas3 = self.canvas3;
             // Get access to the camera!
             if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                 // Not adding `{ audio: true }` since we only want video now
-                navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
-                    // video.src = window.URL.createObjectURL(stream);
-                    video.srcObject = stream;
-                    video.play();
-                });
+                for (let i = 0; i < self.deviceIds.length; i++) {
+                  navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: self.deviceIds[i] } } })
+                      .then(function(stream) {
+                        // 访问成功，可以做一些处理，比如显示摄像头画面
+                        if (i == 0) {
+                          video.srcObject = stream;
+                          video.play();
+                        } else if (i == 1) {
+                          video2.srcObject = stream;
+                          video2.play();
+                        } else if (i == 2) {
+                          video3.srcObject = stream;
+                          video3.play();
+                        }
+                      })
+                      .catch(function(err) {
+                        console.log(err.name + ": " + err.message);
+                      });
+                }
             }
             setTimeout(function () {
                 // Elements for taking the snapshot
-                var context = canvas.getContext('2d');
-                context.drawImage(video, 0, 0, 640, 480);
-                // var a = document.createElement('a');
-                // console.log(context.drawImage);
-                // a.setAttribute('href', canvas.toDataURL());　　//toDataUrl：将canvas画布信息转化为base64格式图片
-                // a.setAttribute('download', 'downImg')　　//这个是必须的，否则会报错
-                // a.setAttribute('target', '_self');
-                // console.log(a.href);
-                // a.click()
-                var picBase64 = canvas.toDataURL()
-                // if(picBase64.length < 10000){
-                //     this.$message.info('摄像头初始化中!', 2);
-                //     return;
-                // }
-                var file = self.base64toBlob(picBase64)
                 let data = new FormData();
                 data.append('orderCenterOrderId',self.selectedRowKeys[0]);
-                data.append('files',file);
-
+                for (let i = 0; i < self.deviceIds.length; i++) {
+                  if (i == 0) {
+                    var context = canvas.getContext('2d');
+                    context.drawImage(video, 0, 0, 640, 480);
+                    var picBase64 = canvas.toDataURL()
+                    data.append('file1',self.base64toBlob(picBase64));
+                  } else if (i == 1) {
+                    var context = canvas2.getContext('2d');
+                    context.drawImage(video2, 0, 0, 640, 480);
+                    var picBase642 = canvas2.toDataURL()
+                    data.append('file2',self.base64toBlob(picBase642));
+                  } else if (i == 2) {
+                    var context = canvas3.getContext('2d');
+                    context.drawImage(video3, 0, 0, 640, 480);
+                    var picBase643 = canvas3.toDataURL()
+                    data.append('file3',self.base64toBlob(picBase643));
+                  }
+                }
                 let config = {
                     headers:{'Content-Type':'multipart/form-data'}
                 };
@@ -263,11 +289,31 @@ export default {
                 },
             };
         },
+        getDevices() {
+          const self = this;
+          try {
+            navigator.mediaDevices.enumerateDevices()
+            .then(function(devices) {
+              devices.forEach(function(device) {
+                if (device.kind === 'videoinput') {
+                  self.deviceIds.push(device.deviceId)
+                  console.log(self.deviceIds)
+                }
+              });
+            })
+            .catch(function(err) {
+              console.log(err.name + ": " + err.message);
+            });
+          } catch (err) {
+            console.log(err.name + ": " + err.message);
+          }
+        }
     },
     mounted() {
         this.$nextTick(() => {
             this.$refs.deliveryNote.focus()
         })
+      this.getDevices()
     }
 }
 </script>