I'm trying to figure out how to capture webcam video but I can't seem to get it working. The problem is that not even the example is working for me here:

http://p5js.org/examples/examples/Dom_Video_Capture.php

This example only ever shows a black window. Firefox asks to share my webcam but doesn't display anything. Chrome and Safari do not prompt to share the webcam.

I am running Mac OS X El Capitan version 10.11.2 and have tried the following browsers all with the same result:

Chrome 48.0.2564.109 (64-bit) Safari Version 9.0.2 (11601.3.9) Firefox 44.0.2

Does anyone know why I cannot seem to access my Mac's webcam? Is this a Mac issue?

p5.js says: image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received p5.Element instead at webpack-internal:///239:103:9. [http://p5js.org/reference/#p5/image]

The video argument the message seems to refer to, is a p5.MediaElement returned from p.createCapture( p.VIDEO ) - i.e. webcam stream. I have had no issues when using the same function calls in a static context.

The p.image call sits within the following code block:

const noiseX = p.noise(xoff)*(canvWidth+vWidth);
const noiseY = p.noise(yoff)*(canvHeight+vHeight);
xoff+=visualSettings.perlinScale.active;
yoff+=visualSettings.perlinScale.active;
p.image(video, noiseX-vWidth, noiseY-vHeight, vWidth, vHeight);

The sketch still runs as expected, but I would like to resolve the issues appropriately (besides, the error sits within the draw cycle which is really irritating).

It is unclear as to what is required to resolve the issue since the friendly error message says it was 'expecting a p5.Image or p5.Element' and has 'received p5.Element instead'. Any clarification anyone can provide would be much appreciated.

Here are the two pertinent files:

My question is : i have a project (in P5.js) using createCapture() which works great on GoogleChrome desktop (at least on my laptop), works great on GoogleChrome for Android too, but seems to NOT work on GoogleChrome for iOS... (i just get a blank screen instead of my fullscreen video preview)

Any advices about that? Is that a known behaviour or may i do something wrong ... ?

Thanks!

and I am not getting my code to work:

var video;

function setup() {
  createCanvas(320, 240);
  pixelDensity(1);
  video = createCapture(VIDEO).size(320, 240);
}

function draw() {
  background(51);

  video.loadPixels();

  //pixels from canvas
  loadPixels();
  for (var y = 0; y < height; y++) {
    for (var x = 0; x < width; x++) {
      var index = (x + y * width)*4;
      pixels[index+0] = video.pixels[index+0];
      pixels[index+1] = video.pixels[index+1];
      pixels[index+2] = video.pixels[index+2];
      pixels[index+3] = 255;      
    }
  }
  updatePixels();
}

It shows like a ghost-like video :/ http://xxnotmuchxx.tumblr.com/post/160811589716

var video;

function setup() {
  createCanvas(320, 240); //canvas
  background(51);
  
  video = createCapture(VIDEO); //camera / video
  video.size(320, 240);
  video.hide(); //hides video 
}

function draw() { //canvas
  image(video, 0, 0, width, height); //video on canvas, position, dimensions
}

I'm trying to create a simple video stream on the local network. However, the current code throws the following error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

Could someone point out what I'm doing wrong?

Thanks in advance, Charles

Server.js

var express = require('express');
// Create the app
var app = express();

// Set up the server
// process.env.PORT is related to deploying on heroku
//var server = app.listen(3000);

var server = app.listen(3000, '0.0.0.0', function() {
    console.log('Listening to port:  ' + 3000);
  });

app.use(express.static('public'));

// WebSocket Portion
// WebSockets work with the HTTP server
var socket = require('socket.io');

// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket){
    console.log("New connection: " + socket.id);

    socket.on('camera', newFrame);

    function newFrame(data){
        socket.broadcast.emit('camera', data);
        // for(var propertyName in data) {
        //  console.log(propertyName);
        // }
        //console.log(data.elt);
    }
}

Sketch.js

var socket;
var capture;

