Flask testing environment ssl solution with “adhoc”

Why?

When I started developing video calling application at one point I faced this situation. In single pc(on localhost 127.0.0.1) everything works very well but when I need to test another pc on the same network for example(wifi) . Before on public production environment I wanted to test my own private network which was established with a WiFi router. I host on the my local ip which was assigned by the router) . The issue was in this situation by default the browser will block the microphone and camera and other essential permission without ssl.

The solution

ssl_context=’adhoc’ in this settings flask automatically generates a temporary, self-signed SSL certificate. And this will enable https connection. (remember its only for testing and not for production environment)

An example code

from flask import Flask

app = Flask(__name__)

# HTML with embedded JavaScript for accessing camera and microphone
html_content = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video and Audio Streaming</title>
</head>
<body>
    <h1>Video and Audio Streaming</h1>
    <div>
        <h2>Video Stream</h2>
        <video id="video" width="640" height="480" autoplay></video>
    </div>
    <div>
        <h2>Audio Stream</h2>
        <audio id="audio" controls autoplay></audio>
    </div>
    <script>
        // Accessing video and audio streams from the browser
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(function (stream) {
                var video = document.getElementById('video');
                var audio = document.getElementById('audio');

                // Set the video source to the stream
                video.srcObject = stream;

                // Set the audio source to the stream
                audio.srcObject = stream;
            })
            .catch(function (error) {
                console.error('Error accessing media devices:', error);
            });
    </script>
</body>
</html>
"""

# Route to serve the HTML content
@app.route('/')
def index():
    return html_content

if __name__ == "__main__":
    app.run(host='0.0.0.0',debug=True, ssl_context='adhoc')

Though This solved the https issue temporarily