I'm playing around with WebRTC, and what I'd like to achive is:
User1 opens the browser at 192.168.x.x
User2 opens the browser at 192.168.x.x
The same page
User 1 clicks call, user2 displays the stream on his screen.
I've created a signaling server with node and socket.io and I'm able to exchange messages betweeen users using socket.io rooms.
The steps I'm following are:
Get User Media
Create peerconnection1 - no ice servers
add the stream on peerconnection
create the offer
send offer via sockets
Receive the offer and create peerconnection2 - no ice servers
sending the answer
I've also put some logging in "onicecandidate" and "onaddstream" to see when they are called, and on "onaddstream" I create the videoelement.
When I press the call button I see on the other computer that the video element becomes black but I dont see any video neither audio.
For sure I'm missing some vital steps,
Could someone tell me the steps I have to do to make a correct call and exchange all the necessary data to display the stream on the other side?
Thank you very much
A STUN server is used to get an external network address.
TURN servers are used to relay traffic if direct (peer to peer) connection fails.
see this image describes how peerconnection works
webRTC Basics
You should still have at least a stun server referenced for one of your ICE servers. I would use 'stun:stun.l.google.com:19302' || 'stun:23.21.150.121', even though you do not technically need one.
But if you do not have ICE servers, you do not need to worry about gathering candidates. A couple of things that could be happening.
Make sure you Add your streams to each connection BEFORE creating your offer and creating your answer, it says you get the user media but not that you add it to your peerconnection
You are not setting your local and remote descriptions
Offering computer should set their local description when creating it
Answering computer should set their remote description with the offering description and set their local description with the one they create
Make sure you send the answer sdp to the initial offering computer and that that offering computer sets it as their remote description.
Streams WILL NOT send to each other unless you add the needed streams, create your descriptions, and then set their local and remote descriptions accordingly.
If that does not work, you should probably post your code for the page.
Related
So I am looking into building a game using WebRTC, mostly just to learn how to use WebRTC more than anything. What I envisioned in my head was one browser (lets call it Alice) wants to start a game. They figure out their connection information and then send that info to another browser (Bob) who they want to join their game. I like the idea of a link similar to a discord invite.
What I had imagined, was that this was all that was required. Bob's browser knows where Alice is, and Alice is expecting a connection from someone who knows about their connection information (their SDP). Instead what is required is that Bob needs to generate his own connection information (his SDP) and then hand that back to Alice somehow. (For reference, here is an implementation of a "serverless" WebRTC client, which requires both parties to pass their connection info to the other person https://github.com/lesmana/webrtc-without-signaling-server)
Because there are two required messages, telling users to do this manually is very much a pain, and gets increasingly difficult with more users (e.g. Alice, Bob and Charlie want to connect). For this reason we have "signaling servers" which handle this handshaking.
My question is why is all of this necessary? Is it for security? Couldnt you consider a browser secure enough if their SDP info included a generated hash that only those they expect (like Bob) have access to?
Don't confuse connection info (ice candidates) with SDP.
What are ICE Candidates and how do the peer connection choose between them?
If you are asking specifically about web browsers - then yes, you have to collect connection info, nothing to do with SDP, from each browser. This is because browsers do not listen on a specific, well known port, which is open in firewalls too. So it's not like one browser could just connect to another one, using well-known endpoint (IP:Port).
The idea is that Stun server will drill a hole in both firewalls and thus will make direct connection between browsers possible. Read STUN spec to see how this is done.
However, if one peer is a browser, and another peer is your own application that listens on specific port (WebRTC gateways, media servers), then you don't need to collect connection info (ice candidates) from the browser. Nobody needs it. Stun/Turn servers are not involved. Browser always connects to your application. You can hardcode ice candidate in your webpage, which will contain the endpoint exposed by your application.
You always have to exchange SDPs between two peers, because they carry codecs information and other info about media stream, that another peer needs to know about. Browsers need to agree that they can decode the incoming stream, for example.
Well I am studying about Web-RTC from its official documentation. I need to integrate live streaming in my website but after seeing this and studying about all its documentation. I only learn about streaming on locally like on same browser and same page. But this is not what i want. I want to start stream from my admin panel(This part has been completed) and broadcast that stream whoever has access to my website whatever the website is and whatever device. Whoever open my website if i m streaming then he should see that and if some of u have worked on live streaming then u should tell me. It will be a great help for me. All i did until now is to make a connection between two peers on same page. Now i want to make global peer to peer connection
I have done this implementation using simple-peer. Basically a wrapper for webRTC.
As soon as a new user connects a new webrtc connection should be made between the receiver and the caller. The receiver is firstly initialized and then sends a message to the sender to start the connection. This first connection is all done by your own server you should write.
Here is a working example. And here is the demo. Any connected devices will be automatically connected to the call. Multiple users supported. You'll find all the webrtc code in /public/js/main.js
You have to do signaling which mean that you have to exchange the PEER CONNECTIONS over the server and which required you to build a server page and client page so both of you can exchange the peer connection.
here is the complete procedure of exchanging the peer connection over the server.
find the heading
RTCPeerConnection plus servers
https://www.html5rocks.com/en/tutorials/webrtc/basics/
so i started to work in this summer and the first task they have given to me is to use wireshark to understand why an application that uses webRTC doesn't use the turn server.
Can you guys help me out, to understand which steps should i do to understand better where is the problem.
I already run the wireshark and only get protocols STUN, that bind to a UDP connection.
TURN is a STUN extension so you will only see STUN packets in Wireshark.
You can easily test WebRTC+TURN in isolation using this sample from the WebRTC project. Remove the default stun server and add the url and credentials for your own TURN server.
Fire up wireshark, start capturing.
Click the "gather candidates" button on that page. You should see candidates with host type at least. You should, if the browser can reach the TURN server usually also see candidates with a srflx type.
If the TURN server is working and your credentials are valid, then you will get candidates with type relay. But you probably wouldn't be asking then.
Now go back to wireshark. Set the display filter to 'stun'. You should see some packets sent to the ip address of the TURN server. Right-click on one of them, 'follow' and 'udp stream'. That should show you all the packets between the browser and the TURN server.
You should be seeing binding requests (message_type=0x01) as well as binding success responses (message_type=0x101) from the server. If you don't see those, your turn server is not responding or something is blocking the client. You will also not get srflx candidates on the candidate gathering demo page.
You should also see packets wireshark interprets as 'allocate request udp' (the message type is 0x101). These are the important ones for TURN.
You should see an error from the TURN server with a message type 0x113 and an error code 401 (unauthorized) because in the first packets, there is no username attribute. In response to those the browser will start sending allocate requests that contain both a username and a message-integrity.
If things go well, those should be answered with an allocate success response (message type=0x103) indicating a xor-relayed-address.
If not and you see more 401 errors that usually means your username and password is wrong.
You might also find the articles on using wireshark to reverse-engineer Amazon Mayday and Whatsapp on WebRTChacks useful -- both use Wireshark.
The WebRTC project has some notes on Wireshark, too.
What I want is, basically, to create a connection between two different computers on same local network. But i want to do this by computers' local IP's. (like 192.168.2.23 etc)
This must be a totally local connection. no TURN or STUN Servers. I am not sure if this is possible. Because there are not much documentation/example/information about WebRTC.
So, how can I create a connection from my computer to another one just passing its local IP as parameter?
Update: To be more clear; imagine there is an html page contains some code that activates my camera and audio services. and another -almost same- page is open in other computer. Waiting a connection request... And there is a textbox in my page to type an IP belongs to other computer on my local network. type 192.168.2.xx and bingo! i have connection between me and other computer.
I want this process as IP based, because there may be more than 2 devices on the network. And all of them are possible devices to create connection. So i need to reach them by their IP's.
Any example code or explanation would be great! even if it tells that this is not possible.
Thanks
Peer discovery is a vital part in any WebRTC application. It's an expensive term for saying: "Hi, I'm computer 4 and I want to talk to you!".
See it as calling a friend over the phone. You need to dial his number first.
This part is not defined in the WebRTC standards. You need to implement this logic in your application. Once you know who you want to call, you need a way of exchanging vital information. This is called signaling, like flo850 put in his answer.
Signaling is needed before any peer-to-peer connection can be set up.
To come up with an idea for your use case of 7 devices in a LAN.
If you have these devices connected to for example a WebSockets server and are in the same channel.
The WebSockets server can be written to route messages to specific receivers.
Devices connected to the channel often are identified with some kind of ID, imagine you use the device's IP.
When you want to talk to computer 4 with IP 192.168.0.4 you send the exchange messages (signaling) on the channel to the receiver with ID, the IP of the device you want to connect with.
How to send the signaling (offer, answer) is described here with example code.
Hope this helps
Users usually sit behind NATs; that's why ICE concept implemented in WebRTC.
If both users are sitting behind same NAT; you can skip ICE servers by passing "NULL" parameter value over "RTCPeerConnection" constructor:
var peer = new [webkit|moz]RTCPeerConnection ( null );
Now, browser will use "host" candidates, also known as "local" candidates.
you still need a signaling server. During the ICE candidate search, your clients will exchange their local ip through this signaling server
since few days I'm trying to build a basic webRTC Videochat. I've got some Demos running localy, even via LAN. But now I want to build one by my one at the really basics without so much overload some Demos come with.
But I still don't get a complete peer connection.
Eg. this example seems to be broken, because I can't "createSignalingChannel();" w3.org/TR/webrtc/#simple-example
Some other examples (https://webrtc-experiment.appspot.com/) want me to link their scripts, but I wont do this, because I want to understand the magic of the peer connection and how to get a handshake between 2 browsers.
I also explored examples with the Google App Engine but thats not what I want.
I want to run it in really easy JS and HTML just on the minimum of what is neccessary.
Here is my code:
https://github.com/mexx91/basicVideoRTC EDIT: Should work now
So what will I have to add to get an handshake and peer connection, so that I can send eg. the mediaStream to eachother.
Thanks a lot!
createSignalingChannel() is only pseudo-code to illustrate the existence of a separate channel. You need for the initial connection handling a separate message channel.
You can achieve that with hosted services like Pusher, Brightcontext or PubNub, or you can host your own backend with open-source projects like socket.io or SignalR.
Then you just need to send the offers, answers and iceCandidates through your separate channel.
List of Realtime Services: http://www.leggetter.co.uk/real-time-web-technologies-guide
Imagine a video conferencing web-app, which users A and B originally access from some webserver. Suppose that web app supports presence, so the web server knows who's currently on-line. Imahine the UI allows A to try and place a video call to B. Via say XMLHttpRequest(), A's browser informs the server this is wanted, and B's javascript pops up something saying that A wants to call B. No WebRTC has happened at all yet. But at this stage, A can indirecttly communicated with B by sending messages using e.g. XMLHttpeRequest. In WebRTC parlance, this is the "signalling channel". So, A and B can both interact with their ICE agents to discover candidate addresses, and SDP descriptions, and send these to each ot6her, via the server, over this signallinh channel. E.g. the web app on A calls a WebRTC API to get its ICE candidates, and packages these up as it sees fit, to send to B. B's reader receives this message from the server (e.g over a WebSocket or long poll) and hyence it can unpack this, and format as needed to send to the ICE agent on B, using the RTCPeerConnection object. Similalrly, SDP offer/answer can be sent betweent he two apps, and passe through into the ICE agnet in the browsers, to get agreed media formats etc. At that stage, media connections can get set uo by the browser (meida streams are added to the RTCPeerConnection initially (which aren't communicating, but whihc have attributes that can be queried to describe the codec etc, and when the API is asked to create an SDP description, it does that using these attributes, but adjust the IP address and port based on how the ICE agent on each local browser has figured out what addresses can reach that local browser / port (NAT traversal).