Hello,
I am trying to understand the page at https://github.com/dougsillars/browserLiveStream/blob/master/public/index.html
However, I could not find where the actual rtmp connection is being made.
The URL field is option_url, but I don’t see where it is used by the socket object.
Can someone give me a clue, please?
Thanks
Jaime
Hi @jaimestuardo,
When the form is changed, the option_url feeds the url variable
option_url.onchange=option_url.onkeyup=function(){url=this.value;}
which is emitted by the socket on line 287
socket.emit('config_rtmpDestination',url);
I hope this helps. Let me know if you have further questions.
Thanks for your help, Doug. I have not seen that emit method before.
I am developing a test streaming web page in my own computer to understand how api.video is used for live streaming.
api.video communication is OK, I can make calls and create the live streaming in api.video platform, however, I am having problems with the socket.io server.
I am in Windows 10 so I have installed all required packages here, and when I started the server by mean of node server.js this is shown meaning that it is OK:
https and websocket listening on *:1437
Then, when I try to start streaming, the cammera is activated, however, this error is shown in the developer console:
GET https://localhost:44356/socket.io/?framespersecond=15&audioBitrate=22050&EIO=3&transport=polling&t=NJCODwy` 404 not found
and of course, this text is shown in the output_message element: Connection Failed.
Port 44356 is my test website in IIS Expres and socket.io.js is inside a folder called Scripts
I know where in socket.io.js file that URL is being called, however, of course path /socket.io/ relative to web site root does not exist. Can you please explain such a magic?
In server livestream.streamclarity.com this is called:
wss://livestream.streamclarity.com/socket.io/?framespersecond=15&audioBitrate=22050&EIO=3&transport=websocket&sid=3yvSJS2PtZc7wDw7ALWB
and then
https://livestream.streamclarity.com/socket.io/?framespersecond=15&audioBitrate=22050&EIO=3&transport=websocket&sid=3yvSJS2PtZc7wDw7ALWB
And both URL’s do exist. What may be happening in my case?
Regards
Jaime
Jaime,
On the livestream.streamclarity server - all traffic is being routed to port 1437. On your localhost- your node server is running on port 1437. That’s where socket.io is sitting (in the public folder, so it appears as the root directory. localhost:1437/socket.io…
If your version of socket.io is sitting at localhost:44346/Scripts/socket.io - I think you need to change the path in the code to that location (so as not to throw the 404).
Of course, you probably do not 2 versions on your server… Pick one, and then you can remove the other copy (and make sure you only ever point to the copy that you are keeping). 
Hello, when connecting to https://livestream.streamclarity.com/, port 443 is used. Where traffic is routed to port 1437?
To better understand how api.video receives the data. When the camera is recording, it sends the streaming to the browser. Web page loaded in browser receives that streaming and by mean of socket io client, it is sent to socket io server which is running remotely. In turn, that socket io server send the streaming to rtmp server. Is that process correct?
That way, port 1437 should be opened in firewall. Currently, your demo site does not work, so I cannot monitor which connections are made by the browser.
Regards
Jaime
Jaime,
I’m sorry the demo is not working for you. I just tried, I am getting 9s latency (left is real time from the camera, and the right is watching my stream):
My instance is running in Ireland, so perhaps there is excessive latency due to distance. Can you paste the error message from the status box and send it to me via private message?
Try the livestream demo on api.video. The code is basically the same, but we have this version load balanced and running in both Canada and France.
You can also spin up your own version (if you run it on localhost, there is no HTTPS requirement) https://github.com/dougsillars/browserLiveStream - so you wont have any latency issues :). I think the documentation walks through the setup pretty well, but if you have questions, let me know.
On to the port question:
You are correct though, the service is running on port 1437, on an Amazon server in Ireland. (and directly to this server, I have the port opened):
http://ec2-52-49-92-103.eu-west-1.compute.amazonaws.com:1437/
But, adding ports to the end of urls is hard for people to type, so generally, we want the url to not have the port number. The default HTTP port is 80, so on my server, I have a reverse proxy set to redirect all traffic from port 80 to port 1437:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name localhost;
root /usr/share/nginx/html;
location / {
proxy_pass http://127.0.0.1:1437;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
anything that reaches http://ec2-52-49-92-103.eu-west-1.compute.amazonaws.com is seamlessly redirected to port 1437. if you open this link, you’ll see it works without the port. (Google Reverse proxy to find out how to do this, I used NGINX on Ubuntu).
Ok, so how do I get HTTPS (port 443) running on this site? You cannot add a cert to an AWS EC2 instance - they are too transient. BUT, you can place a HTTPS certificate on a load balancer, and then push the traffic from the load balancer to the EC2 instance.
So, I have added a load balancer that balances zero load (there is just one server). However, It does have a certificate (to provide the HTTPS), and then routes the traffic to port 80 on the EC2 server.
So, step by step:
Thanks Doug, it is clear how you have configured your server. I was missing the reverse proxy part, and in fact, it is difficult for a user to remember a port. I do the same in my server for my ERP and GitLab services.
I did the same test as your and it works, however, this happens:
When using https://embed.api.video/live/xxxxxx, a page with thumbnail appears with a play button at the center.
When I press the play button, video starts from the beginning and not from where it is transmitting in real time.
When I stop transmitting, the video in https://embed.api.video/live/xxxxxx freezes with a spinner turning for ever.
Is above behaviour normal? Should I have to do another call when the video stops transmitting, for example, call the “delete a live stream” api? If I do that, will the saved video be kept to be seen later as a VOD?
thanks
Jaime
I just tested with a few streams, and I am unable to reproduce the video starting at the beginning of the stream. It always comes in a few seconds behind, but in that expected delay timeframe. Sometimes when you stop and start a livestream frequently (like while testing), there can be times where the “old stream” gets picked up.
Doug,
so, is there a way I could get the same effect as shown in a YouTube life stream when streaming ends? In YouTube, when the streaming ends, YouTube replaces the video area by a black canvas and with a white text telling that the video has been stopped in the center of it.
Regards
Jaime