OpenTok suggestion how to start to build an app

Question

I'm trying to achieve an app opentok based. The project who i have in mind is an app which some subscribers, every subscriber can talk with an operator from their app phone and the operator have to stay on computer. Simply the app have to call an operator and record the call in server. I think which i have to create two apps: one which make the call from the phone and connect it to the session and another with the session already opened on the computer which also record the call. Or not? Or alternatively the session already open on the operator computers and the people can connect at the session from the phone? How is possible to create an one to one videochat with only one tokenId? How i can create a new call every time which one person call an operator? If anyone have suggestion, tutorial or tips about how to start please answer.... Thanks in advance

I'have create the cordova app based on tutorial with this code inside the index.js

 onDeviceReady: function() {

  // Getting OpenTokRTC's room's credentials. 
  // To use your own room in opentokrtc, change cordova to room of your choice
  //   -> ie: https://opentokrtc.com/myroom.json
  // To use your own credentials
  //  replace data.apiKey, data.sid, and data.token with your own

  var apiKey = "xxx";
  var sessionId = "xxxx";
  var token = "xxx";

  // Very simple OpenTok Code for group video chat
  var publisher = TB.initPublisher(apiKey,'myPublisherDiv');

  var session = TB.initSession( apiKey, sessionId ); 
  session.on({
    'streamCreated': function( event ){
        var div = document.createElement('div');
        div.setAttribute('id', 'stream' + event.stream.streamId);
        document.body.appendChild(div);
        session.subscribe( event.stream, div.id, {subscribeToAudio: false} );
    }
  });

  session.connect(token, function(){
    session.publish( publisher );
  });

},
   // Update DOM on a Received Event
   receivedEvent: function(id) {
  }

And in my web page app i've write this code taken from the opentok tutorial

<div id="myPublisherDiv"></div>
    <script type="text/javascript">
      // Initialize API key, session, and token...
      // Think of a session as a room, and a token as the key to get in to the room
      // Sessions and tokens are generated on your server and passed down to the client
      var apiKey = "xxx";
      var sessionId = "xxx";
      var token = "xxx";

      var publisher = TB.initPublisher(apiKey,'myPublisherDiv');
      var session = TB.initSession(sessionId);

      session.addEventListener('sessionConnected', sessionConnectedHandler);
      session.connect(apiKey, token);

      function sessionConnectedHandler(event) {
        var publisher = TB.initPublisher(apiKey, 'myPublisherDiv');
        session.publish(publisher);
      }

    </script>

My question is: how i can build a second div with the video stream taken from iphone inside the web page app? And another thing who confuse me a lot is: in all case i have to setup my server with the SDK?

Answer 1

You can have everybody connect to the same session. When you get connectionCreated event, store it in an object. When its a person's turn, signal him to start publishing and then subscribe to his stream:

For example, on operator's side:

var connections = {};
session.on('connectionCreated', function(event){
  connections[event.connection.connectionId] = event.connection.connectionId;
  // Create a button for that stream
});

When operator clicks on the stream that he wants to connect to,

// retrieve streamId from button, disconnect from other streams
session.signal(
  {
    type: "publish", 
    data: "operator", 
    to: connections[connectionIdFromButton]
  }, 
  function(){...}
);

When user gets the signal, start publishing.

session.on("signal:publish", function(event){
  session.publish(...)
});