OpenTok Api Rozsyłanie wideo na stronie internetowej

Question

Używam opentok i połączę się z usługą nadawania i otrzymuję obiekt flash player na dole strony.

Jak mogę umieścić go w konkretnym div ..

Jest to kod używam do łączenia 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> 

Brałem div, aby pokazać wszystkie postępy.

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

Łączy mnie z moimi filmami wideo i prosi o pozwolenie, ale zajmuje to samo miejsce, nie według mojego projektu.

Answer 1

Myślę, że powinieneś dodać parametr replaceElementId i ustawić jego wartość na id div, który powinien zostać zastąpiony przez odtwarzacz. Przykład: Jeśli chcesz, aby załadować odtwarzacza wewnątrz #container div zdefiniować div #replaceElementId wewnątrz #container które zostaną zastąpione przez gracza:

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

Answer 2

Trzeba to identyfikator elementu, który zostaną zastąpione w DOM (tutaj jest na przykład replaceElementId)

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

zmodyfikować 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 }); 
     } 
    } 
} 

Jak widać, można nawet zdefiniować własny rozmiar strumienia wideo lub inne zmiany GUI.

Więcej informacji na oficjalnych docs TokBox API:Session