在Flask应用程序中嵌入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 ^{pr2}$

通过烧瓶

我所期望的

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电脑上的摄像头指示灯亮起。但是我仍然没有视频流。在

Answer 1

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

我试过你的代码大小为400x320。不管我做什么，我都不能让视频出现。我注意到控制台中有这样的输出：{"minWidth":640},{"maxWidth":640},{"minHeight":480},{"maxHeight":480}。所以我把iframe的大小改为640x640，一切终于正常了。在