crabapples
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WebRTC noVNC stream code refactored

This commit is contained in:
Daniel Hervás Rodao 2021-06-28 15:01:06 +02:00
parent a7beef5fe2
commit a70331ea3c
3 changed files with 18 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
utils/stream/rtcstream.js
View File

@ -136,6 +136,7 @@ function addIceCandidate(candidate) {
localPeer.addIceCandidate(candidate);
}
console.log('[NOVNC] Candidate Added');
// Crear set
}
async function setAnswerDescription(answer){

80
utils/stream/ws_chat.js
View File

@ -1,80 +0,0 @@
'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 = '';
};

65
vnc.html
View File

@ -325,75 +325,48 @@
<!--<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>-->
<script src="utils/stream/rtcstream.js"></script>
<script src="utils/stream/ws_stream.js"></script>
<script>
'use strict';
const onCreateRoom = new Event('oncreateroom');
const localVideo = document.querySelector('#localVideo');
var stream_set = false;
let room_name;
let users = false;
let streamws;
function createRoom(){
room_name = Date.now()+Math.round(Math.random()*10000);
console.log('[NOVNC] room name: ', room_name);
// Throw event to create streamws
document.dispatchEvent(onCreateRoom);
}
var canvas = document.querySelector('#noVNC_container canvas');
// Buscar el canvas
// Search for canvas element
setInterval(function(){
if(canvas === null){
canvas = document.querySelector('#noVNC_container canvas');
//console.log('CANVAS: ', canvas);
}else{
if(!stream_set){
let stream = canvas.captureStream();
//localVideo.play();
localVideo.srcObject = stream;
stream_set = true;
}
}
},1000);
},2000);
// Creo la sala
room_name = Date.now()+Math.round(Math.random()*10000);
console.log('[NOVNC] room name: ', room_name);
// Creo WS de stream
const streamws = new WebSocket(
'ws://' +
'127.0.0.1:8000' +
'/ws/stream/' +
room_name +
'/'
);
console.log('[NOVNC] WebSocket streamws creado');
// HAndler ws
streamws.onmessage = function(e){
let message_data = JSON.parse(event.data);
console.log('[NOVNC] streamws: ', message_data);
if(message_data['type'] == 'checkusers'){
if(message_data['users']){
console.log('[NOVNC] usuarios correctos');
users = true;
startLocalStream();
}else{
console.log('[NOVNC] usuarios incorrectos');
users = false;
}
}else if(message_data['type'] == 'candidate'){
console.log('[NOVNC] Candidate received');
addIceCandidate(message_data['candidate']);
}else if(message_data['type'] == 'offer'){
console.log('[NOVNC] Offer received');
startRemoteStream(message_data['offer']);
}else if(message_data['type'] == 'answer'){
console.log('[NOVNC] Answer received');
setAnswerDescription(message_data['answer']);
}else if(message_data['type'] == 'denied'){
console.log('[NOVNC] Denied connection');
window.location.pathname = '/';
}
}
createRoom();
window.addEventListener('message', function(e){
console.log('[NOVNC] mensaje: ', e.data);
if(e.data === 'start'){
console.log('Empezar el stream');
// Envío la sala del stream al padre
// Send stream_room to parent
parent.postMessage(JSON.stringify({'stream':room_name}),'*');
// Comprobar usuarios
// Check users until both are connected
setInterval(function(){
if(!users){
checkUsers();
@ -401,10 +374,6 @@
},2000);
}
});
// window.onload = function(){
// parent.postMessage(canvas, '*');
// }
</script>
</body>
</html>