Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

sever not cnnected #43

Open
kps92 opened this issue May 15, 2020 · 43 comments
Open

sever not cnnected #43

kps92 opened this issue May 15, 2020 · 43 comments
Assignees
@amirsanni

Comments

@kps92
Copy link

kps92 commented May 15, 2020

i have setup the application in localhost when i open chat room it says unable to connevt to server how should i resolve it
@amirsanni
Copy link
Owner

amirsanni commented May 15, 2020 via email

@kps92
Copy link
Author

kps92 commented May 15, 2020

Yes I executes the command server. Php but it shows unable to connect server

My port is localhost ,127.0.0.1, port 80

@amirsanni
Copy link
Owner

amirsanni commented May 15, 2020 via email

@kps92
Copy link
Author

kps92 commented May 15, 2020 •
edited by amirsanni 

<?php

/**
 * Description of server
 *
 * @author Amir <amirsanni@gmail.com>
 * @date 23-Dec-2016
 */

require 'vendor/autoload.php';

use Amir\Comm;
use Ratchet\App;

//set an array of origins allowed to connect to this server
$allowed_origins = ['localhost', '127.0.0.2'];

// Run the server application through the WebSocket protocol on port 8080
$app = new App('localhost', 8012, '127.0.0.3');//App(hostname, port, 'whoCanConnectIP', '')

//create socket routes
//route(uri, classInstance, arrOfAllowedOrigins)
$app->route('/comm', new Comm, $allowed_origins);

//run websocket
$app->run();

@kps92
Copy link
Author

kps92 commented May 15, 2020

Video-Call-App.zip

please find the zip file of a code

@amirsanni
Copy link
Owner

Hi @kps92 Will look into the file now and revert hopefully tomorrow. Sorry for the late response.

@amirsanni amirsanni self-assigned this May 31, 2020
@amirsanni
Copy link
Owner

I noticed 2 issues:

  1. In ws/bin/server.php
  2. In js/config.js.

I updated both as shown below:

ws/bin/server.php

<?php

/**
 * Description of server
 *
 * @author Amir <amirsanni@gmail.com>
 * @date 23-Dec-2016
 */

require 'vendor/autoload.php';

use Amir\Comm;
use Ratchet\App;

//set an array of origins allowed to connect to this server
$allowed_origins = ['localhost', '127.0.0.1'];

// Run the server application through the WebSocket protocol on any port of your choice. e.g. 8080
$app = new App('localhost', 8012, '0.0.0.0');//App(hostname, port, 'whoCanConnectIP', '')

//create socket routes
//route(uri, classInstance, arrOfAllowedOrigins)
$app->route('/comm', new Comm, $allowed_origins);

//run websocket
$app->run();

js/config.js:

/**
 * @author Amir Sanni <amirsanni@gmail.com>
 * @date 23-Dec-2016
 */

'use strict';

const appRoot = 'http://localhost:8012/Video-Call-App/';
const wsUrl = 'ws://localhost:8012/comm';
const spinnerClass = 'fa fa-spinner faa-spin animated';

You may need to update your appRoot to match what you have configured on your local server.

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 1, 2020 •
edited

Hello, amirsanni

I have a same problem at my local ubuntu server.

my config files are:

js/config.js:

