.

html/SimpleThreeJsExample/asset/js/webar.js

@@ -26,38 +26,56 @@ class WebAR {
      */
     listCamera(videoDevice) {
         return new Promise((resolve, reject) => {
-            navigator.mediaDevices.enumerateDevices()
-                .then((devices) => {
-                let index = 0;
-                devices.find((device) => {
-                    if (device.kind === 'videoinput') {
-                        const option = document.createElement('option');
-                        // 在iOS12.2上deviceId为空
-                        if (device.deviceId == '') {
-                            option.text = device.label || 'camera ' + this.cameras[index];
-                            option.value = JSON.stringify({ audio: false, video: { facingMode: { exact: this.cameras[index] } } });
-                            index++;
+            navigator.mediaDevices
+                .enumerateDevices()
+                .then(devices => {
+                    let index = 0;
+                    devices.find(device => {
+                        if (device.kind === "videoinput") {
+                            const option = document.createElement("option");
+                            console.log(device);
+                            // 在iOS12.2上deviceId为空
+                            if (device.deviceId == "") {
+                                option.text =
+                                    device.label ||
+                                    "camera " + this.cameras[index];
+                                option.value = JSON.stringify({
+                                    audio: false,
+                                    video: {
+                                        facingMode: {
+                                            exact: this.cameras[index]
+                                        }
+                                    }
+                                });
+                                index++;
+                            } else {
+                                option.text =
+                                    device.label ||
+                                    "camera " +
+                                        (videoDevice.length + 1).toString();
+                                option.value = JSON.stringify({
+                                    audio: false,
+                                    video: {
+                                        deviceId: { exact: device.deviceId }
+                                    }
+                                });
+                            }
+                            // 将摄像头信息存储在select元素中，方便切换前、后置摄像头
+                            videoDevice.appendChild(option);
                         }
-                        else {
-                            option.text = device.label || 'camera ' + (videoDevice.length + 1).toString();
-                            option.value = JSON.stringify({ audio: false, video: { deviceId: { exact: device.deviceId } } });
-                        }
-                        // 将摄像头信息存储在select元素中，方便切换前、后置摄像头
-                        videoDevice.appendChild(option);
+                        return false;
+                    });
+                    if (videoDevice.length === 0) {
+                        reject("没有可使用的视频设备");
+                    } else {
+                        this.initVideo();
+                        this.initCanvas();
+                        resolve(true);
                     }
-                    return false;
+                })
+                .catch(err => {
+                    reject(err);
                 });
-                if (videoDevice.length === 0) {
-                    reject('没有可使用的视频设备');
-                }
-                else {
-                    this.initVideo();
-                    this.initCanvas();
-                    resolve(true);
-                }
-            }).catch(err => {
-                reject(err);
-            });
         });
     }
     /**
@@ -74,35 +92,41 @@ class WebAR {
             });
         }
         return new Promise((resolve, reject) => {
-            navigator.mediaDevices.getUserMedia(constraints)
+            navigator.mediaDevices
+                .getUserMedia(constraints)
                 .then(stream => {
-                this.videoElement.srcObject = stream;
-                this.videoElement.style.display = 'block';
-                this.videoElement.play();
-                this.videoElement.onloadedmetadata = () => {
-                    const cameraSize = {
-                        width: this.videoElement.offsetWidth,
-                        height: this.videoElement.offsetHeight
-                    };
-                    console.info(JSON.stringify(cameraSize));
-                    if (window.innerWidth < window.innerHeight) {
-                        // 竖屏
-                        if (cameraSize.height < window.innerHeight) {
-                            this.videoElement.setAttribute('height', window.innerHeight.toString() + 'px');
+                    this.videoElement.srcObject = stream;
+                    this.videoElement.style.display = "block";
+                    this.videoElement.play();
+                    this.videoElement.onloadedmetadata = () => {
+                        const cameraSize = {
+                            width: this.videoElement.offsetWidth,
+                            height: this.videoElement.offsetHeight
+                        };
+                        console.info(JSON.stringify(cameraSize));
+                        if (window.innerWidth < window.innerHeight) {
+                            // 竖屏
+                            if (cameraSize.height < window.innerHeight) {
+                                this.videoElement.setAttribute(
+                                    "height",
+                                    window.innerHeight.toString() + "px"
+                                );
+                            }
+                        } else {
+                            // 横屏
+                            if (cameraSize.width < window.innerWidth) {
+                                this.videoElement.setAttribute(
+                                    "width",
+                                    window.innerWidth.toString() + "px"
+                                );
+                            }
                         }
-                    }
-                    else {
-                        // 横屏
-                        if (cameraSize.width < window.innerWidth) {
-                            this.videoElement.setAttribute('width', window.innerWidth.toString() + 'px');
-                        }
-                    }
-                    resolve(true);
-                };
-            })
+                        resolve(true);
+                    };
+                })
                 .catch(err => {
-                reject(err);
-            });
+                    reject(err);
+                });
         });
     }
     /**
@@ -110,25 +134,39 @@ class WebAR {
      * @returns {string}
      */
     captureVideo() {
-        this.canvasContext.drawImage(this.videoElement, 0, 0, this.videoElement.offsetWidth, this.videoElement.offsetHeight);
-        return this.canvasElement.toDataURL('image/jpeg', 0.5).split('base64,')[1];
+        this.canvasContext.drawImage(
+            this.videoElement,
+            0,
+            0,
+            this.videoElement.offsetWidth,
+            this.videoElement.offsetHeight
+        );
+        return this.canvasElement
+            .toDataURL("image/jpeg", 0.5)
+            .split("base64,")[1];
     }
     /**
      * 创建视频详情元素，播放摄像头视频流
      */
     initVideo() {
-        this.videoElement = document.createElement('video');
-        this.videoElement.setAttribute('playsinline', 'playsinline');
+        this.videoElement = document.createElement("video");
+        this.videoElement.setAttribute("playsinline", "playsinline");
         document.body.appendChild(this.videoElement);
     }
     /**
      * 创建canvas，截取摄像头图片时使用
      */
     initCanvas() {
-        this.canvasElement = document.createElement('canvas');
-        this.canvasElement.setAttribute('width', window.innerWidth.toString() + 'px');
-        this.canvasElement.setAttribute('height', window.innerHeight.toString() + 'px');
-        this.canvasContext = this.canvasElement.getContext('2d');
+        this.canvasElement = document.createElement("canvas");
+        this.canvasElement.setAttribute(
+            "width",
+            window.innerWidth.toString() + "px"
+        );
+        this.canvasElement.setAttribute(
+            "height",
+            window.innerHeight.toString() + "px"
+        );
+        this.canvasContext = this.canvasElement.getContext("2d");
         // document.body.appendChild(this.canvasElement);
     }
     /**
@@ -146,14 +184,14 @@ class WebAR {
             const image = { image: this.captureVideo() };
             // 发送到服务器识别
             this.httpPost(image)
-                .then((msg) => {
-                this.stopRecognize();
-                callback(msg);
-            })
-                .catch((err) => {
-                this.isRecognizing = false;
-                console.info(err);
-            });
+                .then(msg => {
+                    this.stopRecognize();
+                    callback(msg);
+                })
+                .catch(err => {
+                    this.isRecognizing = false;
+                    console.info(err);
+                });
         }, this.interval);
     }
     /**
@@ -174,30 +212,30 @@ class WebAR {
                     if (http.status === 200) {
                         if (msg.statusCode === 0) {
                             resolve(msg.result);
-                        }
-                        else {
+                        } else {
                             reject(msg);
                         }
-                    }
-                    else {
+                    } else {
                         reject(msg);
                     }
-                }
-                catch (err) {
+                } catch (err) {
                     reject(err);
                 }
             };
-            http.onerror = (err) => {
+            http.onerror = err => {
                 reject(err);
             };
-            http.open('POST', this.recognizeUrl);
-            http.setRequestHeader('Content-Type', 'application/json;Charset=UTF-8');
+            http.open("POST", this.recognizeUrl);
+            http.setRequestHeader(
+                "Content-Type",
+                "application/json;Charset=UTF-8"
+            );
             if (this.token) {
                 // 将云识别认证token写在请求头中
-                http.setRequestHeader('Authorization', this.token);
+                http.setRequestHeader("Authorization", this.token);
             }
             http.send(JSON.stringify(image));
         });
     }
 }
-//# sourceMappingURL=webar.js.map
+//# sourceMappingURL=webar.js.map