capture = createCapture(VIDEO); Can we reference a different Camera on phone? #1496

ashleyjamesbrown · 2016-07-01T11:54:05Z

capture = createCapture(VIDEO);

Using this on a mobile phone web page generally in my small test calls the front facing camera.

Was wondering about extending so we can have a default, but also pass a parameter to call any other subsequent devices attached (or at least try to) so for example we can call the standard back facing camera ? Please forgive i have missed this in any documentation

Ashley

nok · 2016-07-01T13:55:06Z

On http://p5js.org/reference/#/p5/createCapture you will find the full documentation.

More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers.

For instance possible constraints are listed on:

You can define a facing mode, e.g. user:

function setup() {
  createCapture({
    audio: false,
    video: {
      facingMode: "user"
    }
  });
}

To use the rear camera you choose the environment facing mode. I tested it successfully with my desktop camera (as fallback I guess).

function setup() {
  createCapture({
    audio: false,
    video: {
      facingMode: {
        exact: "environment"
      }
    }
  });
}

The list shows the different facing modes:

user: The source is facing toward the user (a self-view camera).
environment: The source is facing away from the user (viewing the environment).
left: The source is facing to the left of the user.
right: The source is facing to the right of the user.

Image source: https://w3c.github.io/mediacapture-main/getusermedia.html#dom-mediatrackconstraintset-facingmode

Nevertheless you should check the browser support and read the security specifications (https):

Security note: A new browser security specification requires that getUserMedia, which is behind createCapture(), only works when you're running the code locally, or on HTTPS. Learn more here and here.

Darius

ashleyjamesbrown · 2016-07-02T10:13:50Z

Thanks a lot i did read the reference i just didn't follow through the link to the other constraints.

Might be worth updating the demo as well btw as this doesn't show using any constraints at all - let alone my request but also in that reference you linked me it only shows setup function. As I dug in the reference it states using constraints creates a video object to be displayed using video() but no example code on how to implement this. Using image(capture) just leaves me with black box canvas regardless of mode chosen.

And yeh - i have it on my own server online which has secure hosting. It also has to point to https:// for the scripts which i have hosted on my server as well.

Thanks a lot for the response

ashleyjamesbrown · 2016-07-02T10:44:34Z

Test:

If you wish to look.

Even with the 'desktop' mode you suggest I cant show the image to the canvas yet the camera is clearly streaming. Can you let me know what i'm doing wrong.

nok · 2016-07-02T11:18:20Z

First of all the second sentence of the description of createCapture() is wrong:

Creates a new

sketch.js:14 Uncaught ReferenceError: video is not defined

It can't work with the video() method, because there isn't a method with this name.

Here is my working example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script language="javascript" type="text/javascript" src="https://ashleyjamesbrown.com/p5js/p5.js"></script>
  <script language="javascript" type="text/javascript" src="https://ashleyjamesbrown.com/p5js/p5.dom.js"></script>
  <script src="sketch.js"></script>
  <style>
    video {
      display: none;
    }
  </style>
</head>
<body>
</body>
</html>

The method createCapture() creates a <video> element, which we want to hide.

var capture;

function setup() {
  createCanvas(640, 480);
  var constraints = {
    audio: false,
    video: {
      facingMode: "user"
    }
  };
  capture = createCapture(constraints);
}
function draw() {
  image(capture, 0, 0, 640, 480);
  // filter(INVERT); // ;-)
}

For testing I use Google Chrome (Version 51.0.2704.103 (64-bit)): http://caniuse.com/#feat=stream

ashleyjamesbrown · 2016-07-02T11:47:30Z

Did not realise i needed a style tag element in the html. Thanks.

It works fine in the browser and on the phone now and as you say it hides the capture automatically without calling the old function capture.hide();

This code though

 facingMode: {
        exact: "environment"
      }

does not change the phone camera to use the front facing one. On the desktop it calls the same webcam, on the phone it calls the front facing one the same as using user

Could we update the reference docs btw about that error line and the html line that needs to go in - i mean once we have a use for this working as currently it does the same as the standard code?

nok · 2016-07-02T12:33:24Z

Did not realise i needed a style tag element in the html. Thanks.

Thanks, I didn't know this method, but in general it does the same: https://github.com/processing/p5.js/blob/master/lib/addons/p5.dom.js#L1451-L1465

The hide() method has the advantage, that you just hide the created and specific <video> element. Instead the CSS way would hide all <video> elements.

