sever not cnnected about video-call-app

[amirsanni]

Did the you start the web socket server? Amir Sanni

…

On Fri, 15 May 2020, 2:29 am kps92, ***@***.***> wrote: i have setup the application in localhost when i open chat room it says unable to connevt to server how should i resolve it — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#43>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOTAMP6LL2CEOXYBUXD7QDRRSLGJANCNFSM4NBFMARA> .

[kps92]

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]

Can you share what's you have in ws/bin/server.php? Your web socket is meant to listen on a different port from your http server. Amir Sanni

…

On Fri, 15 May 2020, 5:29 am kps92, ***@***.***> wrote: Yes I executes the command server. Php but it shows unable to connect server My port is localhost ,127.0.0.1, port 80 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#43 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOTAMNFEKHDGMUO7TM2ODDRRTAL7ANCNFSM4NBFMARA> .

[kps92]

<?php

/**
 * Description of server
 *
 * @author Amir <[email protected]>
 * @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]

Video-Call-App.zip

please find the zip file of a code

[amirsanni]

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

[amirsanni]

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 <[email protected]>
 * @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 <[email protected]>
 * @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]

Hello, amirsanni

I have a same problem at my local ubuntu server.

my config files are:

js/config.js:

/**

• @author Amir Sanni [email protected]
• @Date 23-Dec-2016
  */

'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]

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]

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?

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

[amirsanni]

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]

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.

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

[amirsanni]

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]

yes, I created it as below:

/**

• @author Amir Sanni [email protected]
• @Date 4th November 2019
  */

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]

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]

Both of my two computers have the 500 error.

[amirsanni]

Can you check the network tab for the exact error?

[xuzhousoft09]

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!

[amirsanni]

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

[xuzhousoft09]

Hello, my friend.

[amirsanni]

The preview section, please

[xuzhousoft09]

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

[amirsanni]

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]

Hello, amirsanni

Thank you for your quickly response.

my Server.php is:

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]

You need to install and enable CURL.

[xuzhousoft09]

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

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

my config.js

/**

• @author Amir Sanni [email protected]
• @Date 23-Dec-2016
  */

'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

/**

• Description of server
• @author Amir [email protected]
• @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 = ['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]

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]

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();

[amirsanni]

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]

This is a result of the proxy. Something is still wrong. I don't understand why you have rewrite condition for the web socket URL and what the condition does. Same for `ProxyRequest off`. The issue might be related to both. I used the same configuration I shared with you and it works well. Can you explain what they do? Amir Sanni

…

On Fri, 3 Jul 2020, 6:04 pm xuzhousoft09, ***@***.***> wrote: Hello, amirsanni Thank you for your advise. I changed my 'VirtualHost' to <VirtualHost *:443> ServerName 192.168.0.109 RewriteEngine on RewriteCond ${HTTP:Upgrade} websocket [NC] RewriteCond ${HTTP:Connection} upgrade [NC] RewriteRule /(.*) ws://192.168.0.109:8080/$1 [P,L] ProxyPass /secure/ ws://192.168.0.109:8080/ ProxyPassReverse /secure/ ws://192.168.0.109:8080/ ProxyRequests off config.js const appRoot = 'http://192.168.0.109/video-call-app/'; const wsUrl = 'wss://192.168.0.109/secure'; const spinnerClass = 'fa fa-spinner faa-spin animated'; But I got a new error: comm.js:28 WebSocket connection to 'wss://192.168.0.109/secure' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR [image: image] <https://user-images.githubusercontent.com/12077057/86487037-9e2ddc00-bd8f-11ea-8e76-7a3cb68b20b3.png> — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#43 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOTAMJLTHGX7PDNCUK2LJTRZYFSBANCNFSM4NBFMARA> .

[xuzhousoft09]

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?

[amirsanni]

Oh! Yes, it should be in the SSL config file. Once the recording is stopped, it'll be downloaded to your device. Amir Sanni

…

On Sat, 4 Jul 2020, 4:40 am xuzhousoft09, ***@***.***> wrote: 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 is the recorded files? [image: image] <https://user-images.githubusercontent.com/12077057/86504443-f47c3880-bdea-11ea-929a-57e2add9190e.png> — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#43 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOTAMMX5UGFNUPHHQURH2LRZ2QDXANCNFSM4NBFMARA> .

[kps92]

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

[amirsanni]

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

[kps92]

thanks i got it

[xuzhousoft09]

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

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]

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]

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]

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]

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]

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]

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]

Yes but you have to implement this functionality first.