createCapture() to get video is not working on iPhones (iOS11)

[kihapper]

Hello I've been experimenting with p5.js and it's amazing so far.

I have a mobile based project that uses createCapture() to get live video feed.
I've been testing it on the devices below but the iPhone seems to only show a black screen...

Works on...
Device : Xperia X Compact(2017) / OS : Android 7.1.1 / Browser : Chrome 62.0.3202
Device : iPad Pro 10.5(2017) / OS : iOS 11.1 / Browser : Safari 11.1

Doesn't work on...
Device : iPhone SE(2017) / OS : 11.2 / Browser : Safari 11.1 ---> Shows black screen
Device : iPhone SE(2017) / OS : 11.2 / Browser : Chrome 66---> Shows nothing
Device : iPhone6 / OS : 11 / Browser : Safari 11.1 ---> Shows black screen

It somehow works on iPad with iOS11 and doesn't work on iPhone with iOS11
My question is : Is there a way to work createCapture() on iOS 11 iPhone devices?

I took a look at @kylemcdonald post about this issue #2146
I know that now getUserMedia() is supported on iOS11, and I've seen some projects that runs realtime video streams on iPhones. So it should work... Would be great if I can get help to solve this issue since it could open up a lot of new areas for creative coders working with video.

You can test if it works on your iOS device here
The code tested is from the p5js examples :

function setup() {
  createCanvas(480, 120);
  var constraints = {
    video: {
      mandatory: {
        minWidth: 1280,
        minHeight: 720
      },
      optional: [{ maxFrameRate: 10 }]
    },
    audio: true
  };
  createCapture(constraints, function(stream) {
    console.log(stream);
  });
}

Thank you for reading, and my love to all the people working on p5.js !!

[kylemcdonald]

It looks like we need to add the playsinline attribute to the created element or it doesn't work:

capture.elt.setAttribute('playsinline', '');

Here is a complete example that works for me on iOS 11:

var capture;
var w = 640;
var h = 480;

function setup() {
    capture = createCapture({
        audio: false,
        video: {
            width: w,
            height: h
        }
    }, function() {
        console.log('capture ready.')
    });
    capture.elt.setAttribute('playsinline', '');
    capture.hide();
    capture.size(w, h);
    canvas = createCanvas(w, h);
}

function draw() {
    image(capture, 0, 0);
}

[kihapper]

Thanks Kyle, it works now for both iOS11 and Android!

[limzykenneth]

Sorry @kihapper I actually want to keep this open because we probably should include the fix put forward by @kylemcdonald into the library itself and keeping it open will prevent it from disappearing from view 😉 Don't worry, you don't need to do anything else for now.

[heaversm]

This is still causing issues for me on ipad 6th gen v 12.2in chrome and safari with the playsinline fix implemented. Works fine on Macbook:

video = createCapture(VIDEO);
            video.elt.setAttribute('playsinline', '');
            // Append it to the videoContainer DOM element
            video.hide();

[soundreactor]

i find hiding is delicate. moving it out of the way works great for me. just add this css to the camera video element and don't try to make it invisible:

  video {
      display: block !important;
      left:99.9vw;
      top:99.99vh;
      position:  fixed;
    }

[soundreactor]

i find hiding is delicate. moving it out of the way works great for me. just add this css to the camera video element and don't try to make it invisible:

  video {
      display: block !important;
      left:99.9vw;
      top:99.99vh;
      position:  fixed;
    }

[DavidWeiss2]

And it will resolve the problem?