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

Hi I'm trying to broadcast iphone camera to html canvas fro example. Recently, WebRTC seams workin

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,

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 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 AlabachiSaif Alabachi 251 silver badge3 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 7

add playsinline to the video element as shown in this sample

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745645087a4637923.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信