Question

我在iframe中显示模拟器的相机视频流时遇到一些问题。

目的： 我正在使用navigator.mediaDevices.getUserMedia（约束）从设备获取视频流，将其显示在网页上，并从流中拍摄照片。

问题： 当我在导航器上打开我的网页时，我可以看到相机视频流，拍照并在网页上看到照片。但是当我在iframe中的移动应用程序上打开我的网页时，视频流不会显示（我只会得到一个空格）。但即使我无法看到视频流，我仍然可以从流中拍摄照片并在我的网页上显示照片。但是在拍照之前我想先看一下。

工具： 我使用 ionic2 作为在iframe中显示网页的移动应用。我使用模拟器（Pixel_XL_API_26）从导航器（工作）和移动应用程序（不工作）打开网页。我使用html和javascript从我的网页上获取流。

移动应用中的iframe代码：

<div id="iframeContainer" #frame style="width:100%;height:100%;overflow:scroll !important;
-webkit-overflow-scrolling:touch !important;">
    <iframe src="https://mypage" scrolling="yes" style="width:100%;height:100%">
    </iframe>
</div>

网页的HTML代码：

<div class="row">
    <video width="150" height="150" id="video" controls autoplay></video>
</div>
<div class="row">
    <button onclick="getStream()">Display video</button>
</div>

网页的Javascript代码：

function getStream () {
    if (!navigator.getUserMedia && !navigator.webkitGetUserMedia 
    && !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
        alert('User Media API not supported.');
        return;
    }

    var constraints = {video: true, audio: false};
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        video = document.querySelector('video');

        if ('srcObject' in video) {
            video.srcObject = stream;
            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
        } 
        else if (navigator.mozGetUserMedia) {
            video.mozSrcObject = stream;
        }
    }).catch(function (err) {
        alert('Error: ' + err);
    });
}

我很困惑这个问题。由于网页在模拟器的导航器上完美运行，我想知道iframe是否会以某种方式阻塞流，但我无法弄清楚为什么或如何让它工作。

有没有人遇到过这个问题？有没有人知道任何解决方案或有任何提示？

感谢您的帮助！ :) （如果我的英语不完美，请道歉）

相机流（来自getUserMedia）显示在导航器中，但不显示在iframe中

0 个答案: