Share your repls and programming experiences

← Back to all posts
how to make video chat
6323marshins

https://video-calling-website.6323marshins.repl.co/#52ec4d
this is the video chat
when you share a url you can talk to who you want to
https://repl.it/@6323marshins/video-calling-website

here is the code

html

<html> <head> <script src='https://cdn.scaledrone.com/scaledrone.min.js'></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> body { background: grey; display: flex; height: 100vh; margin: 0; align-items: center; justify-content: center; padding: 0 50px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } video { max-width: calc(50% - 100px); margin: 0 50px; box-sizing: border-box; border-radius: 2px; padding: 0; background: white; } .copy { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); font-size: 16px; color: white; } </style> </head> <body> <div class="copy">Send your URL to a friend to start a video call</div> <video id="localVideo" autoplay muted></video> <video id="remoteVideo" autoplay></video> <script src="script.js"></script> </body> </html>

javascript

// Generate random room name if needed
if (!location.hash) {
location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
const roomHash = location.hash.substring(1);

// TODO: Replace with your own channel ID
const drone = new ScaleDrone('y0N6q0oVsjY9fEiu');
// Room name needs to be prefixed with 'observable-'
const roomName = 'observable-' + roomHash;
const configuration = {
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
};
let room;
let pc;

function onSuccess() {};
function onError(error) {
console.error(error);
};

drone.on('open', error => {
if (error) {
return console.error(error);
}
room = drone.subscribe(roomName);
room.on('open', error => {
if (error) {
onError(error);
}
});
// We're connected to the room and received an array of 'members'
// connected to the room (including us). Signaling server is ready.
room.on('members', members => {
console.log('MEMBERS', members);
// If we are the second user to connect to the room we will be creating the offer
const isOfferer = members.length === 2;
startWebRTC(isOfferer);
});
});

// Send signaling data via Scaledrone
function sendMessage(message) {
drone.publish({
room: roomName,
message
});
}

function startWebRTC(isOfferer) {
pc = new RTCPeerConnection(configuration);

// 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
// message to the other peer through the signaling server
pc.onicecandidate = event => {
if (event.candidate) {
sendMessage({'candidate': event.candidate});
}
};

// If user is offerer let the 'negotiationneeded' event create the offer
if (isOfferer) {
pc.onnegotiationneeded = () => {
pc.createOffer().then(localDescCreated).catch(onError);
}
}

// When a remote stream arrives display it in the #remoteVideo element
pc.onaddstream = event => {
remoteVideo.srcObject = event.stream;
};

navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
}).then(stream => {
// Display your local video in #localVideo element
localVideo.srcObject = stream;
// Add your stream to be sent to the conneting peer
pc.addStream(stream);
}, onError);

// Listen to signaling data from Scaledrone
room.on('data', (message, client) => {
// Message was sent by us
if (client.id === drone.clientId) {
return;
}

});
}

function localDescCreated(desc) {
pc.setLocalDescription(
desc,
() => sendMessage({'sdp': pc.localDescription}),
onError
);
}

Voters
GrimReaper007
SpoonyTheGreat
NathanPp
Baconman321
HaydenCahoon
6323marshins
Comments
hotnewtop
SpoonyTheGreat

Do you mind if I use this for my own video conferencing app

Baconman321

Interesting....

Now, can you explain how this works?

That's kind of the point of a tutorial.

Also, code can be styled with markdown.

Learn more here.