Hello There I have a webrtc, react and node based application which is using my own configured coturn servers:
Image Showing my Coturn servers on webrtc Trickle Ice Connection
The workflow is react component is getting the Ice Servers and stream and sending it to server which then receives the streams and saves it here is the code for the admin which is send the streams (I am cutting much of the code):
async function init() {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
document.getElementById("video").srcObject = stream;
const peer = createPeer();
stream.getTracks().forEach(track => {peer.addTrack(track, stream)});
}
function createPeer() {
const peer = new RTCPeerConnection({
iceServers: [
// {
// urls: "stun:stun.l.google.com:19302",
// },
// {
// urls: "turn:a.relay.metered.ca:80?transport=udp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:80?transport=tcp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:443?transport=udp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:443?transport=tcp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "stun:turn.safetixstreaming.com",
// username: "admin",
// credential: "admin"
// },
{
urls: "turn:turn.safetixstreaming.com",
username: "admin",
credential: "admin"
}
]
});
peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer);
peer.oniceconnectionstatechange = (event) => {
console.log('ICE Connection State Change:', peer.iceConnectionState);
};
peer.onconnectionstatechange = (event) => {
console.log('Connection State Change:', peer.connectionState);
};
peer.onsignalingstatechange = (event) => {
console.log('Signaling State Change:', peer.signalingState);
};
return peer;
}
async function handleNegotiationNeededEvent(peer) {
const offer = await peer.createOffer();
await peer.setLocalDescription(offer);
const payload = {
sdp: peer.localDescription
};
const { data } = await axios.post(`https://safetixstreaming.com/broadcast/`, payload);
const desc = new RTCSessionDescription(data.sdp);
peer.setRemoteDescription(desc).catch(e => console.log(e));
}
return (
<h2
style={{
fontWeight: 'bold'
}}
>{title}</h2>
<video autoPlay muted playsInline id="video"
className='rounded'
style={{
display: videoElementDisplay,
width: "70%",
maxHeight: "auto"
}}
></video>
)
My Broadcaster side with its console
and here is the server side code which receives the request:
let senderStream;
app.post(`/broadcast/`, async ({ body }, res) => {
try {
const peer = new webrtc.RTCPeerConnection({
iceServers: [
// {
// urls: "stun:stun.l.google.com:19302"
// },
// {
// urls: "turn:a.relay.metered.ca:80",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:80?transport=tcp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:443",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:443?transport=tcp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "stun:turn.safetixstreaming.com:3478",
// username: "admin",
// credential: "admin"
// },
{
urls: "turn:turn.safetixstreaming.com:3478",
username: "admin",
credential: "admin"
}
]
});
peer.ontrack = (e) => handleTrackEvent(e, peer);
const desc = new webrtc.RTCSessionDescription(body.sdp);
await peer.setRemoteDescription(desc);
const answer = await peer.createAnswer();
await peer.setLocalDescription(answer);
const payload = {
sdp: peer.localDescription
}
res.json(payload);
} catch (err) {
console.log(err)
}
});
function handleTrackEvent(e, peer) {
senderStream = e.streams[0];
};
This is the code which requests to watch the stream:
async function init(id, name) {
setLoader("flex")
setRoomId(id)
setText(name)
roomID = id;
console.log(roomId)
const peer = createPeer();
peer.addTransceiver("video", { direction: "recvonly" })
}
function createPeer() {
const peer = new RTCPeerConnection({
iceServers: [
// {
// urls: "stun:stun.l.google.com:19302",
// },
// {
// urls: "turn:a.relay.metered.ca:80",
// username: "807973d909920f718ba0b567",
// credential: "VGyNVhO+WtsGoTih",
// },
// {
// urls: "turn:a.relay.metered.ca:80?transport=tcp",
// username: "807973d909920f718ba0b567",
// credential: "VGyNVhO+WtsGoTih",
// },
// {
// urls: "turn:a.relay.metered.ca:443",
// username: "807973d909920f718ba0b567",
// credential: "VGyNVhO+WtsGoTih",
// },
// {
// urls: "turn:a.relay.metered.ca:443?transport=tcp",
// username: "807973d909920f718ba0b567",
// credential: "VGyNVhO+WtsGoTih",
// },
// {
// urls: "stun:turn.safetixstreaming.com",
// username: "chris",
// credential: "Capricorn190RCapricorn13F"
// },
{
urls: "turn:turn.safetixstreaming.com",
username: "chris",
credential: "Capricorn190RCapricorn13F"
}
]
});
peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer);
peer.ontrack = handleTrackEvent;
peer.oniceconnectionstatechange = (event) => {
console.log('ICE Connection State Change:', peer.iceConnectionState);
};
peer.onconnectionstatechange = (event) => {
console.log('Connection State Change:', peer.connectionState);
};
peer.onsignalingstatechange = (event) => {
console.log('Signaling State Change:', peer.signalingState);
};
return peer;
}
async function handleNegotiationNeededEvent(peer) {
const offer = await peer.createOffer();
await peer.setLocalDescription(offer);
const payload = {
sdp: peer.localDescription
};
const { data } = await axios.post(`https://safetixstreaming.com/consumer/`, payload);
console.log("Data",data)
const desc = new RTCSessionDescription(data.sdp);
console.log("Desc", desc)
peer.setRemoteDescription(desc).catch(e => console.log(e));
}
async function handleTrackEvent(e) {
console.log("Stream ", e)
let remoteVideo = document.getElementById("video")
remoteVideo.srcObject = await e.streams[0];
setOtherElementDisplay("none");
setVideoElementDisplay("block")
};
return(
<h2
style={{
fontWeight: 'bold'
}}
>{text}</h2>
<video
style={{
display: videoElementDisplay,
width: "70%",
maxHeight: "auto"
}}
autoPlay
muted
// is='x-muted'
playsInline
controls
id='video'
></video>
)
And the server side code for this is:
app.post(`/consumer/`, async ({ body, params }, res) => {
try {
// let id = params.id
// console.log("Id", params.id)
const peer = new webrtc.RTCPeerConnection({
iceServers: [
// {
// urls: "stun:stun.l.google.com:19302",
// },
// {
// urls: "turn:a.relay.metered.ca:80",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:80?transport=tcp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:443",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "turn:a.relay.metered.ca:443?transport=tcp",
// username: "admin",
// credential: "admin",
// },
// {
// urls: "stun:turn.safetixstreaming.com:3478",
// username: "admin",
// credential: "admin"
// },
{
urls: "turn:turn.safetixstreaming.com:3478",
username: "admin",
credential: "admin"
}
]
});
const desc = new webrtc.RTCSessionDescription(body.sdp);
await peer.setRemoteDescription(desc);
// const matchingRoom = rooms.find((room) => room.roomId === id);
// if (matchingRoom) {
// console.log(matchingRoom)
// let stream = matchingRoom.senderStream;
// console.log("Selected Stream:", senderStream);
// stream.getTracks().forEach(track => peer.addTrack(track, stream));
// } else {
// console.log("No matching room found.");
// }
// const matchingRoom = rooms.find((room) => room.roomId === id);
// if (matchingRoom) {
// console.log(matchingRoom)
let stream = senderStream;
console.log("Selected Stream:", senderStream);
stream.getTracks().forEach(track => peer.addTrack(track, stream));
// } else {
// console.log("No matching room found.");
// }
const answer = await peer.createAnswer();
await peer.setLocalDescription(answer);
const payload = {
sdp: peer.localDescription
}
res.json(payload);
} catch (err) {
console.log(err)
}
});
Video Stream receiving side with the console
This is not my complete code and the credentials are not the real credentials. Can Anyone kindly help me? I have stuck in this for days
Thanks
There I have a webrtc, react and node based application which is using my own configured coturn servers The app works on localhost but it doesn't when I try to run it on a web aws/hostinger based