UnityWebMediapipePose/wwwroot/index.html at main · jsaon-L/UnityWebMediapipePose · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | TestMediaPipeJS</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>


    <script src="./package/camera_utils.js" crossorigin="anonymous"></script>
    <script src="./package/control_utils.js" crossorigin="anonymous"></script>
    <script src="./package/drawing_utils.js" crossorigin="anonymous"></script>
    <script src="./package/pose.js" crossorigin="anonymous"></script>


    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/www.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="unityContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
        <div class="title">TestMediaPipeJS</div>
      </div>
    </div>


<script id="rendered-js">

  const videoElement = document.getElementsByTagName('video')[0];
  console.log(videoElement);

  function onResults(results) {

    //console.log(results.poseLandmarks);
    if(typeof(results.poseLandmarks) == "undefined")
    {
      unityInstance.SendMessage('Quad', 'ResultsPoseValue', "undefined");
    }
    else
    {
      var landmark = JSON.stringify(results.poseLandmarks)
      unityInstance.SendMessage('Quad', 'ResultsPoseValue', landmark);
    }

  }

  const pose = new Pose({ locateFile: file => {
      return `https://cdn.jsdelivr.net/npm/@mediapipe/pose@0.1/${file}`;
    } });

  pose.onResults(onResults);

  // document.onkeydown=function(event){
  //   var v = document.getElementsByTagName('video')[0];
  //   console.log(v);
  //   console.log("按下了按键 识别当前帧");
  //   pose.send({ image: v })


  // }
  var input_video;
  function uniigymposesend() {

    if(typeof(input_video) == "undefined"){

      input_video = document.getElementsByTagName('video')[0];
    }

    pose.send({ image: input_video })
  }

  </script>


  </body>
</html>