init commit

src/services/web/index.js

@@ -5,17 +5,25 @@ import scanBeepAudio from "../../../res/scan_beep.ogg";
 
 const scanWeb = {
   uuid: null,
-  finish: true
+  finish: true,
+  stream: null,
+  videoEl: null
 }
 
 const DEFAULT_SCAN_BEEP_AUDIO = scanBeepAudio;
 const ZXING_READER_WASM_URL = "./lib/reader.wasm";
 
 let barcodeDetectorPreparePromise = null;
+let scanBeepAudioEl = null;
+let scanBeepAudioSrc = null;
+let scanBeepUnlocked = false;
 
-function removeEl(id) {
+function removeEl(id, uuid) {
   try {
     let el = document.getElementById(id);
+    if (uuid && el && el.uuid !== uuid) {
+      return;
+    }
     document.body.removeChild(el);
   } catch (error) {
   }
@@ -32,6 +40,32 @@ function createEl(tagName, id, style, appendChild) {
   return el;
 }
 
+function stopMediaStream(stream) {
+  try {
+    const tracks = stream && stream.getTracks && stream.getTracks();
+    if (tracks && tracks.length) {
+      for (let i = 0; i < tracks.length; i++) {
+        tracks[i].stop();
+      }
+    }
+  } catch (e) {
+  }
+}
+
+function stopActiveWebScan() {
+  scanWeb.uuid = null;
+  stopMediaStream(scanWeb.stream);
+  try {
+    if (scanWeb.videoEl) {
+      scanWeb.videoEl.pause && scanWeb.videoEl.pause();
+      scanWeb.videoEl.srcObject = null;
+    }
+  } catch (e) {
+  }
+  scanWeb.stream = null;
+  scanWeb.videoEl = null;
+}
+
 function transformPoint(point, width, height, mirrorHorizontal, mirrorVertical, cover) {
   let x = point.x;
   let y = point.y;
@@ -206,12 +240,14 @@ function playScanBeep() {
   if (getConfig("webScanBeepEnabled") === false) {
     return;
   }
-  const audioSrc = getConfig("webScanBeepAudio") || DEFAULT_SCAN_BEEP_AUDIO;
-  if (!audioSrc || typeof Audio === 'undefined') {
+  const audio = getScanBeepAudio();
+  if (!audio) {
     return;
   }
   try {
-    const audio = new Audio(audioSrc);
+    audio.muted = false;
+    audio.volume = 1;
+    audio.currentTime = 0;
     const playPromise = audio.play();
     playPromise && playPromise.catch && playPromise.catch(() => {
       // no thing
@@ -220,12 +256,45 @@ function playScanBeep() {
   }
 }
 
+function getScanBeepAudio() {
+  const audioSrc = getConfig("webScanBeepAudio") || DEFAULT_SCAN_BEEP_AUDIO;
+  if (!audioSrc || typeof Audio === 'undefined') {
+    return null;
+  }
+  if (!scanBeepAudioEl || scanBeepAudioSrc !== audioSrc) {
+    scanBeepAudioSrc = audioSrc;
+    scanBeepUnlocked = false;
+    scanBeepAudioEl = new Audio(audioSrc);
+    scanBeepAudioEl.preload = "auto";
+    try {
+      scanBeepAudioEl.load && scanBeepAudioEl.load();
+    } catch (e) {
+    }
+  }
+  return scanBeepAudioEl;
+}
+
+export function unlockScanBeep() {
+  if (getConfig("webScanBeepEnabled") === false || scanBeepUnlocked) {
+    return;
+  }
+  const audio = getScanBeepAudio();
+  if (!audio) {
+    return;
+  }
+  try {
+    // 这里只做预加载，不主动 play，避免部分浏览器露出提示音。
+    audio.load && audio.load();
+    scanBeepUnlocked = true;
+  } catch (e) {
+  }
+}
+
 export function isSupportWebScan() {
   return typeof navigator !== 'undefined'
     && navigator.mediaDevices
     && navigator.mediaDevices.getUserMedia
-    && !!getBarcodeDetectorClass()
-    && getConfig("webCanvasEnabled") !== false;
+    && !!getBarcodeDetectorClass();
 }
 
 export function isSupportImageScan() {
@@ -236,7 +305,7 @@ export function isSupportImageScan() {
 
 export function stopScanForWeb() {
   return Promise.resolve().then(() => {
-    scanWeb.uuid = null;
+    stopActiveWebScan();
   })
 }
 
@@ -319,8 +388,10 @@ export function startScanForImage() {
 }
 
 export function startScanForWeb(canvasStyle, onResult) {
+  let currentUuid = null;
   return new Promise((resolve, reject) => {
     try {
+      stopActiveWebScan();
       scanWeb.uuid = createUUID();
       scanWeb.finish = false;
       let videoEl = createEl("video",
@@ -338,10 +409,11 @@ export function startScanForWeb(canvasStyle, onResult) {
       let canvasDisplaySize = getCanvasDisplaySize(canvasEl, 300, 240);
       canvasEl.style.display = "none";
       let context = canvasEl.getContext("2d");
-      let currentUuid = scanWeb.uuid;
+      currentUuid = scanWeb.uuid;
       videoEl.width = 300;
       videoEl.height = 300;
       videoEl.uuid = scanWeb.uuid;
+      canvasEl.uuid = scanWeb.uuid;
       createBarcodeDetector(getConfig("webScanType")).then(detector => {
         return navigator.mediaDevices.getUserMedia({
           video: {
@@ -356,6 +428,13 @@ export function startScanForWeb(canvasStyle, onResult) {
       }).then(function (options) {
         const detector = options.detector;
         const stream = options.stream;
+        if (scanWeb.uuid !== currentUuid) {
+          stopMediaStream(stream);
+          reject({ cancel: 1 });
+          return;
+        }
+        scanWeb.stream = stream;
+        scanWeb.videoEl = videoEl;
         const mirrorVideo = shouldMirrorWebVideo(stream);
         const mirrorVideoVertical = shouldMirrorWebVideoVertical();
         videoEl.srcObject = stream;
@@ -370,8 +449,14 @@ export function startScanForWeb(canvasStyle, onResult) {
             return;
           }
           closed = true;
+          stopMediaStream(stream);
+          if (scanWeb.uuid === currentUuid || scanWeb.stream === stream) {
+            scanWeb.stream = null;
+            scanWeb.videoEl = null;
+          }
           try {
-            stream.getTracks()[0].stop();
+            videoEl.pause && videoEl.pause();
+            videoEl.srcObject = null;
           } catch (_e) { }
         };
         let tick = () => {
@@ -443,7 +528,7 @@ export function startScanForWeb(canvasStyle, onResult) {
       reject({ error: e });
     }
   }).finally(() => {
-    removeEl("__webscan_video__");
-    removeEl("__webscan_canvas__");
+    removeEl("__webscan_video__", currentUuid);
+    removeEl("__webscan_canvas__", currentUuid);
   })
 }