How to send video stream to node.js server - javascript

My goal: send some video stream from one client to another throught node.js server. But I can`t even send video from first cleint to server.
Cleint
var socket = io(":9966");
socket.on('message', function (data) {
console.log(data)
})
function onVideoFail(e) {
console.log('webcam fail!', e);
};
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
navigator.getUserMedia({video: true}, function(stream) {
console.log(stream);
video.src = window.URL.createObjectURL(stream);
var arrayOfStreams = [stream];
var medias = new MediaStreamRecorder(stream);
medias.ondataavailable = function(blob) {
socket.emit("streaming", blob);
};
medias.start();
socket.emit("streaming", stream);
socket.emit('test', 'mess from 1');
}, onVideoFail);
Server
io.on('connection', function (socket) {
log.info('new con!', socket.id);
socket.send("you connected to server");
socket.on('test', function (data) {
console.log(data);
socket.broadcast.send(data);
});
socket.on('streaming', function (stream) {
log.info("i`m in stream", socket.id);
log.info(stream);
socket.broadcast.emit('streaming', stream);
});
});
I can send text and everything great, but when I send stream to server I get empty value.
What I see on server side
I looked for some tips and found, but still not working. Maybe I missed something.
Can anyone help me?
PS I getting video from video tag

convert your media to base64, this way the server reads it as a string of texts and returns it back

