Switching Local Stream Displays

Ask any questions or talk about OpenTok here!
Topic locked

Re: Switching Local Stream Displays

Postby SuperBill » Thu Feb 07, 2013 6:16 pm

full code:



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head>
<style type="text/css">
.small > * { width: 100%; height: 100%; }
</style>
<title>OpenTok Getting Started</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.opentok.com/v0.91/js/TB.min.js"></script>



<script type="text/javascript">
var apiKey = '<? echo $API; ?>';
var sessionId = '<? echo $SESSION ?>';
var token = '<? echo $TOKEN ?>';
var id = '<? echo $id ?>';
TB.setLogLevel(TB.DEBUG); // Set this for helpful debugging messages in console

var session = TB.initSession(sessionId);
session.addEventListener('sessionConnected', sessionConnectedHandler);
session.addEventListener('streamCreated', streamCreatedHandler);
session.connect(apiKey, token);



var publisher;

function sessionConnectedHandler(event) {
// Put my webcam in a div
// var publishProps = {height:200, width:486};

var parentDiv = document.getElementById('shoe');
var div = document.createElement('div');
div.setAttribute('id',"opentok_publisher");
parentDiv.appendChild(div);
// var b = document.getElementById('opentok_publisher');
// alert(b.id);
publisher = TB.initPublisher(apiKey, div.id);
// Send my stream to the session
session.publish(publisher);
$("#opentok_publisher").addClass("small");
subscribeToStreams(event.streams);
}

function streamCreatedHandler(event) {
// Subscribe to any new streams that are created
subscribeToStreams(event.streams);
}

function subscribeToStreams(streams) {
for (var i = 0; i < streams.length; i++) {
// Make sure we don't subscribe to ourself
if (streams[i].connection.connectionId == session.connection.connectionId) {
return;
}

// Create a div for the subscriber to replace
var parentDiv = document.getElementById("b" + i);
// var subscriberDiv = document.createElement("div");
// subscriberDiv.id = "opentok_subscriber_" + i;
// parentDiv.appendChild(subscriberDiv);

var subscriberProps = {width: "486",
height: "200",
subscribeToAudio: true};
session.subscribe(streams[i], parentDiv.id, subscriberProps);
//subscriber_width[x]
var aLink = document.getElementById("label_" + i);
aLink.innerHTML = "<a href='javascript: unsubscribe(" + streams[i].streamId + ")'>UnSubscribe</a>";
// aLink.innerHTML = "Unsubscribe";

var aLink = document.getElementById("sub_" + i);
// aLink.setAttribute('href', 'javascript: unsubscribe(' + streams[i] + ')');
aLink.innerHTML = "<a href='javascript: subscribe(" + streams[i].streamId + ")'>Subscribe</a>";
// Create the div to put the subscriber element in to

// var div = document.createElement('div');
// div.setAttribute('id', 'stream' + streams[i].streamId);
// document.body.appendChild(div);

// Subscribe to the stream
// session.subscribe(streams[i], div.id);
}
}

function subscribe(streamId) {
for (var i = 0; i < streams.length; i++) {

var stream = streams[i];
if (stream.streamId == streamId) {
session.unsubscribe(stream);

}
}
}

function unsubscribe(streamId) {
for (var i = 0; i < streams.length; i++) {
var stream = streams[i];
if (stream.streamId == streamId) {
session.unsubscribe(stream);
}
}
}


function end_session() {
//$.get('tok_update_class.php?id=' + id, function(data) {
// });

// MyOut = data.split("|")

//count = MyOut[0];
//seconds = MyOut[2];
//lapse = MyOut[3];


session.disconnect()

}

function MoveMe(a,b) {
var a;
var b;

a = document.getElementById(a);
b = document.getElementById(b);
if (a.style.top == "210px") {


a.style.top = "10px"
b.style.top = "210px"

} else {
a.style.top = "210px"
b.style.top = "10px"

var k = document.getElementById("opentok_publisher");
alert(k.id);
//k.height = "100"
//k.width = "50"

}
}
</script>

