WebRTCサンプルが Safari × Codepenで動かなかったこと

iOS11の実機で、WebRTCを使ってカメラアクセスができるか試してみました。
WebRTCはhttps環境のサーバ、あるいは例外的にlocalhostで動作するようになっているが、実機でみることからhttps環境のサーバにあげることになりました。

ただ、自前のサーバを整備していないので、
Codepen に記述してそれをブラウザで見たところ、
PCのChromeブラウザでは問題なく表示されたが、
実機及びPCのSafariブラウザでは表示されずDOM Exception的なアラートが出ました。

よく分からないので、実機にUSBつなげてコンソールで見てみると、
以下のようなメッセージが出ているみたい。。。

Trying to call getUserMedia from a document with a different security origin than its top-level frame

どうもiframe内ではgetUserMediaが動作しないらしいです。
そして、iframeを使ったエディタツールにCodepenと JSFiddle があるようです。

ひとまず JS Bin のOutputの外部表示でやってみてます。
(Outputだけだったり、htmlとかのタブも立ち上げててもiframeで処理されてるので)

ちなみに、WebRTCの記述は以下のように書いています(videoタグを使って、カメラからのストリーム情報を受け取るという想定で)。
前はnavigator.getUserMediaと書かれていたものが、記述的に非推奨になった模様。
そして、以降の処理をPromiseを使って成功・失敗時で振り分けているようです。

[ HTML ]

<video src="" id="video" autoplay playsinline></video>  

[ JavaScript ]

var medias = { audio: false, video: true },
    video = document.getElementById('video');  
    
// カメラ接続
var promise = navigator.mediaDevices.getUserMedia(medias);
promise.then(successCallback, errorCallback);
  
// カメラ接続成功時
function successCallback(stream){
  video.srcObject = stream;
}

// カメラ接続失敗時
function errorCallback(err){
  alert(err);
}

参考：
https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia
https://webrtchacks.com/safari-webrtc/