Notice: Firmware Links Under Maintenance We are currently undergoing maintenance on all firmware links. If any links are inaccessible, please email or contact Tech Support for the firmware. We appreciate your patience during the maintenance, thank you for your understanding.

Difference between revisions of "Test LiveFeed"

(LiveFeed Test)
(2)
Line 46: Line 46:
 
</html>
 
</html>
 
==2==
 
==2==
<html><?xml version="1.0" encoding="utf-8"?>
+
<!DOCTYPE html>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+
<html lang="en">
  xmlns:s="library://ns.adobe.com/flex/spark"
+
<head>
  xmlns:mx="library://ns.adobe.com/flex/mx"
+
    <meta charset="UTF-8">
  xmlns:views="rtmfptest.views.*"
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
  backgroundColor="#F2F0F0"
+
    <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
  width="450"
+
    <link rel="stylesheet" href="../../dependencies/bootstrap/font-awesome/css/font-awesome.min.css">
  height="592" creationComplete="init()" xmlns:local="*">
+
    <link rel="stylesheet" href="jquery-ui.css">
<fx:Declarations>
+
    <link rel="stylesheet" href="player.css">
+
 
</fx:Declarations>
+
    <title>Player</title>
+
    <script type="text/javascript" src="../../../../flashphoner.js"></script>
<fx:Style>
+
    <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
.header {
+
    <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>
fontSize: 36px;
+
    <script type="text/javascript" src="../../dependencies/js/utils.js"></script>
}
+
 
</fx:Style>
+
    <script type="text/javascript" src="player.js"></script>
+
    <!-- Bootstrap JS -->
<fx:Script>
+
    <script src="../../dependencies/bootstrap/js/bootstrap.js"></script>