</head>

<body>




<div id="shoe" style="position: absolute; top: 10px; left: 3px; width: 486px; height: 200px; background-color: black">
</div>

<div id="book" style="position: absolute; top: 210px; left: 3px; width: 486px; height: 200px; background-color: white">
<div id="b0" ></div></div>

<div id="back" style="position: absolute; top: 420px; left: 3px; width: 400px; height: 150px; ">
<input type="button" onClick="MoveMe('shoe','book')" value="Switch">
</div>
</body>
</html>
Was this post helpful? (0)
SuperBill
 
Posts: 11
Joined: Tue Feb 05, 2013 7:48 pm
Thumbs Up: 0
Top

Re: Switching Local Stream Displays

Postby SuperBill » Thu Feb 07, 2013 6:21 pm

I think this should be

publisher = TB.initPublisher(apiKey, div.id);
// Send my stream to the session
session.publish(publisher);
$("#shoe").addClass("small");

still didn't display correctly.
Thanks,
Was this post helpful? (0)
SuperBill
 
Posts: 11
Joined: Tue Feb 05, 2013 7:48 pm
Thumbs Up: 0
Top

Re: Switching Local Stream Displays

Postby jtsai » Thu Feb 07, 2013 6:32 pm

Ah, internet explorer. It's probably not viewing it in IE9 standards.

But in order to fix this, you can add this code after the TB.initPublisher() line:

Code: Select all
publisher.addEventListener("accessAllowed", function() {
   var container = document.getElementById("shoe");
   for (var i = 0; i < container.childNodes.length; i++) {
      var node = container.childNodes[i];
      console.log(node.tagName);
      if (node.tagName == "OBJECT") {
         console.log("remove");
         node.setAttribute("width", "100%");
         node.setAttribute("height", "100%");
      }
   }
});
Was this post helpful? (0)
Very helpful resource: Devs Checklist
Examples with OpenTok: Examples
User avatar
jtsai
 
Posts: 1993
Joined: Wed Sep 14, 2011 3:00 pm
Thumbs Up: 157
Top

Re: Switching Local Stream Displays

Postby SuperBill » Thu Feb 07, 2013 6:50 pm

Shoot that seemed like it would work.
Still the same screen shot.
Thanks again.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head>

<title>OpenTok Getting Started</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.opentok.com/v0.91/js/TB.min.js"></script>



<script type="text/javascript">
var apiKey = '<? echo $API; ?>';
var sessionId = '<? echo $SESSION ?>';
var token = '<? echo $TOKEN ?>';
var id = '<? echo $id ?>';
TB.setLogLevel(TB.DEBUG); // Set this for helpful debugging messages in console

var session = TB.initSession(sessionId);
session.addEventListener('sessionConnected', sessionConnectedHandler);
session.addEventListener('streamCreated', streamCreatedHandler);
session.connect(apiKey, token);



var publisher;

function sessionConnectedHandler(event) {
// Put my webcam in a div
// var publishProps = {height:200, width:486};

var parentDiv = document.getElementById('shoe');
var div = document.createElement('div');
div.setAttribute('id',"opentok_publisher");
parentDiv.appendChild(div);
// var b = document.getElementById('opentok_publisher');
// alert(b.id);
publisher = TB.initPublisher(apiKey, div.id);

publisher.addEventListener("accessAllowed", function() {
var container = document.getElementById("shoe");
for (var i = 0; i < container.childNodes.length; i++) {
var node = container.childNodes[i];
console.log(node.tagName);
if (node.tagName == "OBJECT") {
console.log("remove");
node.setAttribute("width", "100%");
node.setAttribute("height", "100%");
}
}
});



// Send my stream to the session
session.publish(publisher);
// $("#shoe").addClass("small");
subscribeToStreams(event.streams);
}

function streamCreatedHandler(event) {
// Subscribe to any new streams that are created
subscribeToStreams(event.streams);
}

