在Flask app中嵌入WebRTC时没有网络摄像头流

Question

环境

• Mac OSX El Capitan
• Chrome版本48.0.2564.97（64位）

目标

尝试在 Flask 应用程序中嵌入 WebRTC 会话。

在我的HTML中添加了以下内容

<iframe src="https://appear.in/my_webrtc_session" width="400" height="320" frameborder="1"></iframe>

问题

当我在浏览器中打开https://appear.in/my_webrtc_session时，我会按预期获得视频和音频，但是当它嵌入我的Flask应用程序时，没有视频，但音频有效！

如果我在计算机上使用相同的代码创建HTML并直接在浏览器中打开而不通过Flask提供，那么我的会话将正确打开网络摄像头视频流。

任何指针？

__init__.py

    sio = socketio.Server()
    app = Flask(__name__)

    @app.route('/')
    def index():
        """Serve the client-side application."""
        return render_template('index.html')

    if __name__ == "__main__"
       app = socketio.Middleware(_sio, _app)
       eventlet.wsgi.server(eventlet.listen(('', 7000)), app)

通过Flask

提供时没有视频流

我的期望

getUserMedia() no longer works on insecure origins问题已解决，但仍然没有视频流

Chrome控制台中的消息

This appears to be Chrome
libs.23ea13d0.js:2 ScreenShareAction: check-extension message: undefined
libs.23ea13d0.js:7 chrome: {"audio":{"optional":[{"sourceId":"default"}]},"video":{"optional":[{"sourceId":"default"},{"minWidth":640},{"maxWidth":640},{"minHeight":480},{"maxHeight":480},{"minMaxFrameRate":25},{"maxMaxFrameRate":25}]}}
libs.23ea13d0.js:8 getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
libs.23ea13d0.js:7 chrome: {"audio":{"optional":[{"sourceId":"default"}]}}
libs.23ea13d0.js:7 chrome: {"video":true}
libs.23ea13d0.js:2 Enabling getstats.io for mysession.
libs.23ea13d0.js:2 ChromeNotifierAction: check-extension message: undefined
libs.23ea13d0.js:2 ReferenceError: cxApi is not defined
    at Object.<anonymous> (libs.23ea13d0.js:22)
    at Object.invoke (libs.23ea13d0.js:1)
    at Object.$get (libs.23ea13d0.js:1)
    at Object.invoke (libs.23ea13d0.js:1)
    at libs.23ea13d0.js:1
    at d (libs.23ea13d0.js:1)
    at e (libs.23ea13d0.js:1)
    at Object.invoke (libs.23ea13d0.js:1)
    at Object.$get (libs.23ea13d0.js:1)
    at Object.invoke (libs.23ea13d0.js:1)
libs.23ea13d0.js:2 Chose version -3
libs.23ea13d0.js:2 Loaded flags: {"group":"testimonials","flags":{"testimonials":true}}
libs.23ea13d0.js:2 ChromeNotifierAction: device-credentials message: Object
libs.23ea13d0.js:7 chrome: {"audio":{"optional":[{"sourceId":"default"}]},"video":{"optional":[{"sourceId":"default"},{"minWidth":640},{"maxWidth":640},{"minHeight":480},{"maxHeight":480},{"minMaxFrameRate":25},{"maxMaxFrameRate":25}]}}
libs.23ea13d0.js:2 ChromeNotifierAction: device-credentials message: ObjectdeviceCredentials: Object__proto__: Object
libs.23ea13d0.js:7 chrome: {"audio":{"optional":[{"sourceId":"default"}]}}
libs.23ea13d0.js:7 chrome: {"video":true}
libs.23ea13d0.js:2 Enabling getstats.io for mysession.
qb57:15 'Performance.webkitClearResourceTimings' is deprecated. Please use 'Performance.clearResourceTimings' instead.

安全起源

  

注意：部分解决了我的问题，我仍然没有收到视频信息流，但getUserMedia()问题已被删除。

在these instruction

之后创建自签名证书

并将我的代码更改为：

    eventlet.wsgi.server(eventlet.wrap_ssl(eventlet.listen(('', 7000)),
                                       certfile='server.crt',
                                       keyfile='server.key',
                                       server_side=True), app)

比照。 wsgi evenlet doc

这消除了getUserMedia() no longer works on insecure origins.问题，我的Mac上的相机LED亮起。 但是我还没有视频流。

Answer 1

我认为iframe的大小可能是问题所在。

我已尝试使用大小为400x320的代码。无论我做什么，我都无法让视频显示出来。我注意到控制台中有这个输出：{"minWidth":640},{"maxWidth":640},{"minHeight":480},{"maxHeight":480}。所以我将iframe大小更改为640x640，一切都终于有效了。