在 iframe 或解决方法中使用 cordova-plugin-iosrtc getUserMedia

Question

我正在寻找一种使用 getUserMedia() 在 iframe 中显示视频的方法。这适用于 Android 和浏览器，但不适用于 iOS，因为 WKWebView 中缺少 WebRTC 支持。

然而，有这个插件带来了 WebRTC 支持：https://github.com/cordova-rtc/cordova-plugin-iosrtc 但在 iframe 中似乎不起作用，在这种情况下这是必需的。

注意：我使用的是 Ionic 4 Cordova。

以下是 Ionic 页面中使用的主要功能：

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>

我想要的是以某种方式移动此视频元素并在 iframe 中显示相机预览，这不再适用于 iOS。在浏览器上它仍然有效：

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

注意：iframe 中使用了相同的函数。

我尝试过的：

在 iframe 中使用 parent.navigator.mediaDevices.getUserMedia，结果是空白视频，没有错误，但没有显示任何内容
在 ionic 页面中创建流对象并将其传递给 iframe，结果是空白视频，没有错误，但没有显示任何内容

欢迎任何解决方法。唯一的要求是在 iframe 中显示视频。

Answer 1

解决了这个非常晦涩的解决方法并将框架传递给 iframe：https://github.com/cordova-rtc/cordova-plugin-iosrtc/issues/116

由于插件限制，框架实际上是空白的。这是问题中发布的示例，就像魔术一样：

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;
  });
}

在 iframe 或解决方法中使用 cordova-plugin-iosrtc getUserMedia

Using cordova-plugin-iosrtc getUserMedia inside iframe or workaround

html

javascript

iframe

cordova

ionic-framework