function subscribeToStreams(streams) {
for (var i = 0; i < streams.length; i++) {
// Make sure we don't subscribe to ourself
if (streams[i].connection.connectionId == session.connection.connectionId) {
return;
}

// Create a div for the subscriber to replace
var parentDiv = document.getElementById("b" + i);
// var subscriberDiv = document.createElement("div");
// subscriberDiv.id = "opentok_subscriber_" + i;
// parentDiv.appendChild(subscriberDiv);

var subscriberProps = {width: "486",
height: "200",
subscribeToAudio: true};
session.subscribe(streams[i], parentDiv.id, subscriberProps);
//subscriber_width[x]
var aLink = document.getElementById("label_" + i);
aLink.innerHTML = "<a href='javascript: unsubscribe(" + streams[i].streamId + ")'>UnSubscribe</a>";
// aLink.innerHTML = "Unsubscribe";

var aLink = document.getElementById("sub_" + i);
// aLink.setAttribute('href', 'javascript: unsubscribe(' + streams[i] + ')');
aLink.innerHTML = "<a href='javascript: subscribe(" + streams[i].streamId + ")'>Subscribe</a>";
// Create the div to put the subscriber element in to

// var div = document.createElement('div');
// div.setAttribute('id', 'stream' + streams[i].streamId);
// document.body.appendChild(div);

// Subscribe to the stream
// session.subscribe(streams[i], div.id);
}
}

function subscribe(streamId) {
for (var i = 0; i < streams.length; i++) {

var stream = streams[i];
if (stream.streamId == streamId) {
session.unsubscribe(stream);

}
}
}

function unsubscribe(streamId) {
for (var i = 0; i < streams.length; i++) {
var stream = streams[i];
if (stream.streamId == streamId) {
session.unsubscribe(stream);
}
}
}


function end_session() {
//$.get('tok_update_class.php?id=' + id, function(data) {
// });

// MyOut = data.split("|")

//count = MyOut[0];
//seconds = MyOut[2];
//lapse = MyOut[3];


session.disconnect()

}

function MoveMe(a,b) {
var a;
var b;

a = document.getElementById(a);
b = document.getElementById(b);
if (a.style.top == "210px") {


a.style.top = "10px"
b.style.top = "210px"

} else {
a.style.top = "210px"
b.style.top = "10px"

var k = document.getElementById("opentok_publisher");
alert(k.id);
//k.height = "100"
//k.width = "50"

}
}
</script>

</head>

<body>




<div id="shoe" style="position: absolute; top: 10px; left: 3px; width: 486px; height: 200px; background-color: black">
</div>

<div id="book" style="position: absolute; top: 210px; left: 3px; width: 486px; height: 200px; background-color: white">
<div id="b0" ></div></div>

<div id="back" style="position: absolute; top: 420px; left: 3px; width: 400px; height: 150px; ">
<input type="button" onClick="MoveMe('shoe','book')" value="Switch">
</div>
</body>
</html>
Was this post helpful? (0)
SuperBill
 
Posts: 11
Joined: Tue Feb 05, 2013 7:48 pm
Thumbs Up: 0
Top

Re: Switching Local Stream Displays

Postby jtsai » Thu Feb 07, 2013 7:31 pm

Oh, try getting rid of this line:

console.log(node.tagName);

I think IE might throw an error if the developer console isn't open with this line.

John
Was this post helpful? (0)
Very helpful resource: Devs Checklist
Examples with OpenTok: Examples
User avatar
jtsai
 
Posts: 1993
Joined: Wed Sep 14, 2011 3:00 pm
Thumbs Up: 157
Top

Re: Switching Local Stream Displays

Postby SuperBill » Thu Feb 07, 2013 7:39 pm

John,
It worked. Thanks alot for all your patience.
I really appreciate it.
Looks great.
Matt.
Was this post helpful? (0)
SuperBill
 
Posts: 11
Joined: Tue Feb 05, 2013 7:48 pm
Thumbs Up: 0
Top
Previous
Topic locked

Return to Discussion and Questions



Who is online

Users browsing this forum: No registered users and 1 guest

cron