P5.js: Processing live video from youtube (or vimeo)

[adriens]

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [x] Video

New feature details:

In the actual VIDEO Object, could you please provide some code sample to process a live video stream (youtube or vimeo) ? That could lead to a wide number of creations. It could be used the same way we use local webcam.

Thank you in advance for any feedback.

Best Regards,

Adrien

[limzykenneth]

Hi @adriens, are you talking about the VIDEO constant that is used in createCapture? This function is specifically used for getting video feed from the webcam or audio from microphone.

If you want to get a live streamed video, you will need the URL of the video and use https://p5js.org/reference/#/p5/createVideo. I've never tried it before but I would assume that should work.

[adriens]

Hi @limzykenneth , yes, you got it, what I'm intersted in is to be able to deal and interact with a live stremaed video. I'l tka e closer look to https://p5js.org/reference/#/p5/createVideo

Thanks a lot for your answer 🙏

[adriens]

Still it looks lie htis function takes files as parameters and not urls, the following (very stupide code, sorry) has no effect :

let vid;
function setup() {
  noCanvas();

  vid = createVideo(
    ['https://youtu.be/2u4CwVllO_w', 'https://youtu.be/2u4CwVllO_w', 'https://youtu.be/2u4CwVllO_w'],
    vidLoad
  );

  vid.size(100, 100);
}

// This function is called when the video loads
function vidLoad() {
  vid.loop();
  vid.volume(0);
}

[adriens]

The documentations talks about

The first parameter can be either a single string path to a video file, or an array of string paths to different formats of the same video.

Which let me thinks it cannot handle a web url. Mybe an another function, which I could not manage to find

[adriens]

Same question here: https://discourse.processing.org/t/loading-video-from-url/5480

[adriens]

Maybe use this one https://p5js.org/reference/#/p5.MediaElement

but I could not find ready to use code snippet

[limzykenneth]

You should continue your queries on the forum as we use github issues mainly for feature request and bug fixes. I'm closing this issue but to help you out a bit, the URL you are supposed to pass into createVideo needs to be the URL of the video itself, not to a page where the video is (which means youtube links are not acceptable).

[adriens]

Could it not be a feature request hence ? To be able to interact natively with a youtue/vimeo url ?

[limzykenneth]

We don't add specific support for non-standard third party services and one of the main reason is that the way youtube/vimeo's video URL structure is not something we can control, if for example youtube changed how it form the video URL, we will have to change it in the repo as well not to mention all older code will break along with that change.

We also cannot guarantee using a direct video link from youtube/vimeo is something supported by youtube/vimeo right now or even encouraged by them, because of copyright and advertising issues.

[adriens]

Makes sense. Thanks a lot for detailed answer. 👍