Javascript OpenTok Api在网页中广播视频放置

我正在使用opentok并连接到广播服务，在页面底部获取flash player的对象

我如何将其放置在特定的分区中

这是我用来连接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>

函数初始化调用（）{
如果（会话！=未定义）{
如果（！iscalled）{
session.addEventListener（“sessionConnected”，sessionConnectedHandler）；
session.addEventListener（“streamCreated”，streamCreatedHandler）；
session.connect（“21457612”，token_id）；//替换为API密钥和令牌。请参阅https://dashboard.tokbox.com/projects
//及https://dashboard.tokbox.com/projects
iscalled=true；
$.ajax({
数据：“{”ChatId:“'+chat_id+”，“NurseId:“'+NurseId+”，“DeviceType:“Browser”}，
类型：“POST”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
url:“someurl.asmx/MakeCall”，
成功：函数（数据）{initiatecall（聊天室id、会话id、令牌id）；}，
eror：函数（a，b，c）{alert（a.responseText）；}
});
}
}否则{
警报（“会话已过期！！”；
}
}
函数sessionConnectedHandler（事件）{
subscribeToStreams（event.streams）；
session.publish（）；
}
函数streamCreatedHandler（事件）{
subscribeToStreams（event.streams）；
}
函数subscribeToStreams（streams）{
对于（i=0；i集线器已启动…”）；
initiatecall（）；
$（“#info”）.append（“
呼叫启动…”）；
发送（chat_id+'、'+会话_id+'、'+令牌_id+'、'+'）；
$（“#info”）.append（“
广播消息…”）；
//$（'MainContent'u connected'）.text（'connected to chat room'）；
});
//在聊天中心上声明一个函数，以便服务器可以调用它
chat.addMessage=功能（消息）{
//警报（信息）；
//$（“#消息”）.append（“
”+消息+”
”）；
};
});

我拍了一张照片来展示所有的进展

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

---

它将我连接到我的视频并请求许可，但它会自行取代我的设计。

我认为您应该添加参数

replaceElementId

，并将其值设置为应该用播放器替换的div的id。 示例：如果要在#容器div中加载播放机，请在将被播放机替换的#容器中定义一个div#replacementId：

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

---

您必须包含将在DOM中被替换的元素的ID（例如replaceElementId）

修改您的会话。订阅

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

函数subscribeTostream（流）{
对于（i=0；i

正如您所看到的，您甚至可以定义自己的视频流大小或其他GUI更改

---

官方文档中的更多信息

已经尝试了此操作，但播放器始终显示在底部。如果我能看看您的场景，将会很有帮助。你能把代码放到网上吗？

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