const express = require('express')
const app = express()
const server = require('http').createServer(app)
app.use('/', express.static('public'))
// START THE SERVER ==========================================================
const port = process.env.PORT || 3000
server.listen(port, () => {
console.log(`Express server listening on port ${port}`)
})
const express = require('express')
const app = express()
const server = require('http').createServer(app)
const io = require('socket.io')(server)
app.use('/', express.static('public'))
io.on('connection', (socket) => {
socket.on('join', (roomId) => {
const roomClients = io.sockets.adapter.rooms[roomId] || { length: 0 }
const numberOfClients = roomClients.length
// These events are emitted only to the sender socket.
if (numberOfClients == 0) {
console.log(`Creating room ${roomId} and emitting room_created socket event`)
socket.join(roomId)
socket.emit('room_created', roomId)
} else if (numberOfClients == 1) {
console.log(`Joining room ${roomId} and emitting room_joined socket event`)
socket.join(roomId)
socket.emit('room_joined', roomId)
} else {
console.log(`Can't join room ${roomId}, emitting full_room socket event`)
socket.emit('full_room', roomId)
}
})
// These events are emitted to all the sockets connected to the same room except the sender.
socket.on('start_call', (roomId) => {
console.log(`Broadcasting start_call event to peers in room ${roomId}`)
socket.broadcast.to(roomId).emit('start_call')
})
socket.on('webrtc_offer', (event) => {
console.log(`Broadcasting webrtc_offer event to peers in room ${event.roomId}`)
socket.broadcast.to(event.roomId).emit('webrtc_offer', event.sdp)
})
socket.on('webrtc_answer', (event) => {
console.log(`Broadcasting webrtc_answer event to peers in room ${event.roomId}`)
socket.broadcast.to(event.roomId).emit('webrtc_answer', event.sdp)
})
socket.on('webrtc_ice_candidate', (event) => {
console.log(`Broadcasting webrtc_ice_candidate event to peers in room ${event.roomId}`)
socket.broadcast.to(event.roomId).emit('webrtc_ice_candidate', event)
})
})
// START THE SERVER =================================================================
const port = process.env.PORT || 3000
server.listen(port, () => {
console.log(`Express server listening on port ${port}`)
})
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0” />
<title>WebRTC</title>
<style type=”text/css”>
body {
margin: 0;
font-size: 20px;
}
.centered {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-position {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
#video-chat-container {
width: 100%;
background-color: black;
}
#local-video {
position: absolute;
height: 30%;
width: 30%;
bottom: 0px;
left: 0px;
}
#remote-video {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id=”room-selection-container” class=”centered”>
<h1>WebRTC video conference</h1>
<label>Enter the number of the room you want to connect</label>
<input id=”room-input” type=”text” />
<button id=”connect-button”>CONNECT</button>
</div>
<div id=”video-chat-container” class=”video-position” style=”display: none”>
<video id=”local-video” autoplay=”autoplay”></video>
<video id=”remote-video” autoplay=”autoplay”></video>
</div>
<script src=”/socket.io/socket.io.js”></script>
<script type=”text/javascript” src=”client.js”></script>
</body>
</html>
// DOM elements.
const roomSelectionContainer = document.getElementById('room-selection-container')
const roomInput = document.getElementById('room-input')
const connectButton = document.getElementById('connect-button')
const videoChatContainer = document.getElementById('video-chat-container')
const localVideoComponent = document.getElementById('local-video')
const remoteVideoComponent = document.getElementById('remote-video')
// Variables.
const socket = io()
const mediaConstraints = {
audio: true,
video: { width: 1280, height: 720 },
}
let localStream
let remoteStream
let isRoomCreator
let rtcPeerConnection // Connection between the local device and the remote peer.
let roomId
// Free public STUN servers provided by Google.
const iceServers = {
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' },
{ urls: 'stun:stun1.l.google.com:19302' },
{ urls: 'stun:stun2.l.google.com:19302' },
{ urls: 'stun:stun3.l.google.com:19302' },
{ urls: 'stun:stun4.l.google.com:19302' },
],
}
// BUTTON LISTENER ============================================================
connectButton.addEventListener('click', () => {
joinRoom(roomInput.value)
})
// SOCKET EVENT CALLBACKS =====================================================
socket.on('room_created', async () => {
console.log('Socket event callback: room_created')
await setLocalStream(mediaConstraints)
isRoomCreator = true
})
socket.on('room_joined', async () => {
console.log('Socket event callback: room_joined')
await setLocalStream(mediaConstraints)
socket.emit('start_call', roomId)
})
socket.on('full_room', () => {
console.log('Socket event callback: full_room')
alert('The room is full, please try another one')
})
// FUNCTIONS ==================================================================
function joinRoom(room) {
if (room === '') {
alert('Please type a room ID')
} else {
roomId = room
socket.emit('join', room)
showVideoConference()
}
}
function showVideoConference() {
roomSelectionContainer.style = 'display: none'
videoChatContainer.style = 'display: block'
}
async function setLocalStream(mediaConstraints) {
let stream
try {
stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
} catch (error) {
console.error('Could not get user media', error)
}
localStream = stream
localVideoComponent.srcObject = stream
}
// SOCKET EVENT CALLBACKS =====================================================
socket.on('start_call', async () => {
console.log('Socket event callback: start_call')
if (isRoomCreator) {
rtcPeerConnection = new RTCPeerConnection(iceServers)
addLocalTracks(rtcPeerConnection)
rtcPeerConnection.ontrack = setRemoteStream
rtcPeerConnection.onicecandidate = sendIceCandidate
await createOffer(rtcPeerConnection)
}
})
socket.on('webrtc_offer', async (event) => {
console.log('Socket event callback: webrtc_offer')
if (!isRoomCreator) {
rtcPeerConnection = new RTCPeerConnection(iceServers)
addLocalTracks(rtcPeerConnection)
rtcPeerConnection.ontrack = setRemoteStream
rtcPeerConnection.onicecandidate = sendIceCandidate
rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(event))
await createAnswer(rtcPeerConnection)
}
})
socket.on('webrtc_answer', (event) => {
console.log('Socket event callback: webrtc_answer')
rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(event))
})
socket.on('webrtc_ice_candidate', (event) => {
console.log('Socket event callback: webrtc_ice_candidate')
// ICE candidate configuration.
var candidate = new RTCIceCandidate({
sdpMLineIndex: event.label,
candidate: event.candidate,
})
rtcPeerConnection.addIceCandidate(candidate)
})
// FUNCTIONS ==================================================================
function addLocalTracks(rtcPeerConnection) {
localStream.getTracks().forEach((track) => {
rtcPeerConnection.addTrack(track, localStream)
})
}
async function createOffer(rtcPeerConnection) {
let sessionDescription
try {
sessionDescription = await rtcPeerConnection.createOffer()
rtcPeerConnection.setLocalDescription(sessionDescription)
} catch (error) {
console.error(error)
}
socket.emit('webrtc_offer', {
type: 'webrtc_offer',
sdp: sessionDescription,
roomId,
})
}
async function createAnswer(rtcPeerConnection) {
let sessionDescription
try {
sessionDescription = await rtcPeerConnection.createAnswer()
rtcPeerConnection.setLocalDescription(sessionDescription)
} catch (error) {
console.error(error)
}
socket.emit('webrtc_answer', {
type: 'webrtc_answer',
sdp: sessionDescription,
roomId,
})
}
function setRemoteStream(event) {
remoteVideoComponent.srcObject = event.streams[0]
remoteStream = event.stream
}
function sendIceCandidate(event) {
if (event.candidate) {
socket.emit('webrtc_ice_candidate', {
roomId,
label: event.candidate.sdpMLineIndex,
candidate: event.candidate.candidate,
})
}
}
转自How to Implement a Video Conference with WebRTC and Node | Acid Tango
2814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
