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

Question

Environment

• Mac OSX El Capitan
• Chrome Version 48.0.2564.97 (64-bit)

Goal

Trying to embed a WebRTC session in my Flask application.

Added the following in my HTML

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

Issue

When I open https://appear.in/my_webrtc_session in my browser, I am getting the video and audio as expected, but when embedding it in the my Flask app, NO video, BUT the Audio works!

If I create an HTML with the same code on my computer and open directly in the browser without serving it via Flask, then my session opens the webcam video stream correctly.

Any pointers?

__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)

No video stream when served via Flask

What I expected

getUserMedia() no longer works on insecure origins issue fixed BUT still NO VIDEO STREAM

Message in the Chrome console

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.

Secure origin

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

Created self signed certificates following these instruction

And changed my code as follow:

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

Cf.wsgi evenlet doc

This removed the getUserMedia() no longer works on insecure origins. issue and the camera LED on my Mac lights up. BUT I still don't have a video stream.

Answer 1

I think the size of iframe might be the problem.

I've tried your code with size 400x320 . No matter what I do I can not get the video to show up. I came to notice that there is this output in the console: {"minWidth":640},{"maxWidth":640},{"minHeight":480},{"maxHeight":480} . So I changed the iframe size to 640x640 and everything finally works.