The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> question about webcam, display area
post 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:

<div class="box">
<h2> Exercise </h2>
<script src="wristShoulder.js"></script>

Here is the code in the wristShoulder.js file

let poseNet;
let pose;
let video;

function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
poseNet = ml5.poseNet(video, modelLoaded);
poseNet.on('pose', gotPoses);

function gotPoses(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) {
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);
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)
Attached File  Exercise.html ( 1.12k ) Number of downloads: 3
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 5th June 2020 - 04:09 PM