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