OpenTok Api Posizionamento video trasmesso nella pagina web

Question

Sto usando opentok e connesso al servizio di trasmissione e ricevo l'oggetto del flash player nella parte inferiore della pagina.

Come posso metterlo in un particolare div ..

Questo è il codice che sto usando per connettersi a opentol API

function initiatecall() { 
      if (session != undefined) { 
       if (!iscalled) { 
        session.addEventListener("sessionConnected", sessionConnectedHandler); 
        session.addEventListener("streamCreated", streamCreatedHandler); 
        session.connect("21457612", token_id); // Replace with your API key and token. See https://dashboard.tokbox.com/projects 
        // and https://dashboard.tokbox.com/projects 
        iscalled = true; 

        $.ajax({ 
         data: '{"ChatId":"' + chat_id + '","NurseId":"' + nurse_id + '","DeviceType":"Browser"}', 
         type: "POST", 
         dataType: "json", 
         contentType: "application/json;charset=utf-8", 
         url: "someurl.asmx/MakeCall", 
         success: function (data) { initiatecall(chat_id, session_id, token_id); }, 
         eror: function (a, b, c) { alert(a.responseText); } 
        }); 

       } 
      } else { 
       alert("Session Expired!!"); 
      } 
     } 

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

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

     function subscribeToStreams(streams) { 
      for (i = 0; i < streams.length; i++) { 
       var stream = streams[i]; 
       if (stream.connection.connectionId != session.connection.connectionId) { 
        session.subscribe(stream); 
       } 
      } 
     } 

     function exceptionHandler(event) { 
      alert("Exception: " + event.code + "::" + event.message); 
     } 


     </script> 
    <!--End of code--> 
    <!--Signal R--> 
    <script type="text/javascript"> 
     $(function() { 

      //$.hubConnection.app.MapHubs(new HubConfiguration { EnableCrossDomain = true }); 
      // Proxy created on the fly 
      var chat = $.connection.chat 
      //var chat = $.connection.WebPushNotification; 
      //alert(chat); 
      // Start the connection 
      //   $.connection.hub.start(); 
      //port 1935 
      $.connection.hub.start({ transport: 'auto' }, function() { 
       //alert('connected'); 
       $("#info").append("<br/>Hub Started.."); 
       initiatecall(); 
       $("#info").append("<br/>Call Initiated.."); 
       chat.send(chat_id + ',' + session_id + ',' + token_id + ',' + '<%=Session["UserId"].ToString() %>'); 
       $("#info").append("<br/>Broadcasted Message.."); 
       //$('#MainContent_connected').text('Connected to chat room'); 
      }); 

      // Declare a function on the chat hub so the server can invoke it 
      chat.addMessage = function (message) { 
       //alert(message); 
       //$('#messages').append('<li>' + message + '</li>'); 
      }; 
     }); 

    </script> 

Ho preso un div per mostrare tutti i progressi.

<div id="info"> 
     </div> 

Mi collega ai miei video e chiedo il permesso ma prende il proprio posto non secondo il mio progetto.

Answer 1

Penso che dovresti aggiungere il parametro replaceElementId e impostare il suo valore su un ID div che deve essere sostituito con il lettore. Esempio: Se si desidera caricare il giocatore all'interno del #container div si definisce una #replaceElementId div all'interno del #container che verrà sostituito con il giocatore:

<div id="container"> 
    <div id="replaceElementId"></div> 
</div> 

Answer 2

Bisogna includere un ID dell'elemento che sarà sostituito nel DOM (qui è ad esempio replaceElementId)

<div id="container"> 
    <div id="replaceElementId"></div> 
</div> 

Modifica la session.subscribe

function subscribeToStreams(streams) { 
    for (i = 0; i < streams.length; i++) { 
     var stream = streams[i]; 
     if (stream.connection.connectionId != session.connection.connectionId) { 
      //This is where you have to make changes 
      //session.subscribe(stream); 

       session.subscribe(stream, "replaceElementId", 
        { width:640, height:480 }); 
     } 
    } 
} 

Come si può vedere si potrebbe anche definire la propria dimensione del flusso video o altre modifiche della GUI.

Maggiori informazioni su documentazione ufficiale TokBox API:Session