Added webRTC media connection
This commit is contained in:
Daniel Hervás Rodao
parent
c0ba6d31d5
commit
9dad2c131b
|
|
@ -0,0 +1,187 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
let stream;
|
||||||
|
let localStream;
|
||||||
|
let localPeer;
|
||||||
|
let remotePeer;
|
||||||
|
|
||||||
|
const constraints = {
|
||||||
|
video: {
|
||||||
|
mediaSource: "screen", // whole screen sharing
|
||||||
|
//mediaSource: "window", // choose a window to share
|
||||||
|
//mediaSource: "application", // choose a window to share
|
||||||
|
width: {max: '1920'},
|
||||||
|
height: {max: '1080'},
|
||||||
|
frameRate: {max: '10'}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const offerOptions = {
|
||||||
|
OfferToReceiveAudio: 1,
|
||||||
|
OfferToReceiveVideo: 1
|
||||||
|
};
|
||||||
|
|
||||||
|
var configuration = {
|
||||||
|
"iceServers": [{ "urls": "stun:stun.1.google.com:19302" }]
|
||||||
|
};
|
||||||
|
|
||||||
|
let iceCandidates = [];
|
||||||
|
|
||||||
|
|
||||||
|
function checkUsers() {
|
||||||
|
streamws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
type: "check-users",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Empezar el streaming local:
|
||||||
|
// 1. Desactivar el botón de start, localVideo.play(),
|
||||||
|
// obtener el media stream, establecer localVideo.srcObject = stream y
|
||||||
|
// dar valor a la variable localStream con el stream que hemos obtenido.
|
||||||
|
// 2. Crear la instancia de la RTCPeerConnection
|
||||||
|
// 3. Crear el handler del evento icecandidate
|
||||||
|
// 4. Añadir los media tracks del localStream para que sean enviadas
|
||||||
|
// al remote peer
|
||||||
|
// 5. Crear la oferta de candidato en el extremo local
|
||||||
|
// 6. Crear la descripción local de localPeer
|
||||||
|
async function startLocalStream(){
|
||||||
|
console.log('[NOVNC] empezando stream local');
|
||||||
|
// Obtener el stream del usuario
|
||||||
|
if(!canvas){
|
||||||
|
console.log('[NOVNC] Error: no CANVAS');
|
||||||
|
return
|
||||||
|
}
|
||||||
|
stream = canvas.captureStream();
|
||||||
|
|
||||||
|
// Mostrar el video
|
||||||
|
localVideo.srcObject = stream;
|
||||||
|
|
||||||
|
// Establecer cual es el localStream
|
||||||
|
localStream = stream;
|
||||||
|
|
||||||
|
// Crear instancia de RTCPeerConnection
|
||||||
|
localPeer = new RTCPeerConnection(configuration);
|
||||||
|
|
||||||
|
// Send candidate to the remote peer
|
||||||
|
localPeer.addEventListener('icecandidate', event => onIceCandidate(localPeer, event));
|
||||||
|
|
||||||
|
// Añadir los media tracks que genera el localStream a
|
||||||
|
// las tracks de localPeer para enviarlas al remote peer
|
||||||
|
localStream.getTracks().forEach(track => localPeer.addTrack(track, localStream));
|
||||||
|
console.log('[NOVNC] Adding tracks');
|
||||||
|
|
||||||
|
// Crear oferta
|
||||||
|
localPeer.createOffer(offerOptions);
|
||||||
|
|
||||||
|
// Establecer la descripcion de localPeer
|
||||||
|
localPeer.addEventListener('negotiationneeded', addLocalDescription(localPeer));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cuando recibo un socket del tipo offer:
|
||||||
|
// 1. Creo la instancia de la conexión RTC del extemo remoto
|
||||||
|
// 2. Creo el hadler para el evento icecandidate
|
||||||
|
// 3. Handler para recibir los mediatracks
|
||||||
|
// 4. Notifico si el estado del remotePeer cambia
|
||||||
|
// 5. Establezco la descripcion remota del extremo remoto
|
||||||
|
// 6. Crear respuesta y establecer la descripcion local del extremo remoto
|
||||||
|
// 7. Enviar un websocket con la respuesta al otro peer
|
||||||
|
async function startRemoteStream(offer){
|
||||||
|
// Creo la instancia de la conexión remota
|
||||||
|
remotePeer = new RTCPeerConnection(configuration);
|
||||||
|
console.log('[NOVNC] RTC Remote Peer conection created');
|
||||||
|
|
||||||
|
// Handler para el evento icecandidate
|
||||||
|
// Send candidate to the remote peer
|
||||||
|
remotePeer.addEventListener('icecandidate', event => onIceCandidate(remotePeer, event));
|
||||||
|
|
||||||
|
// Recibir los media tracks del extremo local
|
||||||
|
remotePeer.ontrack = gotRemoteStream;
|
||||||
|
|
||||||
|
// Notificar si el estado remoto cambia
|
||||||
|
remotePeer.oniceconnectionstatechange = () => console.log('Remote ice state ' + remotePeer.iceConnectionState);
|
||||||
|
|
||||||
|
// Set remote description
|
||||||
|
try {
|
||||||
|
remotePeer.setRemoteDescription(offer);
|
||||||
|
console.log('[NOVNC] Remote description set');
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`[NOVNC] Set remote description error: ${error}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Create answer
|
||||||
|
const answer = await remotePeer.createAnswer();
|
||||||
|
// Set local description of remote peer
|
||||||
|
remotePeer.setLocalDescription(answer);
|
||||||
|
// Signal localStream peer with the answer
|
||||||
|
signalRemotePeer(JSON.stringify({
|
||||||
|
'type':'answer',
|
||||||
|
'answer':answer
|
||||||
|
}));
|
||||||
|
}catch(error){
|
||||||
|
console.log(`[NOVNC] Failed to create local session description ${error}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function addIceCandidate(candidate) {
|
||||||
|
//var candidate = new RTCIceCandidate(cand)
|
||||||
|
if (localPeer === undefined) {
|
||||||
|
remotePeer.addIceCandidate(candidate);
|
||||||
|
} else {
|
||||||
|
localPeer.addIceCandidate(candidate);
|
||||||
|
}
|
||||||
|
console.log('[NOVNC] Candidate Added');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setAnswerDescription(answer){
|
||||||
|
try {
|
||||||
|
localPeer.setRemoteDescription(answer);
|
||||||
|
console.log("[NOVNC] Local Peer remote description set");
|
||||||
|
}catch(error){
|
||||||
|
console.log(`[NOVNC] Failed setting local peer remote description ${error}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Añadir los candidatos a la lista de candidatos
|
||||||
|
function onIceCandidate(peer, event){
|
||||||
|
if(event.candidate != null && event.candidate != undefined){
|
||||||
|
console.log(`[NOVNC] onicecandidate event on ${peer}`);
|
||||||
|
// Send the candidate to the other peer via WebSockets
|
||||||
|
signalRemotePeer(JSON.stringify({
|
||||||
|
'type':'candidate',
|
||||||
|
'candidate':event.candidate
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addLocalDescription(peer) {
|
||||||
|
try {
|
||||||
|
const offer = await peer.createOffer(offerOptions);
|
||||||
|
peer.setLocalDescription(offer);
|
||||||
|
console.log(`[NOVNC] ${peer} local description set`);
|
||||||
|
signalRemotePeer(JSON.stringify({
|
||||||
|
'type':'offer',
|
||||||
|
'offer':offer
|
||||||
|
}));
|
||||||
|
} catch(err) {
|
||||||
|
console.log(`[NOVNC] ${peer} error setting local description`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function signalRemotePeer(data){
|
||||||
|
streamws.send(data);
|
||||||
|
console.log('[NOVNC] Signaling remote peer...');
|
||||||
|
}
|
||||||
|
|
||||||
|
function gotRemoteStream(e){
|
||||||
|
console.log('[NOVNC] Got remote video: ', e.streams[0]);
|
||||||
|
if (remoteVideo.srcObject !== e.streams[0]) {
|
||||||
|
//rightVideo.play();
|
||||||
|
remoteVideo.srcObject = e.streams[0];
|
||||||
|
console.log('[NOVNC] pc2 received remote stream');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Create websocket for communication
|
||||||
|
const websocket = new WebSocket(
|
||||||
|
'ws://' +
|
||||||
|
window.location.host +
|
||||||
|
'/ws/chat/' +
|
||||||
|
room_name +
|
||||||
|
'/'
|
||||||
|
);
|
||||||
|
console.log('Websocket created for room: ', room_name);
|
||||||
|
|
||||||
|
let token = new Date().getTime() + Math.random();
|
||||||
|
console.log('token: ',token);
|
||||||
|
|
||||||
|
websocket.onmessage = function(event){
|
||||||
|
let message_data = JSON.parse(event.data);
|
||||||
|
console.log('WebSocket received: ', message_data);
|
||||||
|
|
||||||
|
// If the content type from the websocket is chat_message,
|
||||||
|
// the text field is appended to the chat box
|
||||||
|
if(message_data['type'] == 'chat_message'){
|
||||||
|
if(Number(token) !== Number(message_data['token'])){
|
||||||
|
console.log('Escribir mensaje');
|
||||||
|
add_message('receive', message_data['message']);
|
||||||
|
}
|
||||||
|
}else if(message_data['type'] == 'candidate'){
|
||||||
|
console.log('Candidate received');
|
||||||
|
addIceCandidate(message_data['candidate']);
|
||||||
|
}else if(message_data['type'] == 'offer'){
|
||||||
|
console.log('Offer received');
|
||||||
|
startRemoteStream(message_data['offer']);
|
||||||
|
}else if(message_data['type'] == 'answer'){
|
||||||
|
console.log('Answer received');
|
||||||
|
setAnswerDescription(message_data['answer']);
|
||||||
|
}else if(message_data['type'] == 'denied'){
|
||||||
|
console.log('Denied connection');
|
||||||
|
window.location.pathname = '/';
|
||||||
|
}else if(message_data['type'] == 'checkusers'){
|
||||||
|
if(message_data['users']){
|
||||||
|
startLocalStream()
|
||||||
|
}else{
|
||||||
|
console.log('No peer connected')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function add_message(direction, message){
|
||||||
|
let chat_log = document.querySelector('#chat-log');
|
||||||
|
|
||||||
|
if(direction === 'send'){
|
||||||
|
chat_log.innerHTML += ('<p class="send"> [You] ' + message + '</p>');
|
||||||
|
}else if(direction === 'receive'){
|
||||||
|
chat_log.innerHTML += ('<p class="receive"> [Sender] ' + message + '</p>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Focus al input text
|
||||||
|
document.querySelector('#chat-message-input').focus();
|
||||||
|
|
||||||
|
// On Enter pressed, the WebSocket is sent
|
||||||
|
document.querySelector('#chat-message-input').onkeyup = function(e) {
|
||||||
|
if (e.keyCode === 13) { // enter, return
|
||||||
|
document.querySelector('#chat-message-submit').click();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Al hacer click en el botón de enviar el websocket se envía
|
||||||
|
document.querySelector('#chat-message-submit').onclick = function(e) {
|
||||||
|
const messageInputDom = document.querySelector('#chat-message-input');
|
||||||
|
const message = messageInputDom.value;
|
||||||
|
websocket.send(JSON.stringify({
|
||||||
|
'type':'chat_message',
|
||||||
|
'token':token,
|
||||||
|
'message': message,
|
||||||
|
}));
|
||||||
|
console.log('WebSocket sent!');
|
||||||
|
add_message('send', message);
|
||||||
|
messageInputDom.value = '';
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue