question about webcam, display area |
question about webcam, display area |
jammazcar |
May 10 2020, 09:30 PM
Post
#1
|
Group: Members Posts: 1 Joined: 10-May 20 Member No.: 27,335 |
Hi guys I'm new here,
I am doing a project in which I am displaying a webcam on my webpage. It's probably important to mention that I am using ml5 resources with my webpage to create a canvas and display the webcam within this canvas. I am using a .js file to generate the webcam as I am using posenet, a pose estimation library (used to draw a type of skeleton on an individual i.e making points on people's elbows, wrists, knees, ankles etc. and connecting these keypoints with lines), so I need to use javascript to get this to work. I then reference this .js file in the html file using a script tag, within a section of my html body. Everything works perfectly and the pose estimation works as it should. However the webcam does not appear in the section that the script tag is in. Instead, it appears underneath the webpage and not at all in the section that I want it to be displayed in. I tried using a video tag within the section of the body I want it to appear in and in this tag, using [code]class="video"[code]. I then referenced it in the .js file by using [code]var video=document.getElementById("video")[code]. However I could not get it to work. Here is the code in the html file: <section> <div class="box"> <h2> Exercise </h2> <br> <br> <script src="wristShoulder.js"></script> </div> </section> Here is the code in the wristShoulder.js file let poseNet; let pose; let video; function setup() { createCanvas(640, 480); video = createCapture(VIDEO); video.hide(); poseNet = ml5.poseNet(video, modelLoaded); poseNet.on('pose', gotPoses); } function gotPoses(poses) { console.log(poses) if (poses.length > 0) { pose = poses[0].pose; skeleton = poses[0].skeleton; } } function modelLoaded() { console.log('poseNet ready'); } function draw() { image(video, 0, 0); if (pose) { fill(255); let a = pose.keypoints[7].position.x; let b = pose.keypoints[7].position.y; let c = pose.keypoints[9].position.x; let d = pose.keypoints[9].position.y; let e = pose.keypoints[8].position.x; let f = pose.keypoints[8].position.y; let g = pose.keypoints[10].position.x; let h = pose.keypoints[10].position.y; ellipse(a, b, 16, 16); ellipse(c, d, 16, 16); ellipse(e, f, 16, 16); ellipse(g, h, 16, 16); strokeWeight(5); if ((c - a) < 20 && (c - a) > -20) { stroke(0, 200, 0); line(a, b, c, d); } else { stroke(255, 0, 0); line(a, b, c, d); } if ((g - e) < 20 && (g - e) > -20) { stroke(0, 200, 0); line(e, f, g, h); } else { stroke(255, 0, 0); line(e, f, g, h); } } } Hope that someone knows how to get it to display in this section, thanks! =) Attached File(s) Exercise.html ( 1.12k ) Number of downloads: 52 |
Lo-Fi Version | Time is now: 18th April 2024 - 06:57 AM |