使用cordova-plugin-iosrtc getUserMedia在iframe内或解决方法
使用cordova-plugin-iosrtc getUserMedia在iframe内或解决方法
提问于 2020-08-29 08:33:40
我正在寻找一种方式显示视频在一个iframe使用getUserMedia()。这在Android和浏览器上都能工作，但由于缺乏iOS对WebRTC的支持而不能在WKWebView上工作。
然而，有一个插件带来了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，结果是空白视频，没有错误，但没有显示任何显示， - 在离子页中创建流对象并将其传递给iframe，结果是空白视频，没有错误，但没有显示
。
任何解决办法都是受欢迎的。唯一的要求是在iframe内显示视频。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-30 10:37:40
解决了这个非常晦涩的解决方案，并将框架传递给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;
});
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63644993
复制相关文章
相似问题
腾讯云开发者