/**

'use strict';

const appRoot = 'http://192.168.0.109/video-call-app/';
const wsUrl = 'ws://192.168.0.109/comm';
const spinnerClass = 'fa fa-spinner faa-spin animated';

ws/bin/server.php

require 'vendor/autoload.php';

use Amir\Comm;
use Ratchet\App;

//set an array of origins allowed to connect to this server
$allowed_origins = ['192.168.0.109', '127.0.0.1'];

// Run the server application through the WebSocket protocol on port 8080
$app = new App('192.168.0.109', 80, '0.0.0.0');//App(hostname, port, 'whoCanConnectIP', '')

//create socket routes
//route(uri, classInstance, arrOfAllowedOrigins)
$app->route('/comm', new Comm, $allowed_origins);

//run websocket
$app->run();

When I ran 'php ws/bin/server.php', I got an error:

PHP Fatal error: Uncaught exception 'React\Socket\ConnectionException' with message 'Could not bind to tcp://0.0.0.0:80: ' in /var/www/html/video-call-app/vendor/react/socket/src/Server.php:90
Stack trace:
#0 /var/www/html/video-call-app/vendor/cboden/ratchet/src/Ratchet/App.php(80): React\Socket\Server->listen(80, '0.0.0.0')
#1 /var/www/html/video-call-app/ws/bin/server.php(19): Ratchet\App->__construct('192.168.0.109', 80, '0.0.0.0')
#2 {main}
thrown in /var/www/html/video-call-app/vendor/react/socket/src/Server.php on line 90

Could you please tell me how to resolve this error?

@amirsanni
Copy link
Owner

The error is from ws/bin/server.php. You're trying to use port 80 which is been used by another service. Try to bind to a free port and try again.

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 1, 2020 •
edited

Hello amirsanni,

Thank you for your anwser, I changed it to 8080 and tried again. The command line stoped as below, no response, Is it right?

image

It still couldn't connect to the server, an error 'Unable to connect to the chat server! Kindly refresh' was displayed.

image

@amirsanni
Copy link
Owner

The command line part works as expected since we are not printing anything in the console. The error is from your config.js file. You need to include the port. Change const wsUrl = 'ws://192.168.0.109/comm'; to const wsUrl = 'ws://192.168.0.109:8080/comm';

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 2, 2020 •
edited

Hello amirsanni,

Thank you for your advise.

I changed

const wsUrl = 'ws://192.168.0.109/comm';

to

const wsUrl = 'ws://192.168.0.109:8080';

I also changed the Server.example.php to Server.php and edited it to

...
private function getIceServers()
{
// PHP Get ICE STUN and TURN list
$data = ["format"=>"urls"];
$json_data = json_encode($data);

    $curl = curl_init();

    curl_setopt_array($curl, [
        CURLOPT_HTTPHEADER => ["Content-Type: application/json", "Content-Length: " . strlen($json_data)],
        CURLOPT_POSTFIELDS => $json_data,
        CURLOPT_URL => "my channel",//Replace 'YOUR-CHANNEL-NAME' with the name of your xirsys channel
        CURLOPT_USERPWD => "my password",
        CURLOPT_HTTPAUTH => CURLAUTH_BASIC,
        CURLOPT_CUSTOMREQUEST => "PUT",
        CURLOPT_RETURNTRANSFER => 1,
        CURLOPT_SSL_VERIFYHOST => 2,
        CURLOPT_SSL_VERIFYPEER => TRUE
    ]);

...

Then, I tested it with my two computers (LAN with static IPs).
But I found only one of my computer showed "online" and it can receive the text messages from another computer.
The another computer keeps 'Remote (Offline) Remote is typing' and it can't receive any text message.

image

image

Not only that, there is a ‘500 Internal Server Error’.

image

@amirsanni
Copy link
Owner

amirsanni commented Jul 2, 2020 •
edited

As for the error, you need to create the Server.php file using Server.example.php. The quickest approach is to rename it or better still, comment out the call to it from the front-end if you are not using Xirsys. I am not sure if this affected the communication but I don't expect it to.

Can you fix that and try again?

Read your comments again. Which of the devices have these errors? My guess is remote, right?

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 2, 2020 •
edited

yes, I created it as below:

/**

class Server
{
public function index()
{
$servers = $this->getIceServers();

    header('Content-Type: Application/json');
    
    echo json_encode(json_decode($servers)->v->iceServers);
}


private function getIceServers()
{
    // PHP Get ICE STUN and TURN list
    $data = ["format"=>"urls"];
    $json_data = json_encode($data);

    $curl = curl_init();

    curl_setopt_array($curl, [
        CURLOPT_HTTPHEADER => ["Content-Type: application/json", "Content-Length: " . strlen($json_data)],
        CURLOPT_POSTFIELDS => $json_data,
        CURLOPT_URL => "MY-CHANNEL-NAME' with the name of your xirsys channel
        CURLOPT_USERPWD => "my password",
        CURLOPT_HTTPAUTH => CURLAUTH_BASIC,
        CURLOPT_CUSTOMREQUEST => "PUT",
        CURLOPT_RETURNTRANSFER => 1,
        CURLOPT_SSL_VERIFYHOST => 2,
        CURLOPT_SSL_VERIFYPEER => TRUE
    ]);

    $res = curl_exec($curl);
    
    if(curl_error($curl)){
        echo "Curl error: " . curl_error($curl);
    };

    curl_close($curl);
    
    return $res;
}

}

$server = new Server;

$server->index();

@amirsanni
Copy link
Owner

Sorry, I updated my comment.

Check the cause of the 500 error. This may be a CORS issue.

Also, note that you won't be able to access the devices' mic and camera unless you are on SSL.

@xuzhousoft09
Copy link

Both of my two computers have the 500 error.

@amirsanni
Copy link
Owner

Can you check the network tab for the exact error?

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 2, 2020 •
edited

please see my captures:
I also sent you my teamview ID and password, if you have time right now, could you please access teamview.
Thank you in advance!

image

image

@amirsanni
Copy link
Owner

I need the Network tab. Open the Network tab and click the request to Server.php that fails.

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 2, 2020 •
edited

Hello, my friend.

image

@amirsanni
Copy link
Owner

The preview section, please

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 2, 2020 •
edited

please check it. thank you.
I also tried the 'https://', but I got the same '500 Internal Server Error' too.

image

@amirsanni
Copy link
Owner

amirsanni commented Jul 2, 2020 •
edited

Guess you have error_reporting turned off.

The error is from the file and this line CURLOPT_URL => "MY-CHANNEL-NAME' with the name of your xirsys channel is a suspect. Is this exactly how it is? There should be a comma after "MY-CHANNEL-NAME" and the quotes are different (double and single). Also, remove or comment out with the name of your xirsys channel.

@xuzhousoft09
Copy link

Hello, amirsanni

Thank you for your quickly response.

my Server.php is:

1

I checked my apache error.log, it said:

PHP Fatal error: Call to undefined function curl_init() in /var/www/html/video-call-app/Server.php on line 25, referer: https://192.168.0.109/video-call-app/comm.html?room=fdm75fc5446

@amirsanni
Copy link
Owner

You need to install and enable CURL.

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 3, 2020 •
edited

Hello amirsanni,

Thank you for your support!

I resoved the 500 error by installing the curl module. I can do text message chat between my two LAN computers now.

But, another problem is the audio and video call funtions dosen't work for me.
When I clicked the 'start audio call' buttion on the callee computer, it got an error

comm.js:724 Uncaught TypeError: Cannot read property 'getUserMedia' of undefined
at setLocalMedia (comm.js:724)
at startCall (comm.js:694)
at HTMLButtonElement.answerCall (comm.js:608)

On the other hand, the caller computer dosen't get any error.
You told me I should install the SSL to get my devises work.
So, I installed the openssl on my ubuntu vm server, but when I tried to use the 'https' to open my chat room, it gave me two errors as below

image

I think above errors are due to my config.js and server.php are not configured correctly.

my config.js

/**

'use strict';

const appRoot = 'http://192.168.0.109/video-call-app/';
const wsUrl = 'ws://192.168.0.109:8080';
const spinnerClass = 'fa fa-spinner faa-spin animated';

my server.php

/**

require 'vendor/autoload.php';

use Amir\Comm;
use Ratchet\App;

//set an array of origins allowed to connect to this server
$allowed_origins = ['192.168.0.109', '127.0.0.1'];

// Run the server application through the WebSocket protocol on port 8080
$app = new App('192.168.0.109', 8080, '0.0.0.0');//App(hostname, port, 'whoCanConnectIP', '')

//create socket routes
//route(uri, classInstance, arrOfAllowedOrigins)
$app->route('/comm', new Comm, $allowed_origins);

//run websocket
$app->run();

Could you please give me some advise?

@amirsanni
Copy link
Owner

This error si because you're trying to connect to web socket without SSL. You have two options but most likely, the second is your best bet because last I checked, Ratchet does not support SSL (wss) directly.

Option 1: Change the ws in your web socket connection URL in config.js to wssand connect directly.

Option 2: Use wss and create a proxy that will route the connection to the ws URL that you currently have.

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 3, 2020 •
edited

Hello, amirsanni

Thank you for your quickly respongse.

Option 2: Use wss and create a proxy that will route the connection to the ws URL that you currently have.

I did this, but got an error

WebSocket connection to 'wss://192.168.0.109:8080/comm' failed: WebSocket opening handshake timed out comm.js:28

I think I didn't configure the proxy correctly, could you please give me some instruction.

Base on this article refer, I installed proxy, proxy_http, and proxy_wstunnel. I also added the 'VirtualHost' into my apache2.conf file as below.

<VirtualHost *:443>
ServerName 192.168.0.109

RewriteEngine on
RewriteCond ${HTTP:Upgrade} websocket [NC]
RewriteCond ${HTTP:Connection} upgrade [NC]
RewriteRule .* "wss://192.168.0.109:8080$1" [P,L]

ProxyPass / ws://192.168.0.109:8080
ProxyPassReverse / ws://192.168.0.109:8080

ProxyRequests off

my config.js is:

const appRoot = 'http://192.168.0.109/video-call-app/';
const wsUrl = 'wss://192.168.0.109:8080';
const spinnerClass = 'fa fa-spinner faa-spin animated';

my server.php is:

require 'vendor/autoload.php';

use Amir\Comm;
use Ratchet\App;

//set an array of origins allowed to connect to this server
$allowed_origins = ['192.168.0.109', '127.0.0.1'];

// Run the server application through the WebSocket protocol on port 8080
$app = new App('192.168.0.109', 8080, '0.0.0.0');//App(hostname, port, 'whoCanConnectIP', '')

//create socket routes
//route(uri, classInstance, arrOfAllowedOrigins)
$app->route('/comm', new Comm, $allowed_origins);

//run websocket
$app->run();

image

@amirsanni
Copy link
Owner

I am not sure of the rewrite rule you have there. Update your proxies to the below:

ProxyPass /secure/ ws://192.168.0.109:8080/
ProxyPassReverse /secure/ ws://192.168.0.109:8080/

Then update the URL in config.js to the below:

const wsUrl = 'wss://192.168.0.109/secure';

Note: You can use any string you prefer in place of secure.

@amirsanni
Copy link
Owner

amirsanni commented Jul 3, 2020 via email

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 4, 2020 •
edited

Many thanks. It worked.
I should have written the into the 'default-ssl.conf' file.

But, how to record the video or audio contents?
I clicked the 'Record' button, but where are the recorded files?

image

@amirsanni
Copy link
Owner

amirsanni commented Jul 4, 2020 via email

@kps92
Copy link
Author

kps92 commented Jul 5, 2020

hi amir its working is it possible to have more than 2 person join this call

@amirsanni
Copy link
Owner

No. If you want more than two people, check this and this.

@kps92
Copy link
Author

kps92 commented Jul 5, 2020

thanks i got it

@xuzhousoft09
Copy link

Hello, amir

after the callee clicked the 'start audio call' button to accept the audio call, a javascript error happened.

comm.js:130 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

image

I searched about this error, many people said can use the 'muted' tag to resolve it, but even if I added the 'muted' tag, it didn't disappear.

I changed below codes in 'video-call-app comm.html'

audio id="callerTone" src="media/callertone.mp3" loop preload="auto"
audio id="msgTone" src="media/msgtone.mp3" preload="auto"

to

audio id="callerTone" src="media/callertone.mp3" loop preload="auto" muted
audio id="msgTone" src="media/msgtone.mp3" preload="auto" muted

above change can mute the ring tone, but the error still exits.
By the way, it only happened on my wamp2.5 server, it didn't happen on my ubuntu server.

@amirsanni
Copy link
Owner

That error has nothing to do with the server but the browser you're using. Latest version of major browsers will throw this error if you try to play an audio if the user is yet to interact with the page.

Do this test, have the recipient move his noise about or click the chat before calling him, you didn't get this error. But if he loads the page without doing anything and you call him, the error will occur.

I'm not sure of a solution for this. Only solution is to have the user interact with the page before playing the audio. Programmatically triggering an event won't fix it either.

@amirsanni
Copy link
Owner

You can click the link on the error for more information.

I can do an update to catch the error and display a friendly message or trigger something.

@xuzhousoft09
Copy link

I can do an update to catch the error and display a friendly message or trigger something.

Yes, maybe you should 'trigger something or display a friendly message' during your next update.

@xuzhousoft09
Copy link

xuzhousoft09 commented Jul 10, 2020 •
edited

Hello Amir

Is it possible to record the voice/video of both the users on both the users' devices (or on the server side)?

Because I want to record the audio and video chat forcibly.
So, I changed the 'function description' of comm.js like this:

function description(desc){
......

//send sdp

......
document.getElementById('record').click();
document.getElementById("record").disabled = true;
}

But, after that, I found a problem.
It seems that an user can only record the voice/video of himself during the audio/video chat.
In other words, an user can't record the voice/video of the opposite side on his own device.

In my case, the problem is, because an user can change the javascript code in his browser, he can disable the recording function.
After that, even if the other user can hear or see him during their voice/video chat, his voice/video will not be recorded.

@amirsanni
Copy link
Owner

The fact that you can only record yourself is not a problem, but what was implemented. With the current solution, the best option is to record both streams separately. So yes, you can record the other user but the streams will be recorded separately.

@xuzhousoft09
Copy link

Hello, amir

Thank you for your answer.

I want to record both sides of a call.

the streams will be recorded separately.

That's OK.
Did you mean I can download two separated files after I stop the recording.

@amirsanni
Copy link
Owner

Yes but you have to implement this functionality first.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@amirsanni amirsanni

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@amirsanni @xuzhousoft09 @kps92