function setup() {
  createCanvas(innerWidth, innerHeight);
  background(0);

  capture = createCapture(VIDEO);
  capture.hide();

  socket = io.connect("http://localhost:3000");

  socket.on('camera', newFrame);
  noStroke();
}

function newFrame(data){
    image(data, 0, 0, 640, 320);
}


function draw() {
  socket.emit('camera', capture);
}

Not allowed to load local resource: blob:null/868aad42-ffd4-4e97-b4fd-ab9a9ffe18f7

I am trying the implement a very simple example, wondering what is wrong. Here is the JS sketch file code,

`(function () { "use strict";

var s = function (p) {

      p.setup = function () {
        p.canvas = p.createCanvas(640, 480, p.WEBGL);
        p.canvas.id('p5Canvas');
        p.background(51);
        p.video = p.createCapture(p.VIDEO);
        p.video.size(640, 480);
        p.video.id('p5Video');
        p.video.removeAttribute('crossorigin');
    };

};

var myP5 = new p5(s, 'videoContainer');

}());`

Here is my HTML file code,

<div id="outputContainer">
    <div id="videoContainer" width="960" height="720" style="display: inline-block;"></div>
    <div id="sketchContainer"></div>
</div>

Any help shall be deeply appreciated in this regard.

PS - The 'code' and 'quote' formatting arguments in this post are acting weird, not sure why.

Uncaught TypeError: Illegal invocation

The problem seems to be that capture is a P5.Image, which isn't something that can be simply uploaded to a server. It's not an image file. It's a data structure specific to P5.js that can render images in P5.js.

So, how do I convert a P5.Image into a file that you can then upload to a server.

And here is the code in the forum:

function process_image(img) {
    var url = "http://random.com/process_image";
    $.ajax({
        url: url,
        type: " POST ",
        crossDomain: true,
        dataType: " json ",
        data: {
            image: img
        },
        success: function (response) {
            console.log(response);
        },
        error: function (response) {
            console.log(response);
        }
    });
}

function setup() {
    createCanvas(900, 900);
    capture = createCapture(VIDEO);
    capture.size(320, 240);
    //capture.hide();
}

function draw() {
    background(255);
    image(capture, 0, 0, 320, 240);
    filter('INVERT');
    process_image(capture);

}

Any suggestions?

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="assets/vendor/jquery-3.0.0.min.js"></script>
    <script src="assets/vendor/p5/p5.min.js"></script>
    <script src="assets/vendor/p5/p5.dom.min.js"></script>
    <script src="assets/vendor/p5/p5.sound.min.js"></script>
    <script src="assets/scripts/script.js"></script>
</head>
<body>
    <div class="snapshot">
        <video id="video"  autoplay=""></video>
    </div>
</body>
</html>

//script.js

$(document).ready(e => {
    window.currentEffect = 0;
    let v = $("#video");
    effects = [{
        name: "Normal",
        effect: (p) => {
            let v;
            p.preload = () => {};
            p.setup = () => {
                v = p.select("#video");
                if (p.select("#canvas") === null) p.createCanvas(v.width, v.height).id("#canvas");
                else {
                    p.select("#canvas").remove();
                    p.createCanvas(v.width, v.height).id("#canvas");
                }
                p.pixelDensity(1);

            };
            p.draw = () => {
                p.background(51);
                p.translate(p.width, 0);
                p.scale(-1, 1);
                p.loadPixels();
                for (let y = 0; y < p.height; y++) {
                    for (let x = 0; x < p.width; x++) {
                        let i = (x + y * p.width) * 4,
                            r = v.pixels[i + 0],
                            g = v.pixels[i + 1],
                            b = v.pixels[i + 2],
                            rb = (r + g + b) / 3;
                        p.pixels[i + 0] = rb;
                        p.pixels[i + 1] = rb;
                        p.pixels[i + 2] = rb;
                        p.pixels[i + 3] = 255;
                    }
                }
                p.updatePixels();

            };
        }
    }];
    navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                mandatory: {
                    minWidth: v.width(),
                    minHeight: v.height(),
                    maxWidth: v.width(),
                    maxHeight: v.height()
                }
            }
        })
        .then(stream => {
            v.attr({
                "src": window.URL.createObjectURL(stream),
                "autoplay": "true"
            });
        })
        .catch(err => {
            console.error(err);
        });
     new p5(effects[0].effect);
});

