0

I am trying to add a video streaming service using tokbox.

But the users are not able to connect to each other. I followed the tutorial provided by them. Here are my codes. For testing purpose I am saving the session id on a file currently.

Client One:

$opentok    =   new OpenTok($apiKey, $apiSecret);
$session    =   $opentok->createSession();
$sessionId  =   $session->getSessionId();
$token      =   $opentok->generateToken($sessionId);

$file = fopen("session.txt","w+");
fwrite($file, $sessionId);
fclose($file);
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>OpenTok</title>
</head>
<body>

    <h2>Hello, World!</h2>
    <div id="publisher"></div>
    <div id="subscribers"></div>

</body>
</html>

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script>

    var apiKey = '<?php echo $apiKey; ?>';
    var sessionId = '<?php echo $sessionId; ?>';
    var token = '<?php echo $token; ?>';

    // Initialize an OpenTok Session object.
    var session = OT.initSession(sessionId);

    // Initialize a Publisher, and place it into the 'publisher' DOM element.
    var publisher = OT.initPublisher(apiKey, 'publisher');

    session.on('streamCreated', function(event) {
      // Called when another client publishes a stream.
      // Subscribe to the stream that caused this event.
      session.subscribe(event.stream, 'subscribers', { insertMode: 'append' });
    });

    // Connect to the session using your OpenTok API key and the client's token for the session
    session.connect(apiKey, token, function(error) {
      if (error) {
        console.error(error);
      } else {
        // Publish a stream, using the Publisher we initialzed earlier.
        // This triggers a streamCreated event on other clients.
        session.publish(publisher);
      }
    });

</script>

client 2:

$opentok    =   new OpenTok($apiKey, $apiSecret);
    $myfile     =   fopen("session.txt", "r") or die("Unable to open file!");

    $sessionId  =   fgets($myfile); 
    fclose($myfile);

    $token      =   $opentok->generateToken($sessionId);


?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>OpenTok Test</title>
</head>
<body>

    <h2>Hello, World!</h2>
    <div id="publisher"></div>
    <div id="subscribers"></div>

</body>
</html>

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script>

    var apiKey = '<?php echo $apiKey; ?>';
    var sessionId = '<?php echo $sessionId; ?>';
    var token = '<?php echo $token; ?>';

    // Initialize an OpenTok Session object.
    var session = OT.initSession(sessionId);

    // Initialize a Publisher, and place it into the 'publisher' DOM element.
    var publisher = OT.initPublisher(apiKey, 'publisher');

    session.on('streamCreated', function(event) {
      // Called when another client publishes a stream.
      // Subscribe to the stream that caused this event.
      session.subscribe(event.stream, 'subscribers', { insertMode: 'append' });
    });

    // Connect to the session using your OpenTok API key and the client's token for the session
    session.connect(apiKey, token, function(error) {
      if (error) {
        console.error(error);
      } else {
        // Publish a stream, using the Publisher we initialzed earlier.
        // This triggers a streamCreated event on other clients.
        session.publish(publisher);
      }
    });

</script>

I checked using chorme-dev-tools and found that the session id is same for both the user. But only the publisher screen is displayed on each user.

What am I doing Wrong? And how Should I correct it?

Lucas Huang
  • 3,998
  • 3
  • 20
  • 29
sam23
  • 589
  • 2
  • 7
  • 23
  • Did you include any CSS for positioning the publisher and subscriber view? The developer center has a tutorial for you to follow, it might be a good reference: https://tokbox.com/developer/tutorials/web/basic-video-chat/ – Lucas Huang Jun 04 '17 at 20:25
  • Another thing to check is: see if 'streamCreated' gets called. – Lucas Huang Jun 04 '17 at 20:26

1 Answers1

0

It looks like you got this from the OpenTok PHP SDK sample page. Unfortunately this is using the old syntax so I'll update it ASAP, sorry about that.

The old syntax should still probably work but just in case you should change your initSession function to:

var session = OT.initSession(apiKey, sessionId);

Your initPublisher function should be:

OT.initPublisher('publisher');

And your session.connect function should be:

session.connect(token, function(error) {

You can find references to the up-to-date syntax in the OpenTok JS SDK Reference.

Also, you should really listen for errors when subscribing and publishing.

To do that you need to add a callback to your session.subscribe function:

session.subscribe(event.stream, 'subscribers', {
  insertMode: 'append'
}, function(error) {
  if (error) {
    console.error('Failed to subscribe', error);
  }
});

And also to your session.publish function:

session.publish(publisher, function(error) {
  if (error) {
    console.error('Failed to publish', error);
  }
});

You can also use the OT.setLogLevel function to display extra logs to help debug the problem. Place this before your initSession call:

OT.setLogLevel(OT.DEBUG);

There are a lot of logs there but it should give you a better idea of what's going on. Remember you should not set the log level to DEBUG in production.

aiham
  • 3,614
  • 28
  • 32