I want to make live ip video calls between a python pyqt5 user and a browser (html5).
The javascript code i use for client is:
var port = 8080
var ip_address = "192.168.1.10"
var main_pc = {
"name":"",
"surname":"",
"pc":null,
"dc":null,
"uid":null,
"local_audio":null,
"local_video":null,
"remote_audio":null,
"remote_video":null
};
var peer_connections = [];
var closing = false
var controller = null;
var signal;
var stop_time_out = null;
function start(name,surname) {
$("#control_call_button").addClass("d-none");
$("#stop_call_button").removeClass("d-none");
$("#signal-audio").trigger("play");
main_pc = createPeerConnection(main_pc);
main_pc["name"] = name;
main_pc["surname"] = surname;
main_pc["dc"] = main_pc["pc"].createDataChannel('chat', {"ordered": true});
main_pc["dc"].onmessage = function(evt) {
data = JSON.parse(evt.data);
if(data["type"] == "closing"){
if (main_pc["uid"] == "uid"){
stop_peer_connection();
}else{
//stop_client_peer_connection(data["uid"]);
}
}
if (data["type"] == "uid"){
uid = data["uid"];
main_pc["uid"] = uid;
console.log(main_pc);
}
if (data["type"] == "new-client"){
var uid = data["uid"];
var client_name = data["name"];
var client_surname = data["surname"];
console.log("New client:");
console.log(uid);
console.log(client_name);
console.log(client_surname);
//start_client(uid,client_name,client_surname);
}
};
main_pc["pc"].onconnectionstatechange = (event) => {
let newCS = main_pc["pc"].connectionState;
if (newCS == "disconnected" || newCS == "failed" || newCS == "closed") {
stop_time_out = setTimeout(stop_with_time_out, 7000);
}else{
if (stop_time_out != null){
clearTimeout(stop_time_out);
stop_time_out = null;
}
}
}
main_pc["pc"].onclose = function() {
closing = true;
stop_peer_connection();
// close data channel
if (main_pc["dc"]) {
main_pc["dc"].close();
}
// close local audio / video
main_pc["pc"].getSenders().forEach(function(sender) {
sender.track.stop();
});
// close transceivers
if (main_pc["pc"].getTransceivers) {
main_pc["pc"].getTransceivers().forEach(function(transceiver) {
if (transceiver.stop) {
transceiver.stop();
}
});
}
main_pc["pc"] = null;
$("#control_call_button").removeClass("d-none");
$("#stop_call_button").addClass("d-none");
};
constraints = {audio:true,video:true};
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
stream.getTracks().forEach(function(track) {
try {
main_pc["pc"].addTrack(track, stream);
if (track.kind == "video"){
//correct
main_pc["local_video"] = stream;
document.getElementById('client-video-1').srcObject = stream;
}else{
main_pc["local_audio"] = stream;
}
} catch(e){
}
});
return negotiate();
}, function(err) {
alert('Could not acquire media: ' + err);
});
}
function createPeerConnection(pc) {
var config = {
sdpSemantics: 'unified-plan'
};
config.iceServers = [{ urls: ['stun:stun.l.google.com:19302'] }];
pc["pc"] = new RTCPeerConnection(config);
// connect audio
pc["pc"].addEventListener('track', function(evt) {
if (evt.track.kind == 'audio'){
$("#signal-audio").trigger("pause");
$("#signal-audio").currentTime = 0; // Reset time
document.getElementById('server-audio').srcObject = evt.streams[0];
$("#control_call_button").addClass("d-none")
$("#stop_call_button").removeClass("d-none")
pc["remote_audio"] = evt.streams[0];
}else if (evt.track.kind == 'video'){
document.getElementById('server-video').srcObject = evt.streams[0];
pc["remote_video"] = evt.streams[0];
}
});
return pc;
}
function negotiate() {
return main_pc["pc"].createOffer({"offerToReceiveAudio":true,"offerToReceiveVideo":true}).then(function(offer) {
return main_pc["pc"].setLocalDescription(offer);
}).then(function() {
// wait for ICE gathering to complete
return new Promise(function(resolve) {
if (main_pc["pc"].iceGatheringState === 'complete') {
resolve();
} else {
function checkState() {
if (main_pc["pc"].iceGatheringState === 'complete') {
main_pc["pc"].removeEventListener('icegatheringstatechange', checkState);
resolve();
}
}
main_pc["pc"].addEventListener('icegatheringstatechange', checkState);
}
});
}).then(function() {
var offer = main_pc["pc"].localDescription;
controller = new AbortController();
signal = controller.signal;
try{
promise = timeoutPromise(60000, fetch('http://'+ip_address+':'+port+'/offer', {
body: JSON.stringify({
sdp: offer.sdp,
type: offer.type,
"name":name,
"surname":surname
}),
headers: {
'Content-Type': 'application/json'
},
method: 'POST',
signal
}));
return promise;
}catch (error){
console.log(error);
stop_peer_connection();
}
}).then(function(response) {
if (response.ok){
return response.json();
}else{
stop_peer_connection();
}
}).then(function(answer) {
console.log(answer);
if (answer.sdp == "" && answer.type == ""){
stop_peer_connection();
return null;
}else{
return main_pc["pc"].setRemoteDescription(answer);
}
}).catch(function(e) {
console.log(e);
stop_peer_connection();
return null;
});
}
function timeoutPromise(ms, promise) {
return new Promise((resolve, reject) => {
const timeoutId = setTimeout(() => {
reject(new Error("promise timeout"))
}, ms);
promise.then(
(res) => {
clearTimeout(timeoutId);
resolve(res);
},
(err) => {
clearTimeout(timeoutId);
reject(err);
}
);
})
}
function stop_peer_connection(dc_message=true) {
$("#signal-audio").trigger("pause");
$("#signal-audio").currentTime = 0; // Reset time
// send disconnect message because iceconnectionstate slow to go in failed or in closed state
try{
if (main_pc["dc"].readyState == "open"){
if (dc_message){
main_pc["dc"].send(JSON.stringify({"type":"disconnected"}));
}
}
}catch (e){
}
try{
if (main_pc["local_audio"] != null){
main_pc["local_audio"].getTracks().forEach(track => track.stop())
main_pc["local_video"].getTracks().forEach(track => track.stop())
main_pc["remote_audio"].getTracks().forEach(track => track.stop())
main_pc["remote_video"].getTracks().forEach(track => track.stop())
main_pc["local_audio"].stop();
main_pc["local_video"].stop();
main_pc["local_audio"] = null;
main_pc["local_video"] = null;
//main_pc["remote_audio"].stop();
//main_pc["remote_video"].stop();
//main_pc["remote_audio"] = null;
//main_pc["remote_video"] = null;
}
}
catch (e){
}
document.getElementById('client-video-1').srcObject = null;
document.getElementById('server-video').srcObject = null;
document.getElementById('server-audio').srcObject = null;
document.getElementById('client-audio-2').srcObject = null;
document.getElementById('client-video-2').srcObject = null;
document.getElementById('client-audio-3').srcObject = null;
document.getElementById('client-video-3').srcObject = null;
try{
if (controller != null){
controller.abort();
}
if (main_pc["dc"].readyState != "open"){
main_pc["pc"].close();
}
}catch (e){
}
$("#control_call_button").removeClass("d-none")
$("#stop_call_button").addClass("d-none")
}
function stop_with_time_out(){
stop_peer_connection(false);
stop_time_out = null;
}
$(document).ready(function(){
$("#control_call_button").on( "click", function() {
name = $("#name").val();
surname = $("#surname").val();
$("#me-name").html(name+" "+surname)
closing = false;
controller = null;
start(name,surname);
});
$("#stop_call_button").on( "click", function() {
closing = true;
stop_peer_connection();
});
})
As you can see in the first two lines i declare the ip address of the server peer and the port the service will use.
But this ip is a local ip address.
I want when the python user opens the pyqt5 app then with requests module to populate the site with the new public address.
Then if it’s possible i want the html5 user to connect with the python user without need of port forwarding (it’s hard every time the user install the app the change the router settings). I suppose this will be done with ngrok python api.
Am i right?
Is there something i am missing?
Is there any alternative solution (tunelling) without cost and without need of port forwarding?