<![CDATA[
+
</head>
import mx.core.UIComponent;
+
<body onload="init_page()">
import mx.utils.StringUtil;
+
<div class="container">
private var nc:NetConnection;
+
    <div class="row">
private var cam:Camera;
+
 
private var mic:Microphone;
+
        <h2 class="text-center col-sm-10">Player</h2>
private var videoFarEnd:Video;
+
 
private var publishStream:NetStream;
+
        <h2 id="notifyFlash" class="text-danger"></h2>
private var subscribeStream:NetStream;
+
 
private var subscribeStreamObject:Object;
+
        <div class="col-sm-10 text-center">
+
            <div class="fp-remoteVideo">
private function init():void{
+
                <div class="display" id="remoteVideo">
+
                    <i id="preloader" class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true" style="position: absolute; top: 43%; left: 47.5%;"></i>
if (ExternalInterface.available) {
+
                </div>
try {
+
            </div>
var href:String = ExternalInterface.call("window.location.href.toString");
+
 
var hostname:String = ExternalInterface.call("window.location.hostname.toString");
+
        </div>
connectUrl.text = "rtmp://" + hostname + ":1935";
+
        <div class="col-sm-8 text-center col-sm-offset-2" style="margin-top: 20px">
} catch (error:Error) {
+
            <form id="form" class="form-horizontal" role="form" style="margin-top: 10px">
Logger.info(error.message);
+
                <div id="connForm" class="form-group">
}
+
                    <label class="col-sm-2 control-label">WCS URL</label>
} else {
+
                    <div class="col-sm-4">
Logger.info("Error during set callback");
+
                        <input type="text" class="form-control" id="url">
}
+
                    </div>
cam = Camera.getCamera();
+
                </div>
videoMy.attachCamera(cam);
+
                <div id="playForm" class="form-group">
mic = Microphone.getEnhancedMicrophone();
+
                    <label class="col-sm-2 control-label">Stream</label>
videoFarEnd = new Video();
+
                    <div class="col-sm-4">
var container:UIComponent = new UIComponent();
+
                        <input type="text" class="form-control" id="streamName">
container.addChild(videoFarEnd);
+
                    </div>
canvas.addChild(container);
+
                </div>
playBtn.enabled = false;
+
                <div id="volume" class="form-group">
publishBtn.enabled = false;
+
                    <label class="col-sm-2 control-label">Volume</label>
stopBtn.visible = false;
+
                    <div class="col-sm-4" style="height: 34px !important;">
unpublishBtn.visible = false;
+
                        <div id="volumeControl" style="margin-top: 12px"></div>
disconnectBtn.visible = false;
+
                    </div>
var streamName:String = generateRandomString(4);
+
                </div>
publishStreamName.text = "Stream-"+streamName;
+
                <div id="fullScreen" class="form-group">
playStreamName.text = "Stream-"+streamName;
+
                    <label class="col-sm-2 control-label">Full Screen</label>
+
                    <div class="col-sm-1" >
}
+
                        <button type="button" class="btn btn-default btn-sm" id="fullScreenBtn">
+
                            <span class="glyphicon glyphicon-fullscreen"></span>
// Reset button's state, clear status
+
                        </button>
private function reset():void {
+
                    </div>
connectBtn.visible = true;
+
                </div>
disconnectBtn.visible = false;
+
                <div class="form-group">
+
                    <div class="col-sm-4 control-label">
unpublishBtn.visible = false;
+
                        <div id="status"></div>
+
                        <div id="info"></div>
publishBtn.enabled = false;
+
                    </div>
publishBtn.visible = true;
+
                    <div class="col-sm-2 text-right">
+
                        <button id="playBtn" type="button" class="btn btn-default">Start</button>
playBtn.visible = true;
+
                    </div>
playBtn.enabled = false;
+
                </div>
+
            </form>
stopBtn.visible = false;
+
        </div>
+
    </div>
setPublishStatus("");
+
    <div class="row" style="margin-top: 70px;">
setPlayStatus("");
+
        <div class="col-sm-4">
}
+
            <a href="https://play.google.com/store/apps/details?id=com.flashphoner.wcsexample.player"><img src="../../dependencies/img/google_play.jpg" title="Google Play" alt="Google Play"></a>
+
        </div>
private function initCam():void{
+
    </div>
cam.setMode(int(camWidth.text),int(camHeight.text),int(camFPS.text),true);
+
</div>
cam.setQuality(0,int(camQuality.text));
+
</body>
cam.setKeyFrameInterval(int(camKeyFrame.text));
+
</html>
cam.setMotionLevel(0,2000);
 
Logger.info("Cam initizlized "+cam.width+"x"+cam.height);
 
}
 
 
private function initMic():void{
 
var options:MicrophoneEnhancedOptions = new MicrophoneEnhancedOptions();
 
options.mode = MicrophoneEnhancedMode.FULL_DUPLEX;
 
options.echoPath = 128;
 
options.nonLinearProcessing = true;
 
mic.codec = SoundCodec.SPEEX;
 
mic.encodeQuality = 5;
 
mic.framesPerPacket=1;
 
mic.gain=50;
 
mic.setSilenceLevel(0,2000);
 
mic.enhancedOptions = options;
 
Logger.info("Mic initialized");
 
}
 
 
/**
 
* **************************
 
* CONNECT / DISCONNECT
 
* **************************
 
**/
 
private function connect():void{
 
var url:String = StringUtil.trim(connectUrl.text);
 
Logger.info("connect " + url);
 
nc = new NetConnection();
 
//if (url.indexOf("rtmp") == 0){
 
// nc.objectEncoding = ObjectEncoding.AMF0;
 
//}
 
nc.client = this;
 
nc.addEventListener(NetStatusEvent.NET_STATUS, handleConnectionStatus);
 
var obj:Object = new Object();
 
obj.login = generateRandomString(20);
 
obj.appKey  = "flashStreamingApp";
 
nc.connect(url,obj);
 
}
 
 
 
 
//disconnect
 
private function disconnect():void{
 
Logger.info("disconnect");
 
nc.close();
 
}
 
 
private function handleConnectionStatus(event:NetStatusEvent):void{
 
Logger.info("handleConnectionStatus: "+event.info.code);
 
if (event.info.code=="NetConnection.Connect.Success"){
 
Logger.info("near id: "+nc.nearID);
 
Logger.info("far id: "+nc.farID);
 
Logger.info("Connection opened");
 
disconnectBtn.visible = true;
 
connectBtn.visible = false;
 
playBtn.enabled = true;
 
publishBtn.enabled = true;
 
setConnectionStatus("CONNECTED");
 
} else if (event.info.code=="NetConnection.Connect.Closed" || event.info.code=="NetConnection.Connect.Failed"){
 
nc.removeEventListener(NetStatusEvent.NET_STATUS,handleConnectionStatus);
 
unpublish();
 
stop();
 
Logger.info("Connection closed");
 
setConnectionStatus("DISCONNECTED");
 
reset();
 
}
 
}
 
 
private function setConnectionStatus(event:String): void {
 
connectionStatus.text = event;
 
}
 
 
/**
 
* *************************
 
* PUBLISH / UNPUBLISH
 
* *************************
 
**/
 
private function publish():void{
 
if (publishStreamName.text == "") {
 
publishStatus.text = "Empty stream name";
 
publishStatus.setStyle("color","#FF0000");
 
return;
 
}
 
publishStatus.setStyle("color","#000000");
 
Logger.info("publish audio: "+publishAudio.selected+" video: "+publishVideo.selected);
 
publishStream = new NetStream(nc);
 
if (publishAudio.selected){
 
initMic();
 
publishStream.attachAudio(mic);
 
Logger.info("Init audio stream");
 
}
 
if (publishVideo.selected){
 
initCam();
 
publishStream.attachCamera(cam);
 
addH264();
 
Logger.info("Init video stream");
 
}
 
addListenerAndPublish();
 
Logger.info("Publishing");
 
 
}
 
 
//unpublish
 
private function unpublish():void{
 
Logger.info("unpublish");
 
if (publishStream!=null){
 
publishStream.close();
 
}
 
videoFarEnd.clear();
 
}
 
 
private function addListenerAndPublish():void{
 
publishStream.videoReliable=true;
 
publishStream.audioReliable=false;
 
publishStream.useHardwareDecoder=true;
 
publishStream.addEventListener(NetStatusEvent.NET_STATUS, handleStreamStatus);
 
publishStream.bufferTime=0;
 
publishStream.publish(publishStreamName.text);
 
}
 
 
public function addH264():void{
 
var videoStreamSettings:H264VideoStreamSettings = new H264VideoStreamSettings();
 
videoStreamSettings.setProfileLevel(H264Profile.MAIN,H264Level.LEVEL_3_1);
 
publishStream.videoStreamSettings = videoStreamSettings;
 
}
 
 
private function setPublishStatus(event:String): void {
 
publishStatus.text = event;
 
}
 
 
/**
 
* *************************
 
* PLAY / STOP
 
* *************************
 
**/
 
private function play():void{
 
if (playStreamName.text == "") {
 
playStatus.text = "Empty stream name";
 
playStatus.setStyle("color","#ff0000");
 
return;
 
}
 
playBtn.enabled = false;
 
playStatus.setStyle("color","#000000");
 
Logger.info("play");
 
subscribeStream = new NetStream(nc);
 
addListenerAndPlay();
 
}
 
 
private function stop():void{
 
if (subscribeStream != null) {
 
stopBtn.enabled = false;
 
subscribeStream.close();
 
subscribeStream = null;
 
}
 
subscribeStreamObject = null;
 
videoFarEnd.visible = false;
 
}
 
 
private function addListenerAndPlay():void{
 
subscribeStream.videoReliable=true;
 
subscribeStream.audioReliable=false;
 
subscribeStream.useHardwareDecoder=true;
 
subscribeStream.addEventListener(NetStatusEvent.NET_STATUS, handleSubscribeStreamStatus);
 
if (playStreamName.text.indexOf("rtsp://") != -1) {
 
subscribeStream.bufferTime=0.5;
 
} else {
 
subscribeStream.bufferTime=0.0;
 
}
 
var soundTransform:SoundTransform = new SoundTransform();
 
soundTransform.volume=0.7;
 
subscribeStream.soundTransform = soundTransform;
 
subscribeStreamObject = createStreamObject();
 
subscribeStream.play(playStreamName.text);
 
videoFarEnd.attachNetStream(subscribeStream);
 
videoFarEnd.width = 320;
 
videoFarEnd.height = 240;
 
videoFarEnd.visible = true;
 
}
 
 
private function createStreamObject():Object{
 
var ret:Object = new Object();
 
ret.mediaSessionId = generateRandomString(8);
 
ret.name = playStreamName.text;
 
return ret;
 
}
 
 
private function generateRandomString(strlen:Number):String{
 
var chars:String = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 
var num_chars:Number = chars.length - 1;
 
var randomChar:String = "";
 
 
for (var i:Number = 0; i < strlen; i++){
 
randomChar += chars.charAt(Math.floor(Math.random() * num_chars));
 
}
 
return randomChar;
 
}
 
 
private function setPlayStatus(event:String): void {
 
playStatus.text = event;
 
}
 
 
/**
 
* ****************************
 
* HANDLE CONNECTION STATE
 
* ****************************
 
**/
 
 
private function handleStreamStatus(event:NetStatusEvent):void{
 
Logger.info("handleStreamStatus: "+event.info.code);
 
switch (event.info.code) {
 
case "NetStream.Failed":
 
Logger.info("Publish failed");
 
if (publishStream!=null){
 
publishStream.close();
 
publishStream.removeEventListener(NetStatusEvent.NET_STATUS, handleStreamStatus);
 
publishStream=null;
 
}
 
videoFarEnd.clear();
 
setPublishStatus("PUBLISH STREAM FAILED");
 
break;
 
case "NetStream.Publish.BadName":
 
Logger.info("Bad streamName. Please publish stream with other name");
 
setPublishStatus("PUBLISH STREAM FAILED");
 
break;
 
case "NetStream.Unpublish.Success":
 
publishStream.removeEventListener(NetStatusEvent.NET_STATUS, handleStreamStatus);
 
publishStream=null;
 
setPublishStatus("UNPUBLISHED");
 
publishBtn.visible = true;
 
unpublishBtn.visible = false;
 
break;
 
case "NetStream.Publish.Start":
 
setPublishStatus("PUBLISHING");
 
publishBtn.visible = false;
 
unpublishBtn.visible = true;
 
break;
 
}
 
}
 
 
private function handleSubscribeStreamStatus(event:NetStatusEvent):void{
 
Logger.info("handleSubscribeStreamStatus: "+event.info.code);
 
switch (event.info.code) {
 
case "NetStream.Play.PublishNotify":
 
case "NetStream.Play.Start":
 
setPlayStatus("PLAYING");
 
playBtn.visible = false;
 
stopBtn.enabled = true;
 
stopBtn.visible = true;
 
break;
 
case "NetStream.Play.UnpublishNotify":
 
case "NetStream.Play.Stop":
 
setPlayStatus("STOPPED");
 
playBtn.enabled = true;
 
playBtn.visible = true;
 
stopBtn.visible = false;
 
break;
 
case "NetStream.Play.StreamNotFound":
 
setPlayStatus("STREAM NOT FOUND");
 
playBtn.enabled = true;
 
playBtn.visible = true;
 
stopBtn.visible = false;
 
break;
 
case "NetStream.Play.Failed":
 
setPlayStatus("STREAM FAILED");
 
playBtn.enabled = true;
 
playBtn.visible = true;
 
stopBtn.visible = false;
 
break;
 
}
 
}
 
 
private function asyncErrorHandler(event: AsyncErrorEvent):void{
 
Logger.info("asyncErrorHandler: "+event);
 
}
 
 
private function securityErrorHandler(event: SecurityErrorEvent):void{
 
Logger.info("securityErrorHandler: "+event);
 
}
 
public function ping():void{
 
nc.call("pong", null);
 
}
 
 
public function OnDataEvent(data:Object):void{
 
var message:Object = data.payload;
 
Logger.info(message.body);
 
}
 
 
/**
 
*************************
 
*  JavaScript callbacks
 
*************************
 
**/
 
 
private function getDataFromJS(value:String):void {
 
if (value != null || value != "") {
 
connectUrl.text = value;
 
}
 
}
 
 
]]>
 