The user mode should use the front camera. On the other hand the environment mode should use the rear camera. In your implementation you use the user mode.

The constraints will be passed to navigator.getUserMedia(), so it's a browser support issue.
https://github.com/processing/p5.js/blob/master/lib/addons/p5.dom.js#L985

I tested your implementation on my phone (Galaxy S6) with the Firefox for Android and Google Chrome. By using the Chrome browser I just see a black box. By using the Firefox browser I see a stretched version of myself:

Using the phone was very laggy. I suppose because of the transformation from the streaming source to the <canvas> element. But I didn't test it. In detail I don't know whether the browsers are smart enough to not render the video on a hidden <video> element.

In addition maybe the Chrome browser uses another technologies like the mediaDevices.enumerateDevices() and deviceId to select the right camera: https://webrtc.github.io/samples/src/content/devices/input-output/

dimpapadop · 2016-10-05T12:06:51Z

hallo.
I tried everything but the camera that opens in mobile phones is the face camera

anyone find a solution?
thank you

lmccart · 2016-10-05T14:21:25Z

here is an example of printing out available sources and then specifying one by id to use for capture:
https://github.com/ITPNYU/ICM-2015/blob/master/09_video_sound/02_capture/13_get_sources/sketch.js

dimpapadop · 2016-10-05T14:32:19Z

thanks @lmccart it was extremely usefull.!!!!!!!!!!!

balsimpson · 2017-04-25T10:49:10Z

I am trying to make a simple live feed using createCapture(VIDEO) on my Raspberry Pi. The problem is that when I access the sketch from my browser, the camera feed switches to my laptop camera. How can I ensure that the createCapture video source is the Raspberry Pi camera?

Thanks for any help.

lmccart · 2017-04-25T14:14:13Z

here's an example: https://github.com/ITPNYU/ICM-2015/blob/master/09_video_sound/02_capture/13_get_sources/sketch.js

@todo add an example like this to the reference or examples page somewhere

balsimpson · 2017-04-25T19:14:39Z

thank you for the reply. maybe I wasn't clear in my question as to what I wanted to achieve. I want to use a live feed of a camera connected to my raspberry pi as the background image for my p5js sketch. So i can overlay other elements relative to this feed and track my cat movement to play a game. but i cannot seem to proceed because when I open to sketch from a different computer, the feed switches to the local camera from the laptop, which I don't want (it should only be using the raspberry pi cam)

so my question is:

do i need to use it in a different manner than createCapture(VIDEO). Like using motioneye and pointing p5js to the images folder using loadImage
is there someway to specify the camera to be used for the original sketch?

Am still not sure if I've explained it clearly. So just for clarity, am repeating myself:

sketch uses raspberry pi cam live feed as background image.
when new user opens the page, they see objects and text overlaid on the source image(pi cam feed)
use motion detection to use cat movement to interact with the elements overlaid.

thanks for all the help. I tried your sketch but it only shows the camera attached to the local machine from which am accessing the sketch.

limzykenneth · 2017-04-26T02:53:23Z

@balsimpson createCapture will only capture the camera device attached to the browser host environment, meaning if you visit your sketch on your laptop, it will use your laptop camera and when you visit it on a Raspberry Pi, it will use the attached Raspberry Pi camera.

If you are thinking of streaming the Raspberry Pi camera feed footage to a sketch running on your laptop, you will be some kind of server setup. I would start with WebRTC as a possible solution, others might have better suggestion.

CharlesFr · 2017-05-08T12:22:50Z

I get MediaStreamTrack.getSources is not a function, what have I missed?

limzykenneth · 2017-05-08T12:24:49Z

@CharlesFr does your browser support WebRTC? E.g. Safari doesn't support it yet

CharlesFr · 2017-05-08T12:29:29Z

I'm running it on Chrome Version 57.0.2987.133 (64-bit)

limzykenneth · 2017-05-08T12:35:51Z

@CharlesFr does this example work? If it does then we will need to provide more detail about your sketch, if not then we need more detail about your setup.

JoelStrawnCode · 2017-05-17T21:58:29Z

This code though

facingMode: {
exact: "environment"
}

Changed to:

facingMode: "environment"

Worked for me.

CheshtaKumar · 2019-01-17T07:08:11Z

I'm trying to connect an IP Camera instead of a droidcam or webcam. Is it possible ? If yes, Please suggest on how to use an IP Camera with p5.js

jywarren · 2019-04-16T14:45:45Z

