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

Retrieved from "https://DahuaWiki.com/index.php?title=Test_LiveFeed&oldid=34578"