</fx:Script>
 
<s:Label x="96" y="34" width="265" styleName="header" text="Flash Streaming"/>
 
<!-- connect / disconnect -->
 
<s:Button id="connectBtn" x="325" y="93" width="90" label="Login" click="connect()"/>
 
<s:TextInput id="publishStreamName" x="99" y="143" width="199" text="StreamName"/>
 
<s:Button id="disconnectBtn" x="325" y="93" label="Logout" click="disconnect()" width="90" enabled="true"/>
 
<s:TextInput id="connectUrl" x="99" y="93" width="200"/>
 
 
<!-- publish / unpublish -->
 
<s:Button id="publishBtn" x="326" y="143" label="Start" width="90" height="21" click="publish()" enabled="true"/>
 
<s:CheckBox id="publishAudio" x="146" y="505" label="audio" selected="true" />
 
<s:CheckBox id="publishVideo" x="223" y="505" label="video" selected="true"/>
 
 
<s:Label x="120" y="561" text="width"/>
 
<s:TextInput id="camWidth" x="120" y="531" width="32" text="320"/>
 
 
<s:Label x="159" y="561" text="height"/>
 
<s:TextInput id="camHeight" x="160" y="531" width="31" text="240"/>
 
 
<s:Label x="206" y="561" text="fps"/>
 
