Skip to content
Sign upLog in
← Back to Community

how to make video chat

Profile icon
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

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; }
Send your URL to a friend to start a video call

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;
}

if (message.sdp) { // This is called after receiving an offer or answer from another peer pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => { // When receiving an offer lets answer it if (pc.remoteDescription.type === 'offer') { pc.createAnswer().then(localDescCreated).catch(onError); } }, onError); } else if (message.candidate) { // Add the new ICE candidate to our connections remote description pc.addIceCandidate( new RTCIceCandidate(message.candidate), onSuccess, onError ); }

});
}

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

Voters
Profile icon
MayankSK44689
Profile icon
GrimReaper007
Profile icon
SpoonyTheGreat
Profile icon
NathanPp
Profile icon
Baconman321
Profile icon
HaydenCahoon
Profile icon
6323marshins
Comments
hotnewtop
Profile icon
MayankSK44689

Very Nice but the it is impossible to mute... there's some error in that part...

Profile icon
SpoonyTheGreat

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

Profile icon
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.