在 Flask 应用程序中嵌入 WebRTC 时没有网络摄像头流

Question

环境

• MacOSX埃尔卡皮坦
• 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.

安全来源

NOTE: Addresses partly my issue, I still don't get the video stream, BUT getUserMedia() issue was removed.

在 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，一切终于正常了。