Question is closed. As I red its hard to make live stream. If somebody reading this, check this link https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder . What you must understand: record little part of video and send it to server. Hope it`s will help.

Related

WebRTC NodeJS to js

I have a problem I have these files in js that I need to create a webrtc. The problem is that hosting doesn't support nodejs. i was wondering if it was possible to change them in js to make it work. Can I copy the request files that I do to require ("node-static") and put them in the hosting?
Help me I don't know how to proceed. Thanks so much
server.js
var static = require('node-static');
var https = require('https');
var util = require('util');
var file = new(static.Server)();
var app = https.createServer(function (req, res) {
file.serve(req, res);
}).listen(443);
var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket){
// convenience function to log server messages on the client
function log(){
var array = [">>> Message from server: "];
for (var i = 0; i < arguments.length; i++) {
array.push(arguments[i]);
}
socket.emit('log', array);
}
// when receive sdp, broadcast sdp to other user
socket.on('sdp', function(data){
console.log('Received SDP from ' + socket.id);
socket.to(data.room).emit('sdp received', data.sdp);
});
// when receive ice candidate, broadcast sdp to other user
socket.on('ice candidate', function(data){
console.log('Received ICE candidate from ' + socket.id + ' ' + data.candidate);
socket.to(data.room).emit('ice candidate received', data.candidate);
});
socket.on('message', function (message) {
log('Got message:', message);
// for a real app, would be room only (not broadcast)
socket.broadcast.emit('message', message);
});
socket.on('create or join', function (room) {
// join room
var existingRoom = io.sockets.adapter.rooms[room];
var clients = [];
if(existingRoom){
clients = Object.keys(existingRoom);
}
if(clients.length == 0){
socket.join(room);
io.to(room).emit('empty', room);
}
else if(clients.length == 1){
socket.join(room);
socket.to(room).emit('joined', room, clients.length + 1);
}
// only allow 2 users max per room
else{
socket.emit('full', room);
}
});
socket.on('error', function(error){
console.error(error);
})
});
main.js
"use strict"
//my signalling server
var serverIP = "https://www.website.com/";
// RTCPeerConnection Options
var server = {
// Uses Google's STUN server
iceServers: [{
"urls" :
navigator.mozGetUserMedia ? "stun:stun.services.mozilla.com" :
navigator.webkitGetUserMedia ? "stun:stun.l.google.com:19302" :
"stun:23.21.150.121"
}
]
};
var localPeerConnection, signallingServer;
var localStream, localIsCaller;
function disconnect() {
var localVideo = document.getElementById('from-video');
var remoteVideo = document.getElementById('to-video');
// stop video stream
if (localStream != null) {
let tracks = localStream.getTracks();
tracks.forEach(function(track) {
track.stop();
});
}
// kill all connections
if (localPeerConnection != null) {
localPeerConnection.getSenders().forEach(function(sender){
localStream.getTracks().forEach(function(track){
if(track == sender.track){
localPeerConnection.removeTrack(sender);
}
})
});
localPeerConnection.close();
signallingServer.close();
localVideo.src = "";
remoteVideo.src = "";
}
}
// WEBRTC STUFF STARTS HERE
// Set objects as most are currently prefixed
window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||
window.webkitRTCPeerConnection || window.msRTCPeerConnection;
window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
window.webkitRTCSessionDescription || window.msRTCSessionDescription;
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia;
window.SignallingServer = window.SignallingServer;
var sdpConstraints = {
optional: [],
mandatory: {
OfferToReceiveVideo: true,
}
}
function connect_video(room) {
// create peer connection
localPeerConnection = new RTCPeerConnection(server);
// create local data channel, send it to remote
navigator.getUserMedia({
video: true,
audio: true
}, function(stream) {
// get and save local stream
trace('Got stream, saving it now and starting RTC conn');
// must add before calling setRemoteDescription() because then
// it triggers 'addstream' event
localPeerConnection.addStream(stream);
localStream = stream;
// show local video
var localVideo = document.getElementById('from-video');
localVideo.srcObject = stream;
localVideo.onloadedmetadata = function(e) {
localVideo.play();
};
// can start once have gotten local video
establishRTCConnection(room);
}, errorHandler)
}
function connect_audio(room) {
// create peer connection
localPeerConnection = new RTCPeerConnection(server);
// create local data channel, send it to remote
navigator.getUserMedia({
video: false,
audio: true
}, function(stream) {
// get and save local stream
trace('Got stream, saving it now and starting RTC conn');
// must add before calling setRemoteDescription() because then
// it triggers 'addstream' event
localPeerConnection.addStream(stream);
localStream = stream;
// show local video
var localVideo = document.getElementById('from-video');
localVideo.srcObject = stream;
localVideo.onloadedmetadata = function(e) {
localVideo.play();
};
// can start once have gotten local video
establishRTCConnection(room);
}, errorHandler)
}
function establishRTCConnection(room) {
// create signalling server
signallingServer = new SignallingServer(room, serverIP);
signallingServer.connect();
// a remote peer has joined room, initiate sdp exchange
signallingServer.onGuestJoined = function() {
trace('guest joined!')
// set local description and send to remote
localPeerConnection.createOffer(function(sessionDescription) {
trace('set local session desc with offer');
localPeerConnection.setLocalDescription(sessionDescription);
// send local sdp to remote
signallingServer.sendSDP(sessionDescription);
});
}
// got sdp from remote
signallingServer.onReceiveSdp = function(sdp) {
// get stream again
localPeerConnection.addStream(localStream);
trace(localStream)
// if local was the caller, set remote desc
if (localIsCaller) {
trace('is caller');
trace('set remote session desc with answer');
localPeerConnection.setRemoteDescription(new RTCSessionDescription(
sdp));
}
// if local is joining a call, set remote sdp and create answer
else {
trace('set remote session desc with offer');
localPeerConnection.setRemoteDescription(new RTCSessionDescription(
sdp), function() {
trace('make answer')
localPeerConnection.createAnswer(function(
sessionDescription) {
// set local description
trace('set local session desc with answer');
localPeerConnection.setLocalDescription(
sessionDescription);
// send local sdp to remote too
signallingServer.sendSDP(sessionDescription);
});
});
}
}
// when received ICE candidate
signallingServer.onReceiveICECandidate = function(candidate) {
trace('Set remote ice candidate');
localPeerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}
// when room is full
signallingServer.onRoomFull = function(room) {
console.log('Room "' + room +
'"" is full! Please join or create another room');
}
// get ice candidates and send them over
// wont get called unless SDP has been exchanged
localPeerConnection.onicecandidate = function(event) {
if (event.candidate) {
//!!! send ice candidate over via signalling channel
trace("Sending candidate");
signallingServer.sendICECandidate(event.candidate);
}
}
// when stream is added to connection, put it in video src
localPeerConnection.ontrac = function(data) {
var remoteVideo = document.getElementById('to-video');
remoteVideo.srcObject = data.stream;
remoteVideo.onloadedmetadata = function(e) {
remoteVideo.play();
};
}
}
function errorHandler(error) {
console.log('Something went wrong!');
console.log(error);
}
function trace(text) {
console.log(text);
}
and another file like signalling.js, adapter.js, socket.io.js
No you can't. You'll need hosting that has nodejs support or one in which you can run a vm.
These scripts are server-side scripts and they need to run on the server at all times.
Making them run client-side makes no sense as there would be no place to connect to.

Live audio recording and playing with 2 raspberry pis

I have a request...
I want to put a live audio with a transmitter a receiver, of course, I go through a server to link the two. I use for that socket.io and nodejs
I want to be able to read it on the web and mobile
But here is the problem - I do not know how to generate an audio stream that I can send then read it at the same time.
My environements:
Server:
let socket = require('socket.io')(4000)
socket.on('connection', function(client) {
client.on('audio', function(data){
client.broadcast.emit('emit', data)
})
})
Transmitter(raspberry pi 3) :
let socket = require('socket.io-client')('http://my_server')
socket.on('connection', function(server) {
server.emit('audio',{recorder: 'output_audio'})
})
Receiver (raspberry pi 3):
let socket = require('socker.io-client')('http://my_server')
socket.on('connection', function(server) {
server.on('emit', function(data) {
// read and play audio received
})
})

Howto stream webcam data to a server?

I'm looking for a way to stream the webcam data from a browser to a webserver. The webcam data is acquired by using getUserMedia. One common option seems to be to use a canvas and a timer in order to send screenshots to a server, but I want a proper video stream. WEBRTC seems to be another option, but that might be a bit over the top, plus there is not too much software that runs on a server (i.e. non-browser), speaks WEBRTC, and has bindings for Python.
Maybe I'm missing sompling simpler. For example, could the video stream be streamed using Websockets?
'use strict';
var errorCallback = function(e) {
console.log('Rejected!', e);
};
var successCallback = function(stream) {
console.log('Got Video.');
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
// ???
// Stream data to server
video.play();
};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var hdConstraints = {
video: {
mandatory: {
minWidth: 1280,
minHeight: 720,
}
},
audio: false,
};
if (navigator.getUserMedia) {
navigator.getUserMedia(hdConstraints, successCallback, errorCallback);
}
else {
console.log('No getUserMedia available.');
}
Looks like the current best solution is indeed to use a canvas, create an image from the webcam in regular intervals and send it via websockets.

Changing twitter stream predicates (Node.js, socket.io)

I am constructing a twitter stream with Twit where the user can change the search term from the client.
The searchwords would be saved in a buffer and added to the stream in accordance with Twitters reconnection rules.
My code looks something like this:
var Twit = require('twit');
var T = new Twit({
consumer_key: 'xxxxxxxxx'
, consumer_secret: 'xxxxxxxxx'
, access_token: 'xxxxxxxxx'
, access_token_secret: 'xxxxxxxxx'
})
var searchStr = "orange";
var stream = T.stream('statuses/filter', { track: searchStr });
setInterval(function(){
newSearchStr = getNewSearchStr();
stream.stop();
stream = T.stream('statuses/filter', { track: newSearchStr});
},60*5*1000);
io.sockets.on('connection', function(socket) {
//SAVE USER AND INTITIAL SEARCH CRITERIA
// ...
stream.on('tweet', function (tweet) {
socket.emit('data',tweet);
});
socket.on('setSearchStr', function (searchStr) {
//SAVE SEARCH TO BUFFER FOR getNewSearchStr() TO OBTAIN
});
});
My problem is reinitializing the stream with new searches.
In the inteval-function stream.stop() does stop the stream (and stream.start() works too) but stream = T.stream(... opens a new connection instead of updating the current one. Thus the stream the user is listening to is disconnicted and the user stops recieving data until refreshing the browser.
Any ideas on how to do this with Twit? Any practical differences between clients? Other suggestions?
EDIT:
The answer for a similiar question has a outdated link. I would really like to see the page with "instructions how change the predicates and making the user experience as smooth as possible"
Perhaps not best practise, but I eventually solved the problem by directly editing the stream object:
setInterval(function(){
//check if criteria has changed
if(stream.params.track != searchStr){
console.log("Reconnecting with " + searchStr);
stream.stop();
stream.params.track = searchStr;
stream.start();
}
else {
console.log("Criteria unchanged");
}
},60*5*1000);

Remote webcam stream using webkitPeerConnection00 isn't displayed

I am trying out the sample code for peer-to-peer webcam communication in http://www.html5rocks.com/en/tutorials/webrtc/basics/ where both clients are implemented in the same page.
The 'local' webcam stream is displayed correctly. However, nothing shows up on the 'remote' stream and I'm not sure why.
Below is my code. I am currently testing it out on a hosted server. Thanks!
var localStream;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({'audio':true, 'video':true}, onMediaSuccess, onMediaFail);
function onMediaSuccess(stream) {
var localVideo = document.getElementById("localVideo");
var url = window.URL.createObjectURL(stream);
localVideo.autoplay = true;
localVideo.src = url;
localStream = stream;
console.log('Local stream established: ' + url);
}
function onMediaFail() {
alert('Could not connect stream');
}
function iceCallback1(){}
function iceCallback2(){}
function gotRemoteStream(e) {
var remoteVideo = document.getElementById("remoteVideo");
var stream = e.stream;
var url = window.URL.createObjectURL(stream);
remoteVideo.autoplay = true;
remoteVideo.src = url;
console.log('Remote stream received: ' + url);
}
function call(){
pc1 = new webkitPeerConnection00(null, iceCallback1); // create the 'sending' PeerConnection
pc2 = new webkitPeerConnection00(null, iceCallback2); // create the 'receiving' PeerConnection
pc2.onaddstream = gotRemoteStream; // set the callback for the receiving PeerConnection to display video
console.log("Adding local stream to pc1");
pc1.addStream(localStream); // add the local stream for the sending PeerConnection
console.log("Creating offer");
var offer = pc1.createOffer({audio:true, video:true}); // create an offer, with the local stream
console.log("Setting local description for pc1");
pc1.setLocalDescription(pc1.SDP_OFFER, offer); // set the offer for the sending and receiving PeerConnection
console.log("Start pc1 ICE");
pc1.startIce();
console.log("Setting remote description for pc2");
pc2.setRemoteDescription(pc2.SDP_OFFER, offer);
// gotRemoteStream Triggers here
console.log("Creating answer"); // create an answer
var answer = pc2.createAnswer(offer.toSdp(), {has_audio:true, has_video:true});
console.log("Setting local description for pc2");
pc2.setLocalDescription(pc2.SDP_ANSWER, answer); // set it on the sending and receiving PeerConnection
console.log("Setting remote description for pc1");
pc1.setRemoteDescription(pc1.SDP_ANSWER, answer);
console.log("Start pc2 ICE");
pc2.startIce(); // start the connection process
console.log("script done");
}
Try this:
simpl.info RTCPeerConnectionby Vikas Marwaha and Justin Uberti
http://www.simpl.info/rtcpeerconnection/
It's working well for me and it's very clean and simple.

Categories

Resources