{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Emotional °昔 的问题《Simple-peer, Socket.IO, Laravel 5.3》','https://www.manongdao.com/q-723363.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to create a video conferencing system using Laravel 5.3, Socket.IO and Simple-Peer. I followed this tutorial : https://www.youtube.com/watch?v=ieBtXwHvoNk and everything worked, but now I want to automatize this. I want that when two users go to this kind of link : /vide-conference/some_video_conference_id, they get connected, so the video conference can begin.
As far as I know, if I want a peer to send data to another one before they are connected, I need a signaling server. I'll use Socket.IO. But can you explain me clearly how can I have everything working with Laravel 5.3 ? I found an example here (not using laravel) : https://bl.ocks.org/adammw/d9bf021c395835427aa0, but it's talking about server side an client side code, and I don't understand because I don't know where to put the server side code, since I only have one javascript file (app.js) in my ressources/assets/js that gets compiled with gulp, so the browser can read it.
Right now, my app.js is :
var getUserMedia = require('getusermedia')
getUserMedia({ video: true, audio: false }, function (err, stream) {
if (err) return console.error(err)
var Peer = require('simple-peer')
var peer = new Peer({
initiator: location.hash === '#init',
trickle: false,
stream: stream
})
peer.on('signal', function (data) {
document.getElementById('yourId').value = JSON.stringify(data)
})
document.getElementById('connect').addEventListener('click', function () {
var otherId = JSON.parse(document.getElementById('otherId').value)
peer.signal(otherId)
})
document.getElementById('send').addEventListener('click', function () {
var yourMessage = document.getElementById('yourMessage').value
peer.send(yourMessage)
})
peer.on('data', function (data) {
document.getElementById('messages').textContent += data + '\n'
})
peer.on('stream', function (stream) {
var video = document.createElement('video')
document.body.appendChild(video)
video.src = window.URL.createObjectURL(stream)
video.play()
})
})
And my view is :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label>Your ID:</label><br/>
<textarea id="yourId"></textarea><br/>
<label>Other ID:</label><br/>
<textarea id="otherId"></textarea>
<button id="connect">connect</button><br/>
<label>Enter Message:</label><br/>
<textarea id="yourMessage"></textarea>
<button id="send">send</button>
<pre id="messages"></pre>
<script src="bundle.js" charset="utf-8"></script>
</body>
</html>
And my gulpfile is:
elixir(function(mix) {
mix.sass('app.scss')
.webpack('app.js');
});
I am a beginner in laravel and nodejs, please tell me how can I integrate socket.IO to my actual setup !
Thank you and have a nice day !
UPDATE : I tried to use socket.io-client, adding these lines of code :
var io = require("socket.io-client");
var client = io.connect("127.0.0.1:8080/LaravelAppFolder");
client.on('connect',function() {
client.emit("test","foo");
});
But I get this error :
polling-xhr.js?0757:250 GET http://127.0.0.1:8080/socket.io/?EIO=3&transport=polling&t=LUpVKNI 404 (Not Found)
Which I don't know how to solve !
UPDATE 2 : I searched for 2 days how to solve this error, but I just can't, I don't understand. Every solutions talk about server side code, http.listen, etc. And I already said that I don't understand what is this server side code. If you have any suggestion, it would be really appreciated!
UPDATE 3 : I finally understand what is this server side code. I created a nodejs folder in public, and I created a server.js file with this simple code :
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
const redis = require('redis');
const client = redis.createClient();
server.listen(8080);
console.log("Listening.....");
io.on('connection', function(socket){
console.log('a user connected');
});
Then i run the server in the cmd (node server.js), and everything works for server side (it says "Listening....."), but I still get this 404 error for the client, and I really have no idea why it doesn't work, since the server should solve this error. Any help is appreciated !