P5js video error: Element play method raised an error asynchronously DOMException

p5.js Coding Questions
1

I have a question about an error I get when I want to have a video play in my p5js sketch:

WARN: Element play method raised an error asynchronously DOMException

If I press the canvas first with my mouse, the error does not occur.

Is there any trick to not have to press the mouse first?

2

I’m also having issues with opening a video capture. I tried to replicate by running the sketch from the documentation for createCapture. However, this fails with the error:

MediaStreamError
​
constraint: ""
​
message: "The object can not be found here."
​
name: "NotFoundError"
​
stack: ""

Could this be a bug in p5dom? Release is 0.7.2. Upgrading to 0.7.3 doesn’t fix anything.

See my sketch here for replication.

3

I can run your sketch without any errors or issues.

For clarification: My issues is about playing back a video file, not streaming the webcam.

4

Hi Andreas, sorry about the confusion, seems like my webcam was misbehaving for unrelated reasons. I haven’t seen your code, but just reasoning about it I have a few ideas:

  1. You can probably simulate a click event in code, to save yourself the manual input. There is an example in MDN of how to do so in vanilla Javascript. Trimming it down I get:
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  var cb = document.getElementById('yourElementId'); 
  cb.dispatchEvent(event);
  1. Presuming the click event is triggering something, you should be able to figure out what this is (the EventHandler) and call that directly. Chrome’s developer tools allow you to inspect the Event Handlers for a given DOM element so that might help you.

Let me know if that helps. If you want I can take a look at your sketch and see if I can figure something out (total p5js noob btw, but I know a bit of coding).