thammi/palava-example.html

## palava-example.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Meine erste Videoapplikation</title>
  <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="https://raw.github.com/Wolfy87/EventEmitter/master/EventEmitter.min.js"></script>
  <script src="https://raw.github.com/palavatv/palava-client/master/palava.min.js"></script>
  <script type="text/coffeescript">

    # channel which transports the signaling messages
    channel = new palava.WebSocketChannel('wss://machine.palava.tv')

    # create a session to join a room
    session = new palava.Session
      roomId: "test"
      channel: channel

    # wait for your camera to get ready
    session.on 'local_stream_ready', (stream) ->
      # connect the video tag to your camera
      palava.browser.attachMediaStream($('#myvideo'), stream)
      # actually join the room
      session.room.join()

    # participants joined your room
    session.on 'peer_stream_ready', (peer) ->
      if peer.isLocal()
        # we already handled our own stream above
        return
      if $('#' + peer.id).length > 0
        # new participant
        element = $('#' + peer.id)
        $('#others').append(element)
      else
        # participant already present
        element = $('<li id="' + peer.id + '"><video autoplay></video></li>')
      # connect stream with video tag
      palava.browser.attachMediaStream(element.children('video')[0], peer.getStream())

    # clean up leaving participants
    session.on 'peer_left', (peer) ->
      $('#' + peer.id).remove()

    # start initialization process
    session.init
      identity: new palava.Identity
        userMediaConfig:
          audio: true
          video: true
      options:
        stun: 'stun:stun.palava.tv'
        joinTimeout: 500

  </script>
  <script type="text/javascript" src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
</head>
<body>
  <h2>Mein Video</h2>
  <video id="myvideo" autoplay></video>
  <h2>Andere Videos:</h2>
  <ul id="others"></ul>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Meine erste Videoapplikation</title>
	<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="https://raw.github.com/Wolfy87/EventEmitter/master/EventEmitter.min.js"></script>
	<script src="https://raw.github.com/palavatv/palava-client/master/palava.min.js"></script>
	<script type="text/coffeescript">

	# channel which transports the signaling messages
	channel = new palava.WebSocketChannel('wss://machine.palava.tv')

	# create a session to join a room
	session = new palava.Session
	roomId: "test"
	channel: channel

	# wait for your camera to get ready
	session.on 'local_stream_ready', (stream) ->
	# connect the video tag to your camera
	palava.browser.attachMediaStream($('#myvideo'), stream)
	# actually join the room
	session.room.join()

	# participants joined your room
	session.on 'peer_stream_ready', (peer) ->
	if peer.isLocal()
	# we already handled our own stream above
	return
	if $('#' + peer.id).length > 0
	# new participant
	element = $('#' + peer.id)
	$('#others').append(element)
	else
	# participant already present
	element = $('<li id="' + peer.id + '"><video autoplay></video></li>')
	# connect stream with video tag
	palava.browser.attachMediaStream(element.children('video')[0], peer.getStream())

	# clean up leaving participants
	session.on 'peer_left', (peer) ->
	$('#' + peer.id).remove()

	# start initialization process
	session.init
	identity: new palava.Identity
	userMediaConfig:
	audio: true
	video: true
	options:
	stun: 'stun:stun.palava.tv'
	joinTimeout: 500

	</script>
	<script type="text/javascript" src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
	</head>
	<body>
	<h2>Mein Video</h2>
	<video id="myvideo" autoplay></video>
	<h2>Andere Videos:</h2>
	<ul id="others"></ul>
	</body>
	</html>