Hi! For the pi camera part, we've been able to stream to a canvas from a pi camera using this code:

https://github.com/publiclab/infragram/blob/23cafed8f62f4f7eb42bc195543c921c49372026/pi/index.html#L185-L191

...while the pi is running a pi camera web interface, we have a standard as card image you can use here, that also starts up a wifi net from the pi: http://publiclab.org/pi-camera

Hope that helps!

jywarren · 2019-04-16T14:47:20Z

Also I believe the demo here isn't working due to an API change in webrtc video... If that's correct I can submit a fix soon! Thanks all.

https://p5js.org/examples/dom-video-capture.html

jywarren · 2019-04-16T15:12:07Z

Sorry, that's not it (the API change), at least as far as I can tell. It works normally on Chrome/ChromeOS but not on Chrome Android 73.0.3683.90. I'll look for or open a new issue. 👍

jywarren · 2019-04-16T17:22:09Z

False alarm, sorry -- it is working in that environment; the video is just cut off the side of the screen. https://github.com/processing/p5.js/issues/3699

lmccart closed this as completed Mar 15, 2017

GeeveGeorge mentioned this issue Nov 7, 2019

Switching between front and rear camera on a smartphone using P5.js #4140

Closed

bomanimc mentioned this issue Nov 5, 2020

how can i stream ip camera videos to ml5.js ml5js/ml5-library#833

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

capture = createCapture(VIDEO); Can we reference a different Camera on phone? #1496

capture = createCapture(VIDEO); Can we reference a different Camera on phone? #1496

ashleyjamesbrown commented Jul 1, 2016

nok commented Jul 1, 2016 •

edited

Loading

ashleyjamesbrown commented Jul 2, 2016 •

edited

Loading

ashleyjamesbrown commented Jul 2, 2016

nok commented Jul 2, 2016

ashleyjamesbrown commented Jul 2, 2016 •

edited

Loading

nok commented Jul 2, 2016 •

edited

Loading

dimpapadop commented Oct 5, 2016 •

edited

Loading

lmccart commented Oct 5, 2016

dimpapadop commented Oct 5, 2016 •

edited

Loading

balsimpson commented Apr 25, 2017

lmccart commented Apr 25, 2017

balsimpson commented Apr 25, 2017

limzykenneth commented Apr 26, 2017

CharlesFr commented May 8, 2017

limzykenneth commented May 8, 2017

CharlesFr commented May 8, 2017

limzykenneth commented May 8, 2017

JoelStrawnCode commented May 17, 2017

CheshtaKumar commented Jan 17, 2019

jywarren commented Apr 16, 2019

jywarren commented Apr 16, 2019

jywarren commented Apr 16, 2019

jywarren commented Apr 16, 2019

capture = createCapture(VIDEO); Can we reference a different Camera on phone? #1496

capture = createCapture(VIDEO); Can we reference a different Camera on phone? #1496

Comments

ashleyjamesbrown commented Jul 1, 2016

nok commented Jul 1, 2016 • edited Loading

ashleyjamesbrown commented Jul 2, 2016 • edited Loading

ashleyjamesbrown commented Jul 2, 2016

nok commented Jul 2, 2016

ashleyjamesbrown commented Jul 2, 2016 • edited Loading

nok commented Jul 2, 2016 • edited Loading

dimpapadop commented Oct 5, 2016 • edited Loading

lmccart commented Oct 5, 2016

dimpapadop commented Oct 5, 2016 • edited Loading

balsimpson commented Apr 25, 2017

lmccart commented Apr 25, 2017

balsimpson commented Apr 25, 2017

limzykenneth commented Apr 26, 2017

CharlesFr commented May 8, 2017

limzykenneth commented May 8, 2017

CharlesFr commented May 8, 2017

limzykenneth commented May 8, 2017

JoelStrawnCode commented May 17, 2017

CheshtaKumar commented Jan 17, 2019

jywarren commented Apr 16, 2019

jywarren commented Apr 16, 2019

jywarren commented Apr 16, 2019

jywarren commented Apr 16, 2019

nok commented Jul 1, 2016 •

edited

Loading

ashleyjamesbrown commented Jul 2, 2016 •

edited

Loading

ashleyjamesbrown commented Jul 2, 2016 •

edited

Loading

nok commented Jul 2, 2016 •

edited

Loading

dimpapadop commented Oct 5, 2016 •

edited

Loading

dimpapadop commented Oct 5, 2016 •

edited

Loading