<s:TextInput id="camFPS" x="200" y="531" width="31" text="15"/>
 
 
<s:Label x="240" y="561" text="quality"/>
 
<s:TextInput id="camQuality" x="240" y="531" width="31" text="80"/>
 
 
<s:Label x="279" y="561" text="keyframe"/>
 
<s:TextInput id="camKeyFrame" x="280" y="531" width="31" text="15"/>
 
 
<!-- play / stop -->
 
<s:Button id="playBtn" x="325" y="193" label="Start" width="90" height="21" click="play()" enabled="true"/>
 
 
<!-- video view -->
 
<mx:Canvas id = "canvas" visible="true" x="65" y="257" width="320" height="240">
 
<mx:VideoDisplay id="videoMy" visible="true" x="0" y="0" width="80" height="60"  chromeColor="#EEA1A1"/>
 
</mx:Canvas>
 
<s:Label x="35" y="143" width="56" height="22" text="Publish" verticalAlign="middle"/>
 
<s:Label x="35" y="93" width="89" height="22" text="Server:" verticalAlign="middle"/>
 
<s:TextInput id="playStreamName" x="99" y="193" width="199" text="StreamName"/>
 
<s:Label x="35" y="193" height="22" text="Play" verticalAlign="middle"/>
 
<s:Button id="unpublishBtn" x="326" y="143" label="Stop" click="unpublish()" width="90" enabled="true"/>
 
<s:Button id="stopBtn" x="325" y="193" label="Stop" width="90" height="21" click="stop()" enabled="true"/>
 
<s:Label id="connectionStatus" x="123" y="119" width="150" height="20" textAlign="center"
 
verticalAlign="top"/>
 
<s:Label id="publishStatus" x="123" y="169" width="150" height="20" textAlign="center"
 
verticalAlign="middle"/>
 
<s:Label id="playStatus" x="123" y="219" width="150" height="20" textAlign="center"
 
verticalAlign="middle"/>
 
</s:Application></html>
 

Revision as of 18:40, 4 September 2018

LiveFeed Test

<!DOCTYPE html> Display Webcam Stream

2

<!DOCTYPE html> Player

Player

Google Play