I'm trying to render a PNG over a live video capture that is using clmtracker (3rd party face tracking js). Code is below.

I get an error:

Uncaught TypeError: Cannot read property '_imageMode' of undefined (On line 19413 of p5.js).

Am I approaching this wrong? Note: I can see the png is loaded in Chrome's Network tools.

<html>

  <head>
    <script src="bower_components/clmtrackr/clmtrackr.js"></script>
    <script src="bower_components/clmtrackr/models/model_pca_20_svm.js"></script>
    <script src="bower_components/p5.js/lib/p5.js"></script>
    <script src="bower_components/p5.js/lib/addons/p5.dom.js"></script>
    <script>
        var ctracker;
        var img;
      function setup() {

        img = loadImage("/src/images/watermark.png"); 

        // setup camera capture
        var videoInput = createCapture();
        videoInput.size(400, 300);
        videoInput.position(0, 0);

        var cnv = createCanvas(400, 300);
        cnv.position(0, 0);

        //Tracker
        ctracker = new clm.tracker();
        ctracker.init(pModel);
        ctracker.start(videoInput.elt);
        noStroke();
      }
      function draw() {
        clear();

        // Get face marker positions
        var positions = ctracker.getCurrentPosition();

        //Render watermark        
        image(img, 0, 0);

        for (var i=0; i<positions.length; i++) {
            var x = positions[i][0];
            var y = positions[i][1];
            console.log('x:'+x+' y:'+y);
        }
      }
    </script>

    <style> body { padding: 0; margin: 0} </style>

  </head>

  <body>
  </body>

</html>

Each inner square color takes the color of a corresponding pixel from a webcam feed. The outer square color was basically what the inner square color was last frame.

I use loadPixels() on the webcam to get the array and loop through each square object. It contains an x,y coordinate to take from the webcam feed.

I attempt to parse pixels correctly but for some reason I end up with only half of my image. I've tried many different values for pixel density but none seem to get everything. I don't even know the pixel density of the web cam feed definitely. 1. How do you determine this? 2. What am I doing wrong?

Here is the retrieval code:

function updateAndDisplaySquares() {
    var d = 4; // not sure if that number is correct...
    var w = capture.width;
    capture.loadPixels();
    for (var i = 0; i < squares.length; i++) {
        var x = squares[i].xCoordToGetFromCam;
        var y = squares[i].yCoordToGetFromCam;
        var c = [capture.pixels[(y*w*d+x)*d],
                 capture.pixels[(y*w*d+x)*d+1],
                 capture.pixels[(y*w*d+x)*d+2],
                 capture.pixels[(y*w*d+x)*d+3]];
        squares[i].update(c);
        squares[i].display();
    }
}

The full code...

EDIT: deleted bugged line

var capture;
var innerSquareSizePercent = 0.50;
var transparancyOfInnerSquare = 0.75;
var camWidth;
var camHeight;
var arrayOfDivisibles;
var currentDivisibleIndex; // which item in the array
var squares; // contains many Square class objects

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(30);
    console.log("window height is: " + windowHeight)

    capture = createCapture(VIDEO);
    capture.size(320, 240); // 320, 240
    capture.hide();
    camWidth = capture.width;
    camHeight = capture.height;

    arrayOfDivisibles = getDivisibleIntegers(camWidth, camHeight);
    currentDivisibleIndex = arrayOfDivisibles.length - 1;

    reconfigure();
}

function draw() {
    background(255);

    updateAndDisplaySquares();

    displayFrameRate();
}

function displayFrameRate() {
    var fr = Math.round(frameRate());
    fill(127, 80);
    textSize(20);
    text(fr, 20, 20);
}

