${timestamp}: ${message}
`; + + // Update connected users count + var count = Object.keys(connectedUsers).length; + document.getElementById("user-count").textContent = count; +} + +// Add a user count display +var countDiv = document.createElement("div"); +countDiv.innerHTML = "Connected users: 0"; +document.body.insertBefore(countDiv, statusDiv); +``` + +## Waiting Room Example + +You can implement a waiting room like the one in the `waitingroom.html` file from your code samples: + +```javascript +// Setup event listener +var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; +var eventer = window[eventMethod]; +var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message"; +var waiting = null; + +eventer(messageEvent, function (e) { + if (e.source != iframe.contentWindow) return; + + if ("action" in e.data) { + if (e.data.action == "joining-room") { + // Show initial joining message + outputWindow.innerHTML = "JOINING ROOM"; + + // After 1 second, show waiting message if director hasn't joined + waiting = setTimeout(function() { + outputWindow.innerHTML = "Waiting for the director to join"; + outputWindow.classList.remove("hidden"); + }, 1000); + } + else if (e.data.action == "director-connected") { + // Director has joined, clear waiting message + clearTimeout(waiting); + outputWindow.innerHTML = ""; + outputWindow.classList.add("hidden"); + } + } +}); +``` + +## Getting Additional Information About Connections + +For more detailed information about connections, you can use the `getStreamIDs` or `getDetailedState` commands: + +```javascript +// Request info about all connected streams +iframe.contentWindow.postMessage({ "getStreamIDs": true }, "*"); + +// Request detailed state information +iframe.contentWindow.postMessage({ "getDetailedState": true }, "*"); +``` + +## Best Practices + +1. **Always check the source**: Make sure messages are coming from your VDO.Ninja iframe. +2. **Handle disconnections gracefully**: Sometimes connections drop unexpectedly. +3. **Consider implementing reconnection logic**: If important users disconnect, you might want to notify them or attempt to reconnect. +4. **Debug with console.log**: Log all events during development to understand the full message flow. +5. **Test with multiple users**: The behavior can be different depending on who connects first. + +By implementing these techniques, you can build sophisticated applications that respond to users joining and leaving your VDO.Ninja sessions, creating more interactive and responsive experiences. \ No newline at end of file diff --git a/examples/labelonly.html b/examples/labelonly.html new file mode 100644 index 0000000..642bd7f --- /dev/null +++ b/examples/labelonly.html @@ -0,0 +1,165 @@ + + + + + + +