Video in Dynamic Panel

#1

Hi,

I have some issues concerning one project I’m working on right now. I placed the dynamic panel (iPhone 6S) and than logged-in to axureshare area. I’ve added a plugin.

  • created a plugin which runs my camera (smartphone)
  • Location - dynamic panel named “K”

Here’s the script I used

It works in Safari browser. It works on Android smartphone. It won’t work on iPhone (Safari). Why is that? What do I do wrong?

Every time Safari (iPhone) keeps asking me for permission (camera). I do that. I allow camera to work. Nothing happens.

Any idea?

EDIT: for some reason JS is invisible here. How can I paste it here?

Camera with your own UI
#3

Are you trying to paste your code with script tags? Try removing those, they’re probably getting the whole thing filtered out. Try pasting just your code then select it all and use the preformatted text option on it so we can read it properly (button that looks like </>).

If it’s a problem with your JS in a specific browser/device I’d look into debugging on that platform to check for errors. On the iPhone with Safari I believe you can pair with a Mac to view the Safari dev tools on your computer while you use the phone.

#4

Ok. What about now?

<video autoplay></video>
<script>
  const constraints = {
    video: { facingMode: { exact: "environment" } } 
  };
  const video = document.querySelector('video');
  function handleSuccess(stream) {
    video.srcObject = stream;
  }
  function handleError(error) {
    console.error('Reeeejected!', error);
  }
  navigator.mediaDevices.getUserMedia(constraints).
  then(handleSuccess).catch(handleError);
</script>

I’m unable to plugin my iPhone to my Mac. I mean… I could but have no idea how to inspect anything or search for the problem. I tried to play around with settings (Safari) in Settings (iPhone)

#5

I’m not familiar enough with the JS APIs you’re using to debug your code, but if it works on some devices and not others, then there’s some device-specific problem you’ll need to solve that might not have anything to with Axure, but instead with that device/browser. Here’s a (dated) tutorial I just Googled:

I’m guessing it’s nearly the same but you might try searching for a more up to date guide.

The first thing I’d check is for errors in the browser console.

#6

Not very helpful - for me at least. I was wondering, maybe someone with JS experience could give it a try and help, share some tips to remove some part or parts of the code I’ve pasted above.

#7

I found the part of a solution.

I replaced this piece of code
<video autoplay></video>

with
<video autoplay class="a" playsinline></video>

Video shows up on the iPhone, however when I click “CLOSE” icon (Axure) in the corner… video disappears :frowning:

#8

Axure Team? You won’t live long with support like this guys…

#9

Can you share an example of the problem? This sounds like a very device/browser specific problem and it’s hard to offer any advice without being able to see the problem. It could be anything.

#10

OK. Once again.

  1. I’ve created a dynamic panel and named it “kamerka”.
  2. Later I published my mockup to axshare and this is the link
  3. Added the plugin (axshare) named “kamerka”, selected “inside of the dynamic panel” and put the code
  4. Camera works on the MacBook (Safari)
  5. I’m sharing the link (share icon) with my iPhone
  6. Message popsup (iPhone)… opening the link, allowing the camera… it works (wait for it…)
  7. Click share button on the iPhone, choose “Add to Home Screen” - confirm
  8. Not working anymore…

This problem is only with iPhones. Maybe there is a override? I don’t know. Please help.

The code:

<video autoplay class="a" playsinline></video>
    <script>
      const constraints = {
        video: { facingMode: { exact: "environment" } } 
      };
      const video = document.querySelector('video');
      function handleSuccess(stream) {
        video.srcObject = stream;
      }
      function handleError(error) {
        console.error('Reeeejected!', error);
      }
      navigator.mediaDevices.getUserMedia(constraints).
      then(handleSuccess).catch(handleError);
</script>
#11

Since this seems like a JavaScript problem and not an Axure problem (as far as I can tell) you might have better luck getting an answer on Stack Overflow.

Seems like something about your code isn’t playing nice with iOS or Safari specifically.

unlisted #12