OpenTok Api Broadcast Video-Platzierung in Web-Seite

Question

Ich benutze opentok und verbunden mit dem Broadcast-Service und bekommen Objekt des Flash-Player am unteren Rand der Seite.

, wie ich es in einem bestimmten div platzieren ..

Dies ist der Code, den ich verbinden bin mit 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> 

ich ein div alle Fortschritte zeigen unternommen haben, um opentol.

Verbinden Sie mich mit meinen Videos und fragen Sie nach der Erlaubnis, aber es nimmt seinen eigenen Platz nicht nach meinem Entwurf.

Answer 1

Ich denke, dass Sie den Parameter replaceElementId hinzufügen und seinen Wert auf die ID eines div setzen sollten, die mit dem Player ersetzt werden sollte. Beispiel: Wenn Sie den Player in der #container laden möchten div Sie ein div #replaceElementId innerhalb des #container definieren, die mit dem Spieler ersetzt werden:

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

Answer 2

Sie haben eine ID des Elements aufzunehmen, die wird in Ihrem DOM ersetzt werden (hier ist zum Beispiel replaceElementId)

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

Ihre session.subscribe ändern

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

Wie Sie sehen konnten, konnten Sie sogar Ihre eigene Größe des Video-Streams oder andere GUI-Änderungen definieren.

Weitere Informationen unter offiziellen Dokumente TokBox API:Session