javascript - broadcasting iphone frontal camera to HTML element not working iOS 11.2

Hi I'm trying to broadcast iphone camera to html canvas fro example. Recently, WebRTC seams working fine as I tested on ipad pro, but when I test my HTML along with the scrpit of my js file, it doesn't show the broacasting and showing only a black screan instead, is anyone facing this problem?

I created an https service on ubuntu 16.04 and using the browser on omy iphone to access the index.html page

Here is my code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Demo</title>

    <link rel="stylesheet" href="css/main.css">

</head>
<body>
  <h3>Selfie</h3>
  <div class="booth">
    <video id="video" width="640" height="360" autoplay></video>
  </div>
  <script src="js/video.js"></script>
 </body>

</html>

And here is the javascript

(function() {
    var video = document.getElementById('video');

    /* Setting up the constraint */
    var facingMode = "user"; // Can be 'user' or 'environment' to access back 
or front camera (NEAT!)
    var constraints = {
        audio: false,
        video: {
            facingMode: facingMode
        } 
    };

    /* Stream it to video element */
    navigator.mediaDevices.getUserMedia(constraints).then(function 
success(stream) {
        video.srcObject = stream;
    });
})();

However, there is a nice tutorial that also works on ipad but not on iphone, I'm using several browsers and didn't help, you can try this intro / to have an idea of what I mean,

I created an https service on ubuntu 16.04 and using the browser on omy iphone to access the index.html page

Here is my code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Demo</title>

    <link rel="stylesheet" href="css/main.css">

</head>
<body>
  <h3>Selfie</h3>
  <div class="booth">
    <video id="video" width="640" height="360" autoplay></video>
  </div>
  <script src="js/video.js"></script>
 </body>

</html>

And here is the javascript

(function() {
    var video = document.getElementById('video');

    /* Setting up the constraint */
    var facingMode = "user"; // Can be 'user' or 'environment' to access back 
or front camera (NEAT!)
    var constraints = {
        audio: false,
        video: {
            facingMode: facingMode
        } 
    };

    /* Stream it to video element */
    navigator.mediaDevices.getUserMedia(constraints).then(function 
success(stream) {
        video.srcObject = stream;
    });
})();

However, there is a nice tutorial that also works on ipad but not on iphone, I'm using several browsers and didn't help, you can try this intro https://www.html5rocks./en/tutorials/getusermedia/intro/ to have an idea of what I mean,

Share Improve this question asked Mar 12, 2018 at 17:17 Saif Alabachi 251 silver badge3 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

add playsinline to the video element as shown in this sample

Programmer puzzle solving

javascript - broadcasting iphone frontal camera to HTML element not working iOS 11.2 - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)