CODEWITHSUNDEEP
javascripthtmlcordovaionic-frameworkiframe
Alex Predescu
Alex Predescu

Reputation: 940

Using cordova-plugin-iosrtc getUserMedia inside iframe or workaround

I am looking for a way to display video inside an iframe using getUserMedia(). This works on Android and browser but does not work on iOS due to lack of WebRTC support in WKWebView.

However, there is this plugin which brings WebRTC support: https://github.com/cordova-rtc/cordova-plugin-iosrtc but doesn't seem to work inside an iframe, which is required in this case.

Note: I am using Ionic 4 Cordova.

Here are the main functions used in Ionic page:

init() {
    // this is for adding support for iOS WebRTC (works with ionic page, not with iframe)
    cordova.plugins.iosrtc.registerGlobals();

    // load adapter.js
    var adapterVersion = 'latest';
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://webrtc.github.io/adapter/adapter-" + adapterVersion + ".js";
    script.async = false;
    document.getElementsByTagName("head")[0].appendChild(script);
}

start() {
    // open camera and stream to video element
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then((stream) => {
      console.log('getUserMedia.stream', stream);
      console.log('getUserMedia.stream.getTracks', stream.getTracks());
      console.log("Im streaming!!", stream);
      var video = document.querySelector('video');
      console.log("video element", video);
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        console.log("stream start");
        video.play();
      };
    }).catch((err) => {
      console.log('getUserMedia.error', err, err.stack);
    });
}


<video id="video" autoplay="autoplay" width="500" height="500"></video>

What I want is to somehow move this video element and display camera preview inside an iframe, which does not work on iOS anymore. On browser it still works though:

<iframe *ngIf="show" id="myiframe" src="assets/iframe.html" seamless></iframe>

Note: same functions are used inside iframe.

What I've tried:

  1. using the parent.navigator.mediaDevices.getUserMedia inside the iframe, results in blank video, no error but nothing is shown
  2. creating the stream object in the ionic page and passing it to the iframe, results in blank video, no error but nothing is shown

Any workarounds are welcome. The only requirement is to show the video inside the iframe.

Upvotes: 0

Views: 1189

Answers (1)

Alex Predescu
Alex Predescu

Reputation: 940

Solved with this very obscure workaround and passing the frames to the iframe: https://github.com/cordova-rtc/cordova-plugin-iosrtc/issues/116

The frames were actually blank because of plugin limitation. Here is the posted example in the issue, works like magic:

var canvasEl;
function TestMediaRenderCatpure(videoEl) {
  canvasEl = document.createElement('canvas');
  var ctx = canvasEl.getContext("2d");
  canvasEl.width = "100";
  canvasEl.height = "100";
  canvasEl.style.position = 'absolute';
  canvasEl.style.left = 0;
  canvasEl.style.bottom = 0;
  appContainer.appendChild(canvasEl);
  var image = new Image();
  image.onload = function() {
    ctx.drawImage(image, 0, 0);
  };
  videoEl.render.save(function (data) {
    image.src = "data:image/jpg;base64," + data;
  });
}

Upvotes: 0

Related Questions