function updateAndDisplaySquares() {
    var d = 4;
    var w = capture.width;
    capture.loadPixels();
    for (var i = 0; i < squares.length; i++) {
        var x = squares[i].xCoordToGetFromCam;
        var y = squares[i].yCoordToGetFromCam;
        var c = [capture.pixels[(y*w*d+x)*d],
                 capture.pixels[(y*w*d+x)*d+1],
                 capture.pixels[(y*w*d+x)*d+2],
                 capture.pixels[(y*w*d+x)*d+3]];
        // basically, we pass in the array, which is a slice of the giant pixels array.
        // This slice contains the desired pixel color in the form of an array.
        squares[i].update(c);
        squares[i].display();
    }
}

// square class
function Square(iSL, iX, iY) {
    this.sideLength = iSL;
    this.x = iX;
    this.y = iY;
    this.innerSideLength = this.sideLength * innerSquareSizePercent;
    this.offset = (this.sideLength - this.innerSideLength) / 2;
    this.innerX = this.offset + this.x;
    this.innerY = this.offset + this.y;
    this.squareCenterX = this.x + (this.sideLength / 2);
    this.squareCenterY = this.y + (this.sideLength / 2);
    this.xCoordToGetFromCam = Math.round((this.x * camWidth) / width);
    this.yCoordToGetFromCam = Math.round((this.y * camHeight) / height);
    this.c = color(255, 255, 255);
    this.previousColor = (255, 255, 255);

    this.update = function(col) {
        this.previousColor = this.c;
        this.c = col;
    }

    this.display = function() {
        noStroke();

        // outer
        fill(this.previousColor);
        rect(this.x, this.y, this.sideLength, this.sideLength);

        // inner
        fill(this.c, transparancyOfInnerSquare);
        rect(this.innerX, this.innerY, this.innerSideLength, this.innerSideLength);
    }
}

// gets divisible integers of the width and height
function getDivisibleIntegers(int1, int2) {
    var arr = [];
    var i;
    if (int1 > int2) {
        for (i = 3; i < int1; i++) {
            if (int1 % i === 0) {
                if (int2 % i === 0) {
                    arr.push(i);
                }
            }
        }
    }

    if (int2 > int1) {
        for (i = 3; i < int2; i++) {
            if (int2 % i === 0) {
                if (int1 % i === 0) {
                    arr.push(i);
                }
            }
        }
    }
    return arr;
}

function reconfigure() {
    squares = []; //# should this be  [] or {}?
    var squareSize = arrayOfDivisibles[currentDivisibleIndex];
    var numXSquares = Math.round(width / squareSize);
    var numYSquares = Math.round(height / squareSize);
    var numberOfSquares = numXSquares * numYSquares;

    console.log("num x squares is: " + numXSquares)
    console.log("num y squares is: " + numYSquares);

    for (var i = 0; i < numXSquares; i++) {
        for (var j = 0; j < numYSquares; j++) {
            var squareTopLeftX = i * squareSize;
            var squareTopLeftY = j * squareSize;
            var square = new Square(squareSize, squareTopLeftX, squareTopLeftY);
            squares.push(square);
        }
    }

    console.log("number of squares is: " + squares.length)
    console.log(squares)

}

I am very green on p5.js and I would like to pixelise a video capture with the examples given in the website below respectively: Video Pixel Video Capture

I have tried to code them but it doesn't work. Can anyone give me some advice please? Below is the code I have got:

var capture; var circles;

function setup() { createCanvas(390, 240); capture = createCapture(VIDEO); capture.size(320, 240); circles = createVideo(capture); circles.loop(); circles.hide(); /* capture.hide(); */ }

function draw() { background(255); image(capture, 0, 0, 320, 240); filter('INVERT');
circles.loadPixels(); for (var i=0; i<circles.pixels.length/2; i++) { circles.pixels[i] = random(255); } circles.updatePixels(); image(circles, 0, 0, 320, 240); }

Cheers!