I'm trying to implement this video conferencing HTML5 application. I'm not sure exactly what is going on but I followed the instructions, maybe I missed something...
I copied the HTML file (index.html) with the socket IP changed to the correct one for my server:
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Demo</title>
</head>
<body>
<h1>WebRTC Demo using Socket.IO</h1>
<video id="webrtc-sourcevid" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
<button type="button" onclick="startVideo();">Start video</button>
<button type="button" onclick="stopVideo();">Stop video</button>
<video id="webrtc-remotevid" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
<button type="button" onclick="connect();">Connect</button>
<button type="button" onclick="hangUp();">Hang Up</button>
<p>Run a node.js server and adapt the address in the code.</p>
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
// create socket
var socket = io.connect('localhost:1337/');
var sourcevid = document.getElementById('webrtc-sourcevid');
var remotevid = document.getElementById('webrtc-remotevid');
var localStream = null;
var peerConn = null;
var started = false;
var channelReady = false;
var mediaConstraints = {'mandatory': {
'OfferToReceiveAudio':true,
'OfferToReceiveVideo':true }};
var isVideoMuted = false;
// get the local video up
function startVideo() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video: true, audio: true}, successCallback, errorCallback);
function successCallback(stream) {
localStream = stream;
if (sourcevid.mozSrcObject) {
sourcevid.mozSrcObject = stream;
sourcevid.play();
} else {
try {
sourcevid.src = window.URL.createObjectURL(stream);
sourcevid.play();
} catch(e) {
console.log("Error setting video src: ", e);
}
}
}
function errorCallback(error) {
console.error('An error occurred: [CODE ' + error.code + ']');
return;
}
}
// stop local video
function stopVideo() {
if (sourcevid.mozSrcObject) {
sourcevid.mozSrcObject.stop();
sourcevid.src = null;
} else {
sourcevid.src = "";
localStream.stop();
}
}
// send SDP via socket connection
function setLocalAndSendMessage(sessionDescription) {
peerConn.setLocalDescription(sessionDescription);
console.log("Sending: SDP");
console.log(sessionDescription);
socket.json.send(sessionDescription);
}
function createOfferFailed() {
console.log("Create Answer failed");
}
// start the connection upon user request
function connect() {
if (!started && localStream && channelReady) {
createPeerConnection();
started = true;
peerConn.createOffer(setLocalAndSendMessage, createOfferFailed, mediaConstraints);
} else {
alert("Local stream not running yet - try again.");
}
}
// stop the connection upon user request
function hangUp() {
console.log("Hang up.");
socket.json.send({type: "bye"});
stop();
}
function stop() {
peerConn.close();
peerConn = null;
started = false;
}
// socket: channel connected
socket.on('connect', onChannelOpened)
.on('message', onMessage);
function onChannelOpened(evt) {
console.log('Channel opened.');
channelReady = true;
}
function createAnswerFailed() {
console.log("Create Answer failed");
}
// socket: accept connection request
function onMessage(evt) {
if (evt.type === 'offer') {
console.log("Received offer...")
if (!started) {
createPeerConnection();
started = true;
}
console.log('Creating remote session description...' );
peerConn.setRemoteDescription(new RTCSessionDescription(evt));
console.log('Sending answer...');
peerConn.createAnswer(setLocalAndSendMessage, createAnswerFailed, mediaConstraints);
} else if (evt.type === 'answer' && started) {
console.log('Received answer...');
console.log('Setting remote session description...' );
peerConn.setRemoteDescription(new RTCSessionDescription(evt));
} else if (evt.type === 'candidate' && started) {
console.log('Received ICE candidate...');
var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
console.log(candidate);
peerConn.addIceCandidate(candidate);
} else if (evt.type === 'bye' && started) {
console.log("Received bye");
stop();
}
}
function createPeerConnection() {
console.log("Creating peer connection");
RTCPeerConnection = webkitRTCPeerConnection || mozRTCPeerConnection;
var pc_config = {"iceServers":[]};
try {
peerConn = new RTCPeerConnection(pc_config);
} catch (e) {
console.log("Failed to create PeerConnection, exception: " + e.message);
}
// send any ice candidates to the other peer
peerConn.onicecandidate = function (evt) {
if (event.candidate) {
console.log('Sending ICE candidate...');
console.log(evt.candidate);
socket.json.send({type: "candidate",
sdpMLineIndex: evt.candidate.sdpMLineIndex,
sdpMid: evt.candidate.sdpMid,
candidate: evt.candidate.candidate});
} else {
console.log("End of candidates.");
}
};
console.log('Adding local stream...');
peerConn.addStream(localStream);
peerConn.addEventListener("addstream", onRemoteStreamAdded, false);
peerConn.addEventListener("removestream", onRemoteStreamRemoved, false)
// when remote adds a stream, hand it on to the local video element
function onRemoteStreamAdded(event) {
console.log("Added remote stream");
remotevid.src = window.URL.createObjectURL(event.stream);
}
// when remote removes a stream, remove it from the local video element
function onRemoteStreamRemoved(event) {
console.log("Remove remote stream");
remotevid.src = "";
}
}
</script>
</body>
</html>
And the Javascript file (server.js) for the server (with same port number as above):
// create the http server and listen on port
var server = require('http').createServer();
var app = server.listen(1337, function() {
console.log((new Date()) + " Server is listening on port 1337");
});
// create the socket server on the port
var io = require('socket.io').listen(app);
// This callback function is called every time a socket
// tries to connect to the server
io.sockets.on('connection', function(socket) {
console.log((new Date()) + ' Connection established.');
// When a user send a SDP message
// broadcast to all users in the room
socket.on('message', function(message) {
console.log((new Date()) + ' Received Message, broadcasting: ' + message);
socket.broadcast.emit('message', message);
});
// When the user hangs up
// broadcast bye signal to all users in the room
socket.on('disconnect', function() {
// close user connection
console.log((new Date()) + " Peer disconnected.");
socket.broadcast.emit('user disconnected');
});
});
I have node.js installed. Next I installed express and socket.io:
npm install express
npm install socket.io
I then run this file with node to start the server.
node server.js
Accessing the index.html from the server gives me this error
Uncaught TypeError: Object #<Object> has no method 'connect'
This was being caused by the line var socket = io.connect('localhost:1337/'); in server.js
I have searched this error and have tried putting the socket.io file on the server and linking it as <script src="/socket.io/socket.io.js"></script>, doesn't change anything.
In index.html it has to be something like:
<script src="http://192.168.100.74:8080/socket.io/socket.io.js"></script>
And
var socket = io.connect('http://' + window.location.host + ':8080/');
My app.js:
var server = require('http').createServer();
var app = server.listen(8080);
var io = require('socket.io').listen(app);
io.sockets.on('connection', function(socket) {
socket.on('message', function(message) {
socket.broadcast.emit('message', message);
});
});
Project-
|-node_modules-
|socket.io
|app.js
|index.html
Hope this helps. I'm also new in this webRT and socket stuff.
Related
My requirement is to send audio chunks captured from microphone to the server using html5 web socket connection.
Establish a web socket connection with the server.When user is speaking capture small chunks of audio and send to the server. This should happen till the user stops speaking for 10 seconds, then close the web socket connection. Again open the web socket connection when user starts speaking.
I know how to open a connection and send the audio for the first time.
I have two buttons. onClick of one button(startRecording) i will open web socket connection and i am recording the audio.
onClick of second button(stopRecording) i am sending the audio to the server.
But my problem is how to do this with out buttons and it has to record the audio till user pause and send to the server.
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var recorder;
var audio = document.querySelector('audio');
var websocket ;
var text;
var onSuccess = function(s) {
var context = new AudioContext();
var mediaStreamSource = context.createMediaStreamSource(s);
recorder = new Recorder(mediaStreamSource);
recorder.record();
// audio loopback
// mediaStreamSource.connect(context.destination);
}
function startRecording() {
var wsURI = "url";
websocket = new WebSocket(wsURI);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) { onClose() };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
function onOpen(evt) {
var message = {
'action': 'start',
//'content-type': 'audio/l16;rate=22050'
'content-type': 'audio/wav;rate=22050'
};
websocket.send(JSON.stringify(message));
}
function onMessage(evt) {
console.log(evt.data);
//console.log(JSON.parse(evt.data))
}
}
function onClose() {
websocket.close();
}
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true}, onSuccess, onFail);
} else {
console.log('navigator.getUserMedia not present');
}
}
function stopRecording() {
recorder.stop();
recorder.exportWAV(function(s) {
//audio.src = window.URL.createObjectURL(s);
websocket.send(s);
//websocket.onclose();
});
}
I am working with a data feed that sends a JSON stream over a TCP socket and I'm using node.js/socket.io to emit the stream to a browser client.
Everything is working except I need each JSON object to emitted as a separate message from the socket.io server. In the client the messages are received like this:
//Message 1:
{"type":"TYPE_1","odds":[{"eventId":"foo","odds":[{"oddId":foo,"oddType":"LIVE","source":"foo"}]}]}
//Message 2:
{"type":"TYPE_2","odds":[{"eventId":"foo","odds":[{"oddId":foo,"oddType":"LIVE","source":"foo"}]}]}
{"type":"TYPE_3","odds":[{"eventId":"foo","odds":[{"oddId":foo,"oddType":"LIVE","source":"foo"}]}]}
//Message 3:
{"type":"TYPE_4","odds":[{"eventId":"foo","od
//Message 4:
ds":[{"oddId":foo,"oddType":"LIVE","source":"foo"}]}]}
The data feed docs state: "All messages sending to your application will form a JSON stream (no delimiter between messages), so you may need a decoder that support JSON stream."
So the stream is strictly correct but I need each object as separate message.
I have looked at https://www.npmjs.com/package/JSONStream and others but am very new to nodejs and socketio and am not sure how to implement them in to the server.
Have also read How can I parse the first JSON object on a stream in JS, nodejs JSON.parse(data_from_TCP_socket), http://www.sebastianseilund.com/json-socket-sending-json-over-tcp-in-node.js-using-sockets.
I think it's something to do with buffer chunk lengths and them being too big so the messages get split but that could be wrong! I'm guessing I need a delimiter check that balances brackets but not sure how to go about it or if the right approach.
My Server Script:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var net = require('net');
var port = 8992; // Datafeed port
var host = '127.0.0.1'; // Datafeed IP address
//Whenever someone connects this gets executed
io.on('connection', function(socket){
console.log('A user connected to me the server');
//Whenever someone disconnects this piece of code executed
socket.on('disconnect', function () {
console.log('A user disconnected');
});
});
//Create a TCP socket to read data from datafeed
var socket = net.createConnection(port, host);
socket.on('error', function(error) {
console.log("Error Connecting");
});
socket.on('connect', function(connect) {
console.log('connection established');
socket.write('{"type":"SUBSCRIBE"}');
});
socket.on('data', function(data) {
//console.log('DATA ' + socket.remoteAddress + ': ' + data);
var data = data.toString();
io.sockets.emit('event', JSON.stringify(data));
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
My Client:
<!DOCTYPE html>
<html>
<head><title>Hello world</title></head>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io.connect('http://localhost:3000');
</script>
<body>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<ul id="messages"></ul>
<script>
socket.on('event', function(data){
var t = JSON.parse(data.toString('utf8'));
$('#messages').prepend($('<li>').text(t));
console.log('Got event from Server:', t);
});
</script>
</body>
</html>
Any help or guidance would be amazing as really struggling with this.
A common delimiter to use is a newline character (\n). If you have that appended to your JSON messages it will be very easy to parse the messages. For example:
var sockBuf = '';
socket.setEncoding('utf8');
socket.on('data', function(data) {
sockBuf += data;
var i;
var l = 0;
while ((i = sockBuf.indexOf('\n', l)) !== -1) {
io.sockets.emit('event', sockBuf.slice(l, i));
l = i + 1;
}
if (l)
sockBuf = sockBuf.slice(l);
});
or a more efficient, but slightly less simple solution:
var sockBuf = '';
socket.setEncoding('utf8');
socket.on('data', function(data) {
var i = data.indexOf('\n');
if (i === -1) {
sockBuf += data;
return;
}
io.sockets.emit('event', sockBuf + data.slice(0, i));
var l = i + 1;
while ((i = data.indexOf('\n', l)) !== -1) {
io.sockets.emit('event', data.slice(l, i));
l = i + 1;
}
sockBuf = data.slice(l);
});
Gcm push notification message is sending properly to endpoints when browser is open :Notification messages which are in json file.
serviceWorker.js
'use strict';
self.addEventListener('install', function(event) {
self.skipWaiting();
console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
self.addEventListener('push', function(event) {
console.log('Started', self);
self.addEventListener('install', function(event) {
self.skipWaiting();
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
self.addEventListener('push', function(event) {
var url = "http://localhost/pntest/gmpush1.json?param="+Math.random();
event.waitUntil(
fetch(url).then(function(response) {
if (response.status !== 200) {
console.log('Problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.error('The API returned an error.', data.error);
throw new Error();
}
var promises = [];
for(var i=0; data.notification && i < data.notification.length; i++) {
promises.push(self.registration.showNotification(data.notification[i].title, {
body: data.notification[i].body,
'renotify': true,
icon: data.notification[i].icon
//tag: notification.tag
}));
}
return Promise.all( promises );
});
})
);
});
self.addEventListener('notificationclick', function(event) {
console.log('Notification click: tag ', event.notification.tag);
event.notification.close();
var newurl = event.notification.data.newurl;
console.log(newurl.updatedurl);
var url = newurl.updatedurl;
event.waitUntil(
clients.matchAll({
type: 'window'
})
.then(function(windowClients) {
console.log(url);
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
if (client.url === url && 'focus' in client) {
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow(url);
}
})
);
});
});
gcmpush1.json
{"notification": [{"body": "Test data", "url": "https://www.google.com/", "icon": "http://www.wired.com/wp-content/uploads/2015/09/google-logo-1200x630.jpg", "title": "Test Notification"}]}
When browser is open, It's showing original message
Test Notification
If client browser is in offline(not opened) while my curl trigger. When reopening the client browser i suppose to get original message but what i'm getting is
site has been updated in the background
In my curl call, I have used 'time_to_live' = 2419200.
Whenever notification failed to load data to show on chrome notification window and 'PUSH' event generate successfully. It will show "site has been updated in the background". (Nothing to do with notification delivery from Curl. it may be fine)
Couple of observations from you service worker code:
1). You are using localhost path to fetch data, will create problem to load notification data while localhost will be offline.
var url = "http://localhost/pntest/gmpush1.json?param="+Math.random();
2). You are using two 'PUSH' event code in your SW. can wrap work in one function.
self.addEventListener('push', function(event) {...
You can refer below URL for creating simple service worker to get dynamic data for push notification.
https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en
I have a web page that invokes long request on the server. The request generates an excel file and stream it back to the client when it is ready.
The request is invoked by creating form element using jQuery and invoking the submit method.
I would like during the request is being processed to display the user with progress of the task.
I thought to do it using jQuery ajax call to service I have on the server that returns status messages.
My problem is that when I am calling this service (using $.ajax) The callback is being called only when the request intiated by the form submit ended.
Any suggestions ?
The code:
<script>
function dummyFunction(){
var notificationContextId = "someid";
var url = $fdbUI.config.baseUrl() + "/Promis/GenerateExcel.aspx";
var $form = $('<form action="' + url + '" method="POST" target="_blank"></form>');
var $hidden = $("<input type='hidden' name='viewModel'/>");
$hidden.val(self.toJSON());
$hidden.appendTo($form);
var $contextId = new $("<input type='hidden' name='notifyContextId'/>").val(notificationContextId);
$contextId.appendTo($form);
$('body').append($form);
self.progressMessages([]);
$fdbUI.notificationHelper.getNotifications(notificationContextId, function (message) {
var messageText = '';
if (message.IsEnded) {
messageText = "Excel is ready to download";
} else if (message.IsError) {
messageText = "An error occured while preparing excel file. Please try again...";
} else {
messageText = message.NotifyData;
}
self.progressMessages.push(messageText);
});
$form.submit();
}
<script>
The code is using utility library that invokes the $.ajax. Its code is:
(function () {
if (!window.flowdbUI) {
throw ("missing reference to flowdb.ui.core.");
}
function NotificationHelper() {
var self = this;
this.intervalId = null;
this.getNotifications = function (contextId, fnCallback) {
if ($.isFunction(fnCallback) == false)
return;
self.intervalId = setInterval(function() {
self._startNotificationPolling(contextId, fnCallback);
}, 500);
};
this._startNotificationPolling = function (contextId, fnCallback) {
if (self._processing)
return;
self._processing = true;
self._notificationPolling(contextId, function (result) {
if (result.success) {
var message = result.retVal;
if (message == null)
return;
if (message.IsEnded || message.IsError) {
clearInterval(self.intervalId);
}
fnCallback(message);
} else {
clearInterval(self.intervalId);
fnCallback({NotifyData:null, IsEnded:false, IsError:true});
}
self._processing = false;
});
};
this._notificationPolling = function (contextId, fnCallback) {
$fdbUI.core.executeAjax("NotificationProvider", { id: contextId }, function(result) {
fnCallback(result);
});
};
return this;
}
window.flowdbUI.notificationHelper = new NotificationHelper();
})();
By default, ASP.NET will only allow a single concurrent request per session, to avoid race conditions. So the server is not responding to your status requests until after the long-polling request is complete.
One possible approach would be to make your form post return immediately, and when the status request shows completion, start up a new request to get the data that it knows is waiting for it on the server.
Or you could try changing the EnableSessionState settings to allow multiple concurrent requests, as described here.
I am currently trying to develop a small chat application using node.js. This is my first node project but I am getting an error and I'm not really sure how to solve it.
I have written a simple chat server in node which is below.
var port = 3000;
var net = require('net');
var clients = [];
var server = net.createServer(function (socket) {
clients.push(socket);
bindEventHandlers(socket);
});
setInterval(function(){
console.log(clients.length);
}, 2000);
server.listen(port);
console.log('Server is listening on localhost:' + port);
function bindEventHandlers(socket) {
socket.on('data', function(data){
broadcastDataToAllClient(data, socket);
});
socket.on('close', function(){
clients.splice(clients.indexOf(socket), 1);
});
socket.on('error', function(){
console.log('Known Error << "It\'s a feature!"');
})
}
function broadcastDataToAllClient(data, socket) {
for (var client in clients) {
if(clients[client] == socket){ continue; }
clients[client].write(data);
}
}
And a quick client interface
<!DOCTYPE HTML>
<html>
<head>
<title>Node.js Chat Server</title>
<script type="text/javascript">
function init(){
if (window.WebSocket) {
var input = document.getElementById('messageBox');
var webSocket = new WebSocket("ws://localhost:3000/");
input.onkeyup = function(e){
if(e.keyCode == 13) {
console.log('sending message');
webSocket.send('some data');
}
};
webSocket.onopen = function(e){
alert('Open');
}
webSocket.onmessage = function(e){
console.log('Message');
}
webSocket.onclose = function(e){
console.log('Close');
}
webSocket.onerror = function(e){
console.log('Error');
}
} else {
console.log('unable to support :(');
}
}
</script>
</head>
<body lang="en" onload="init();">
<h1>Node.js Chat Server</h1>
<h3>Welcome to this simple chat server!</h3>
<input id="messageBox" size="50" />
</body>
</html>
When I call the webSocket.send('some data') I receive this error Error: InvalidStateError: DOM Exception 11. In the chat-server code I have a loop which logs the number of current clients so I know that the browser is connected.
Not sure where to go from here and any help would be much appreciated.
Alex
When you do webSocket.send('some data') the socket connection must be established, or specifically socket.readyState == 1.
You can check the websocket events here. To make sure this never happens, you should send after connection open, by using Socket.onopen event handler. You can do it like this.
if(webSocket.readyState == 1){
webSocket.send('some data');
}
else{
webSocket.onopen = function(e){
webSocket.send('some data');
}
}