Log in

by **consultcase** » Mon Nov 26, 2012 8:23 am

Hello,

I have built a draft peer-to-peer chat system using example codes provided on your website.
The transfer works fine in one direction but I can not make it to transfer audio/video in other direction.
I was trying to transfer audio/video in both directions using the same token/session IDs but it did not work so then I used two pairs of token/session IDs.
One pair is used to transmit (sender --> receiver) and this one works fine. Another pair supposed to be used to transmit (receiver --> sender).
But this one also has issues - seems that web browser allows only for one open flash session (?), I'm not sure how to explain this.

Could someone possibly explain to me how to implement audio/video transmission in both directions?
I will appreciate a help
Robert

I have placed my code here:

The sender code:

<?php
require_once 'opentok/API_Config.php';
require_once 'opentok/OpenTokSDK.php';

$apiObj_one = new OpenTokSDK(API_Config::API_KEY, API_Config::API_SECRET);
$apiObj_two = new OpenTokSDK(API_Config::API_KEY, API_Config::API_SECRET);

$ApiKey = constant("API_Config::API_KEY");

$session_one = $apiObj_one->create_session($_SERVER["REMOTE_ADDR"], array(SessionPropertyConstants::P2P_PREFERENCE=>"enabled"));
$session_two = $apiObj_two->create_session($_SERVER["REMOTE_ADDR"], array(SessionPropertyConstants::P2P_PREFERENCE=>"enabled"));

$CustomSessionID_one = $session_one->getSessionId();
$CustomTokenID_one = $apiObj_one->generate_token($CustomSessionID_one, RoleConstants::PUBLISHER);

$CustomSessionID_two = $session_two->getSessionId();
$CustomTokenID_two = $apiObj_two->generate_token($CustomSessionID_two, RoleConstants::PUBLISHER);
?>

<html>
<head>
<title>Pet end node</title>
<script src="http://static.opentok.com/v0.91/js/TB.min.js"></script>

<script type="text/javascript">
var apiKey = "<?php echo $ApiKey; ?>";
var sessionId_one = "<?php echo $CustomSessionID_one; ?>";
var token_one = "<?php echo $CustomTokenID_one; ?>";

TB.setLogLevel(TB.DEBUG); // Set this for helpful debugging messages in console

if (TB.checkSystemRequirements() != TB.HAS_REQUIREMENTS) {
alert('Minimum System Requirements not met!');
}

var session_one;
session_one = TB.initSession(sessionId_one);
session_one.addEventListener('sessionConnected', sessionConnectedHandler);
session_one.connect(apiKey, token_one);

var publisher_one;
var publishProps_one;

function sessionConnectedHandler(event) {
publishProps_one = {height:240, width:320, name:"Pet's stream"};
publisher_one = TB.initPublisher(apiKey, 'myPublisherDiv', publishProps_one);
session_one.publish(publisher_one);
}
</script>
</head>

<body>
<div id="myPublisherDiv"></div>
</body>
</html>

Received code:

<?php
$session_one = $_GET['SessionID_one'];
$token_one = $_GET['TokenID_one'];

$session_two = $_GET['SessionID_two'];
$token_two = $_GET['TokenID_two'];

$api = $_GET['ApiID'];
?>

<html>
<head>
<title>Client and node</title>
<script src="http://static.opentok.com/v0.91/js/TB.min.js"></script>

<script type="text/javascript">

var apiKey = "<?php echo $api; ?>";
var sessionId_one = "<?php echo $session_one; ?>";
var token_one = "<?php echo $token_one; ?>";

TB.setLogLevel(TB.DEBUG);

var session_one = TB.initSession(sessionId_one);
session_one.addEventListener('sessionConnected', sessionConnectedHandler);
session_one.addEventListener('streamCreated', streamCreatedHandler);
session_one.connect(apiKey, token_one);

function sessionConnectedHandler(event) {
subscribeToStreams(event.streams);
}

function streamCreatedHandler(event) {
// Subscribe to any new streams that are created
subscribeToStreams(event.streams);
}

function subscribeToStreams(streams) {
for (var i = 0; i < streams.length; i++) {

if (streams[i].connection.connectionId == session_one.connection.connectionId) {
return;
}

// Create the div to put the subscriber element in to
var div = document.createElement('div');
div.setAttribute('id', 'stream' + streams[i].streamId);
document.body.appendChild(div);

// Subscribe to the stream
session_one.subscribe(streams[i], div.id);
}
}

</script>
</head>

<body>
<div id="myPublisherDiv"></div>
</body>
</html>

by **ankur** » Mon Nov 26, 2012 2:44 pm

Hello,

Sorry that you had some confusion about this.

It seems like theres a couple concepts we should clarify here. There should only be ONE session for both your users. Calling them 'sender' and 'receiver' separately doesn't make sense if you intend to set up a bi-directional conversation as you described. Instead, what we need to understand is the concepts of 'publish' and 'subscribe'. In fact, both users will be 'publishing' which means they will send audio/video data that originates from their own computer. Also, both users will be 'subscribing' to exactly one stream – the stream that is coming from the other user, which means they will be displaying it on their own screen.

Now given all this, setting up a bi-directional conversation is as simple as having each user (1) connect the the (single) session, (2) publish their own stream, and (3) subscribe to any stream that is not their own. BOTH sides are running the exact same code. The only thing left is to make sure you give that single session ID (and corresponding token) to exactly only the two users that are trying to have a chat, but logic will probably be specific to your application and done on the server-side.

Okay, now that we have all the concepts nailed, here is what you should try to do:
1) Try out the Basic Tutorial (http://www.tokbox.com/opentok/api/tools ... orial.html) using your own API Key, Session ID, and Token. Open this in two separate browser windows on your computer and you should have this bi-directional chat working.
2) Use the PHP SDK just to substitute the values of apiKey, sessionId, token into the javascript. Again confirm by running it on a server and opening it in two windows, the conversation should still work.
3) Add your server-side logic of getting these two users to each other on top of what you already have.

I hope that helps,

-- Ankur

by **consultcase** » Mon Nov 26, 2012 9:21 pm

Thank you for the respond,
I modified the code according to the tutorial and I did succeed a bi-directional transmission.
I wonder what is the reason for having received video being a mirror reflection of the original stream?

Is there an additional option that has to be set to have received video identical to the sent one ?

Robert

Devs Checklist · by **jtsai** » Tue Nov 27, 2012 11:29 am

Hi

The publisher side is actually the one being mirrored. You can turn it off by passing {mirror: false} as the second argument in initPublisher.

Code: Select all: TB.initPublisher("div", {mirror: false})

John

by **consultcase** » Tue Nov 27, 2012 1:06 pm

Thank you for the advice, I will try it.
Robert

Bi-directional transmision in 1:1 sesion

Bi-directional transmision in 1:1 sesion

Re: Bi-directional transmision in 1:1 sesion

Re: Bi-directional transmision in 1:1 sesion

Re: Bi-directional transmision in 1:1 sesion

Re: Bi-directional transmision in 1:1 sesion

Who is online