Fiddle to demonstrate handling of messages from CrankWheel in iframe

by joisig

HTML

<div id="messages"></div>
<iframe id="theframe" src="" width="100%" height="300rem">
</iframe>

JavaScript

// This Fiddle shows how to listen for messages from a CrankWheel
// session in an iframe.
//
// The key bits are the bindEvent implementation (if you want to maintain)
// compatibility with IE8) and the way the message is unpacked from the 
// event object (event object e, then your message type is e.data.type
// and for the post-session URL it is e.data.post_session_url).


// addEventListener support for IE8
function bindEvent(element, eventName, eventHandler) {
  if (element.addEventListener){
    element.addEventListener(eventName, eventHandler, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, eventHandler);
  }
}

function addMessage(msg) {
	var messagesElement = document.getElementById('messages');
  var span = document.createElement("p");
  var text = document.createTextNode(msg);
  span.appendChild(text);
  messagesElement.appendChild(span);
}

addMessage("Messages will appear below:");
var startUrl = prompt("Where to, Captain? (e.g. URL to CrankWheel session):");
document.getElementById('theframe').src = startUrl;

function makeDimensionStr(msg) {
  return '(' + msg.width + ',' + msg.height + ')';
}

// Listen to messages from child window
bindEvent(window, 'message', function (e) {
  var msg = e.data;
  if (msg.type == 'cw.session.ended') {
  	addMessage('Got session ended message. Post-session URL is ' +
               msg.post_session_url);
  } else if (msg.type == 'cw.video.ongoing') {
    var dimensionStr = makeDimensionStr(msg);
  	if (msg.mode == 'rtc') {
    	addMessage('RTC video is ongoing ' + dimensionStr);
    } else if (msg.mode == 'normal') {
    	addMessage('Normal mode video just updated to new frame ' + dimensionStr);
    } else if (msg.mode == 'basic') {
      addMessage('Basic mode video (for older browsers), just updated to new frame ' + dimensionStr);
    }
  } else if (msg.type == 'cw.video.resize') {
    addMessage('Video resizing without new frame ' + makeDimensionStr(msg));
  }
});