Skip to content

Instantly share code, notes, and snippets.

@trshafer

trshafer/index.html

Last active August 29, 2015 14:07
Show Gist options
  • Save trshafer/6b1fc03ac6e8dfa4fb17 to your computer and use it in GitHub Desktop.
Save trshafer/6b1fc03ac6e8dfa4fb17 to your computer and use it in GitHub Desktop.
Download ZIP
publish with onTextData
Raw
readme.md
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-type" content="text/html; charset=us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="" />
<title>ActionScript Publisher</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" media="screen" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic|Play:400,700|Oswald:300|Raleway:100,300" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
input {
width: 100%;
}
button {
margin-top: 1em;
}
#publisher > h3 {
text-align: center;
}
#status {
color: blue;
margin-bottom: 1em;
}
#publisher{
outline: 1px dotted red;
}
</style>
</head>
<body>
<div class="container">
<div class="row preview">
<div id="name" class="col-md-12">
<h2 class="">Publish with onTextData</h2>
</div>
</div>
<div class="row">
<div id="status" class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-4">
<form class="form-horizontal">
<div class="control-group advanced" _style="display: none;">
<label class="control-label" for="serverUrl">RTMP URL:</label>
<div class="controls">
<input type="text" id="serverUrl" name="serverUrl" value="rtmp://localhost:1935/live">
</div>
</div>
<div class="control-group advanced" _style="display: none;">
<label class="control-label" for="streamName">Stream Name</label>
<div class="controls">
<input type="text" id="streamName" name="streamName" value="myStream">
</div>
</div>
<div class="control-group">
<label class="control-label" for="streamKey">Audio Type</label>
<div class="controls">
<select id="audioCodec" name="audioCodec">
<option value="Speex">Speex</option>
<option value="NellyMoser" selected>NellyMoser</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="resolution">Resolution</label>
<div class="controls">
<div class="row">
<div class="col-md-4">
<input type="text" id="streamWidth" name="streamWidth" value="720">
</div>
<div class="col-md-2">x</div>
<div class="col-md-4">
<input type="text" id="streamHeight" name="streamHeight" value="404">
</div>
<div class="col-md-2">pixels</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="videoSettings">Video Settings</label>
<div class="controls">
<div class="row">
<div class="col-md-4">
<input type="text" id="streamFPS" name="streamFPS" value="15">
</div>
<div class="col-md-8">fps</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" id="keyFrameInterval" name="keyFrameInterval" value="10">
</div>
<div class="col-md-8">seconds (keyframe interval)</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" id="bandwidth" name="bandwidth" value="1500">
</div>
<div class="col-md-8">Kbps</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" id="videoQuality" name="videoQuality" value="75">
</div>
<div class="col-md-8">% (quality)</div>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="col-md-5 btn btn-success start-btn">Start</button>
<button class="col-md-5 col-md-offset-2 btn btn-danger stop-btn">Stop</button>
</div>
</div>
</form>
</div>
<div class="col-md-7 col-md-offset-1">
<div id="publisher">
<h3>If your browser supports streaming, you'll<br>see the recorded video here.</h3>
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
$(function() {
var swfVersionStr = "11.4.0"
, xiSwfUrlStr = "playerProductInstall.swf"
, flashvars = {}
, params = {}
, attributes = {}
params.allowscriptaccess = "sameDomain"
params.allowfullscreen = "true"
attributes.id = "publisher"
attributes.name = "Publisher"
attributes.align = "middle"
swfobject.embedSWF(
"publisher.swf", "publisher", "640", "400",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes,
function(embedEvent) {
if (embedEvent.success) {
// need to wait a bit until initialization finishes
setTimeout(function() {
embedEvent.ref.setOptions({
jsLogFunction: "console.log",
jsEmitFunction: "handleEmit" }
)
}, 2000)
updateStatus("Configure your stream, then press start.")
}
}
)
$('.start-btn').on('click', function(event) {
event.preventDefault()
var $form = $(this).closest('form')
, publisher = $('#publisher')[0]
, fps = parseInt($form.find('#streamFPS').val())
, intervalSecs = parseInt($form.find('#keyFrameInterval').val())
, options = {
serverURL: $form.find('#serverUrl').val()
, streamName: $form.find('#streamName').val()
, streamKey: $form.find('#streamKey').val()
, audioCodec: $form.find('#audioCodec').val()
, streamWidth: parseInt($form.find('#streamWidth').val())
, streamHeight: parseInt($form.find('#streamHeight').val())
, streamFPS: fps
, keyFrameInterval: fps * intervalSecs
, bandwidth: parseInt($form.find('#bandwidth').val()) * 1024 * 8
, videoQuality: parseInt($form.find('#videoQuality').val())
}
publisher.setOptions(options)
publisher.start()
window.x = publisher
})
$('.stop-btn').on('click', function(event) {
event.preventDefault()
var publisher = $('#publisher')[0]
publisher.stop()
})
})
function handleEmit(event) {
switch(event) {
case "connect":
case "disconnect":
case "publish":
case "status":
case "error":
updateStatus(Array.prototype.slice.call(arguments, 1))
break
default:
console.log(Array.prototype.slice.call(arguments, 1))
}
}
function updateStatus(message) {
var $statusDiv = $('#status')
$statusDiv.text(message)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment