Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

webRTCがipadなら繋がるのにiphoneでは繋がらない時の対処法

More than 1 year has passed since last update.

JavaScriptでwebRTCのgetUserMediaのコードをコピペしてipadで正常に挙動するのにiphoneではアクセス許可しているのにも関わらず、画面が真っ黒になってgetUserMediaが渡っていない現象が出て暫く躓いたので対処法のメモ。

$(function() {
    navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
   getUserMedia: function(c) {
     return new Promise(function(y, n) {
       (navigator.mozGetUserMedia ||
        navigator.webkitGetUserMedia).call(navigator, c, y, n);
     });
    }
    } : null);
    if (!navigator.mediaDevices) {
      alert("getUserMedia() not supported.");
      return;
    } else {
        console.log("success")
    }

    var constraints = { audio: false, video: { 
                        facingMode: 'environment' 
                            }
                    };
    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
      video = document.getElementById('camera');
      video.srcObject = stream;
    }).catch(function(err) {
      console.log(err.name + ": " + err.message);
    });
   <video id="camera" autoplay playsinline="true"></video>

autoplayの後にplaysinline="true"を付け加えるだけでOK。
playsinline属性がないとiPhoneでは動かないらしい。

<参考サイト>
https://qiita.com/tomoyukilabs/items/cb9dd1d3e7eb0cc7f58a

ueyamamasashi
齢五十にしてまさに「天命を知る」 すなわち、今からプログラミング始めて「爆死」せよとの仰せ。 その過程を赤裸々に・・・。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away