Question

我目前正在尝试在观看者授予网络摄像头许可后3秒钟显示警报。警报也应该与它们有音频，因为它们应该同时被触发。

网络摄像头具有面部跟踪功能，因此有很多额外的代码。所以我不知道javascript，所以请视觉效果比声明更有帮助。

这是我正在使用的当前代码。

 <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>eve_</title>
      <link rel="stylesheet" href="assets/demo.css">
      <link rel="icon" rel="preload" href="images/evecircle.png" />
      <script src="../build/tracking-min.js"></script>
      <script src="../build/data/face-min.js"></script>
       <script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
      <script src="assets/stats.min.js"></script>
     <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <style>

      video, canvas {
        position: absolute;
      }
      </style>
    </head>
    <body onload="delayedAlert();">
      <div class="demo-title">

    <p><a href="http://trackingjs.com" target="_parent"></a></p>
  </div>

  <div class="demo-frame">
    <div class="demo-container">
      <video id="video" width="700" height="700" preload autoplay loop muted></video>
      <canvas id="canvas" width="700" height="700"></canvas>
    </div>
  </div>

 <audio>
  <source src="audio/hello.wav" type="audio/wav" preload=true>
 </audio>

 <audio>
  <source src="audio/is_something_here.wav" type="audio/wav" preload=true>
 </audio>

  <audio>
  <source src="audio/oh_something_is_here.wav" type="audio/wav" preload=true>
 </audio>


 <audio>
 <source src="audio/what_is_your_name.wav" type="audio/wav" preload=true>
 </audio>




  <script>
  var timeoutID;

  function delayedAlert() {
  timeoutID = window.setTimeout(slowAlert, 5000);
}


    window.onload = function() {
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var inverse = function inverse(imageData) {
    var data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        data[i] = 255 - data[i];
        data[i + 1] = 255 - data[i + 1];
        data[i + 2] = 255 - data[i + 2];
    }
     var audio= document.getElementsByTagName('audio')[0];
 const audio2 = document.getElementsByTagName('audio')[1];
 var audio3 = document.getElementsByTagName('audio')[2];
  var audio4 = document.getElementsByTagName('audio')[3];
    return imageData;
};
      var tracker = new tracking.ObjectTracker('face');
      tracker.setInitialScale(4);
      tracker.setStepSize(2);
      tracker.setEdgesDensity(0.1);

      tracking.track('#video', tracker, { camera: true });

      tracker.on('track', function(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);

        event.data.forEach(function(rect) {
          context.strokeStyle = '#0000ff';
          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
          context.font = '13px Helvetica';
          context.fillStyle = "#fff";
          context.fillText('x: ' + rect.x + '3px', rect.x + rect.width + 5, rect.y + 11);
          context.fillText('y: ' + rect.y + '3px', rect.x + rect.width + 5, rect.y + 22);
        });
      });

      var gui = new dat.GUI();
      gui.add(tracker, 'edgesDensity', 0.5, 0.5).step(0.1);
      gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
      gui.add(tracker, 'stepSize', 1, 5).step(0.1);
    };

    function slowAlert() {
 var audio= document.getElementsByTagName('audio')[0];
 const audio2 = document.getElementsByTagName('audio')[1];
 var audio3 = document.getElementsByTagName('audio')[2];
  var audio4 = document.getElementsByTagName('audio')[3];

audio.play(); 
var myvar1;alert('Hello?');

audio2.play(); 
var myvar1;alert('Is something here?');

audio3.play();
var myvar2;alert('Something is here.');

    };
    </script>

         <audio>
  <source src="audio/hello.wav" type="audio/wav" preload=true>
 </audio>

 <audio>
  <source src="audio/is_something_here.wav" type="audio/wav" preload=true>
 </audio>

  <audio>
  <source src="audio/oh_something_is_here.wav" type="audio/wav" preload=true>
 </audio>


 <audio>
 <source src="audio/what_is_your_name.wav" type="audio/wav" preload=true>
 </audio>

</body>
</html>

Answer 1

您似乎忘了拨打delayedAlert()

为什么这些警报没有出现？

1 个答案: