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

Posted 2023-02-18

【中文标题】在 Flask 应用程序中嵌入 WebRTC 时没有网络摄像头流

【英文标题】：No Webcam stream when embedding WebRTC in Flask app

【发布时间】：2016-05-29 08:02:55

【问题描述】：

环境

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

目标

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

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

<iframe src="https://appear.in/my_webrtc_session"   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 亮起。 但是我仍然没有视频流。

【参考方案1】：

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

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

【讨论】：

是的，就是这样！非常感谢伙计！我尝试了 100% 的宽度，但忘记更改高度！试过width=640px;height:480px，它奏效了。干杯