Base64 img Strings

cheinan · Jul 28, 2017

Hello Max

This time its a challenging question...

A significant portion of our users are using old version of mobile devices,
With browsers witch is not sporting webRTC or neither Websocket.
To let these users play at list the video streaming without sound,
I am using FFmpeg to take 5 frames every second from the rmtp stream into string, witch i
split and convert into string array of 5 Base64 Strings.
Then the user using AJAX request every second, take these 5 Base64 img Strings
and run them on his HTML canvas.

All though Base64 img Strings and AJAX request are cumbersome, it is a good solution,
vary stable and giving smooth video of 5 frames per second, witch working good on
old mobile browsers.

Is there any way i can get from your server frames,
Lets say 5 frames every second, that i can convert to base64 img strings?

Thanks
Cheinan

Max · Jul 28, 2017

Hello

Currently this works via Websocket.
If you have connection to WCS using url wss://host:8443, you can request snapshot (thumbnail) by stream name.
The snapshot will be delivered as PNG image in Base64 format.
Here you can see the demo:
https://wcs5-eu.flashphoner.com/demo2/stream-snapshot
Here you can read article about implementation:
https://flashphoner.com/creating-a-preview-snapshots-thumbnails-of-a-webrtc-video-stream-in-png
Therefore you can take snapshot each 5 seconds.

As you can see, currently it works via websocket only. And it does not work over plain http / https.

cheinan · Jul 30, 2017

Hi Max
Is there any way to get the snapshot img data on server side?
Is there any way i can Reduce the snapshot size to be smaller then the video size?
If i cold not...
Can i connect to Adobe Media Server from Flashphoner server and sand stream to him?
If i cold not...
Can i connect to Flashphoner server from Adobe Media Server Like explained in this link:
https://www.codeproject.com/Articles/1106023/Migration-of-a-streaming-service-from-RTMP-to-WebR
?
Thanks
Cheinan

Max · Jul 30, 2017

Hi

Is there any way to get the snapshot img data on server side?

Yes as described here
https://flashphoner.com/creating-a-preview-snapshots-thumbnails-of-a-webrtc-video-stream-in-png
You request a snapshot and the snapshot is created by server.

Is there any way i can Reduce the snapshot size to be smaller then the video size?

No. Snapshot has the same resolution as publishing or playing stream with given name.

Can i connect to Adobe Media Server from Flashphoner server and sand stream to him?

Yes you can. You have to use push API.
Here you can read article how to push a stream to RTMP server
https://flashphoner.com/broadcast-video-stream-from-web-page-to-facebook-and-youtube-simultaneously/
See REST API method

Code:

/rest-api/push/startup

https://flashphoner.com/docs/wcs5/wcs_docs/html/en/wcs-rest-api/index.html?api_methods.htm

Can i connect to Flashphoner server from Adobe Media Server Like explained in this link

Yes you can. WCS operates as RTMP server. So you can pull WCS stream from Adobe AMS as RTMP.

cheinan · Aug 3, 2017

I try to connect to adobe media server from Flashphoner
and i get this error:
{
"timestamp":1501752865916,
"status":409,
"error":"Conflict",
"exception":"com.flashphoner.server.manager.controller.exception.ConflictException",
"message":"Transponder can't initialized",
"path":"/rest-api/push/startup"
}
Here is print screen of Google REST Console:

Maybe the format of the rtmp URL is not good?
It is working when FFmpeg connect to AMS
Any idea way i can get this error?
Thanks
Cheinan

Max · Aug 3, 2017

rtmpUrl looks incorrect
Try

Code:

rtmp://host:1935/flashphoner

Here 'host' is your AMS IP.
Because stream name is 'show8' and the stream name will be used in the re-publishing.

cheinan · Aug 3, 2017

On AMS server i made Application: flashphoner
in the file main.asc i have this code:
application.onConnect = function(client, vidID, showID, chatID, isMobile)
{
do something on connect...
}

from flash player i connect successfully like this:
nc.connect("rtmp://62.90.177.144/flashphoner", "919580", "8", "2758034", "0");
out_ns = new NetStream( nc );
out_ns.publish("show8", "live");

From FFmpeg i connect successfully like this:
process.StartInfo.Arguments = "-an -flv_metadata 1 -analyzeduration 1 -i \"rtmp://62.90.177.144/flashphoner/show8 conn=S:919580 conn=S:8 conn=S:2758034 conn=S:0 live=1\" -s 500*281 -r 5 -vframes 10 -f image2pipe -";

But from Flashphoner I try:
rtmp://62.90.177.144/flashphoner conn=S:919580 conn=S:8 conn=S:2758034 conn=S:0 live=1"
Or
rtmp://62.90.177.144/flashphoner/show8 conn=S:919580 conn=S:8 conn=S:2758034 conn=S:0 live=1"
And in both cases i get this error:
"status":409,
"error":"Conflict",
"exception":"com.flashphoner.server.manager.controller.exception.ConflictException",
"message":"Transponder can't initialized",
"path":"/rest-api/push/startup"

When i use only this:
{
"streamName": "show8",
"rtmpUrl": "rtmp://62.90.177.144/flashphoner"
}
i get no error:
{
"mediaSessionId":"hvnh8aae7j67j4um4q93gs9fra",
"streamName":"rtmp_show8",
"rtmpUrl":"rtmp://62.90.177.144/flashphoner",
"width":640,
"height":360,
"muted":false,
"soundEnabled":false,
"options":
{
So the problem is in the variable i send with the connection:
conn=S:919580 conn=S:8 conn=S:2758034 conn=S:0 live=1

Any idea how i need to send the variables?
Thanks
Cheinan

Max · Aug 3, 2017

Your rtmpUrl is incorrect. The URL is not valid:

Code:

rtmp://62.90.177.144/flashphoner conn=S:919580 conn=S:8 conn=S:2758034 conn=S:0 live=1

Valid URL

Code:

rtmp://62.90.177.144/flashphoner

WCS does not pass connection parameters.
So valid invocation is:

Code:

/rest-api/push/startup
{
"streamName":"show8",
"rtmpUrl":"rtmp://62.90.177.144/flashphoner"
}

or

Code:

/rest-api/push/startup
{
"streamName":"show8",
"rtmpUrl":"rtmp://admin:admin@62.90.177.144/flashphoner"
}

Here we pass username and password for RTMP authentication.
or

Code:

/rest-api/push/startup
{
"streamName":"show8",
"rtmpUrl":"rtmp://admin:admin@62.90.177.144/flashphoner?name1=value1&name2=value2"
}

Here we pass named parameters.

cheinan · Aug 6, 2017

I succeeded to connect the stream from Flashponer to AMS
with URL like this:
rtmp://62.90.177.144/flashphoner
or like this:
rtmp://62.90.177.144/flashphoner?sid=8&vid=2565&ism=0
But in both cases most of the time it get stuck,
and i can't play or record the stream in AMS.

So i have 3 question:
1. Is it possible to define certain things in AMS actionscript code or in my flashphoner JavaScript code
in order to make it work more reliably? do you have any example code of connection from Flashphoner to AMS?
2. If i totally have to abandon AMS, is there a way i can connect FFmpeg to Flashponer stream?
3. In order to start record stream and stop record in the middle of connection, can i disconnect the stream publisher
and reconnect again on the same stream name, without disconnection of the stream viewers?

Max · Aug 7, 2017

Hello

Is it possible to define certain things in AMS actionscript code or in my flashphoner JavaScript code
in order to make it work more reliably? do you have any example code of connection from Flashphoner to AMS?

Lately we didn't test RTMP re-publishing feature with AMS. Generally we tested with Wowza.
What is your version of AMS and config files? Could you share your configuration.
We will try to test with our AMS installation. I will let you know once we have any results.

If i totally have to abandon AMS, is there a way i can connect FFmpeg to Flashponer stream?

Yes it should work. Our customers recently tested FFmpeg pooling and FFmpeg publishing and it seems it does not have any noticed issues.

In order to start record stream and stop record in the middle of connection, can i disconnect the stream publisher
and reconnect again on the same stream name, without disconnection of the stream viewers?

This feature is not currently supported. You can't record a part of stream.
You can just record by stopping the publishing stream and all subscribers will be disconnected.

cheinan · Aug 7, 2017

My version of AMS and config files is 5
All the configuration is the default from the AMS 5 installation.
My ActionScript testing code in main.asc is vary simple:
application.onAppStart = function()
{
this.allowDebug = true;
}
application.onConnect = function(client)
{
application.acceptConnection(client);
}
application.onPublish = function(clientObj, streamObj) { }
Client.prototype.FCPublish = function( streamname ) { }
Client.prototype.FCUnpublish = function( streamname ) { }
Client.prototype.releaseStream = function(streamname) { }
application.onDisconnect = function(client) { }

If you whant me to sand to you all my AMS XML configuration files
I will be happy to do it - tall me how

Max · Aug 9, 2017

Hello,
We’ve checked WebRTC push to AMS with the latest WCS version. Could you please clarify if the “stuck” issue is that video freezes when the pushed stream is played, or something else?
Also, please let know what type of stream is pushed, i.e. how it is published.

cheinan · Aug 10, 2017

Hello
Yes the "stuck" issue is that video freezes when the pushed stream is played - not always but most of times.
The type of stream that is pushed is webRTC from Chrome or Firefox
I tried to test from Chrome each type of stream: WebRTC,WSPlayer,MSE,Flash
separably
var mediaProviders = "WebRTC";
var mediaProviders = "WSPlayer";
var mediaProviders = "MSE";
var mediaProviders = "Flash";

Flashphoner.init({
flashMediaProviderSwfLocation: 'flash/flashphoner/media-provider.swf',
receiverLocation: 'scripts/flashphoner/dependencies/websocket-player/WSReceiver2.js',
decoderLocation: 'scripts/flashphoner/dependencies/websocket-player/video-worker2.js',
preferredMediaProviders: mediaProviders.split(',')
});

And in Flash it worked well and the video did not freezes at all when the pushed stream is played
But the quality is very low - my be because the sizes did not fit
Its mach better for me to work with webRTC

In webRTC i get those logs from you:
11:21:16 INFO webrtc - Initialized
flashphoner.js:34378
11:21:16 INFO websocket - Initialized
flashphoner.js:34378
11:21:16 INFO core - Initialized
flashphoner.js:34378
11:21:16 INFO webrtc - {audio: true, video: {…}}
flashphoner.js:34378
11:21:16 INFO webrtc - unknown device audiooutput id default
flashphoner.js:34378 11:21:16 INFO webrtc - unknown device audiooutput id communications
flashphoner.js:34378
11:21:16 INFO webrtc - unknown device audiooutput id e043411f4605e7a3c5a558988e0868deb32ab7971cfbea1e8cf54f219b91126e
flashphoner.js:34378
11:21:16 INFO webrtc - unknown device audiooutput id 06f66bf5ac0e5e35df7b6384d57a9ad7f9eef23482e9215ccec8773d207d7f70
flashphoner.js:34378
11:21:16 INFO webrtc - FOUND WEBRTC CACHED INSTANCE, id e18640b0-7da4-11e7-af6e-c91964f1254c-CACHED_WEBRTC_INSTANCE
showAaswTest.aspx?l=1&nc=2:1947
{id: "f2291deb7eef9c9b89f1d855fe948a6070305cefd987121fe25fe303b8361b57", label: "Logitech HD Webcam C525 (046d:0826)", type: "camera"}

And after connecting:
flashphoner.js:34378 11:22:58 INFO webrtc - {audio: {…}, video: {…}}
flashphoner.js:34378 11:22:58 INFO webrtc - FOUND WEBRTC CACHED INSTANCE, id 1e3eafb0-7da5-11e7-af6e-c91964f1254c-CACHED_WEBRTC_INSTANCE

And my logs after REST successfully done
url: http://62.90.177.150:9091/rest-api/push/startup
data: {"streamName":"show8","rtmpUrl":"rtmp://62.90.177.144/flashphoner"}
REST successfully done:
{mediaSessionId: "97dn1c33lrbesh9i4v2rvk2utr", streamName: "rtmp_show8", rtmpUrl: "rtmp://62.90.177.144/flashphoner", width: 640, height: 360, …}

I hope it helps
Thanks
Cheinan

Max · Aug 10, 2017

So, the scenario is as follows?
- WebRTC stream is published from Chrome
- The stream is pushed to AMS
- The RTMP stream from AMS is played
Which player is used for the RTMP stream?

This scenario has been checked with our demo WCS and AMS servers – no video freezes.
- WebRTC stream published from Chrome 60 using ‘Two-Way Streaming’ example: https://wcs5-eu.flashphoner.com/demo2/two-way-streaming
- The stream is pushed to AMS: rtmp://rtmp.flashphoner.com:1936/live
- The RTMP stream from AMS is played using RTMP player in ‘Web as RTMP’ example

Please try it with the demo examples and your or our demo servers.

There may be video freezes in case of insufficient bandwidth. Does playback improve with lower resolution?

cheinan · Aug 10, 2017

I changed the resolution to width: 320, height: 180 but it did not help.
I did not find ‘Web as RTMP’ example, Did you mean: WebRTC as RTMP ?
I triad WebRTC stream published from Chrome 60 using your demo: ‘Two-Way Streaming’
And then in RTMP player in ‘WebRTC as RTMP’ example the RTMP Target Details i used:
RTMP URL: rtmp://rtmp.flashphoner.com:1936/live
Stream: streamName (the stream name from ‘Two-Way Streaming’)
And under the player next to the play button this url: rtmp://rtmp.flashphoner.com:1936/live/streamName
It started successfully but i get black screen - what do i am doing wrong?

Thanks
Cheinan

Max · Aug 11, 2017

Yes, meant 'WebRTC as RTMP', sorry. If use it for the player only, only the field under the player has to be filled. By default, republished stream name has prefix ‘rtmp_’ (that is configured with rtmp_transponder_stream_name_prefix setting in flashphoner.properties). So, the URL for playback would be rtmp://rtmp.flashphoner.com:1936/live/rtmp_streamName.

Actually, if it is not required to push stream some time later than it is published, only the ‘WebRTC as RTMP’ example can be used – for publishing as well as playing: https://flashphoner.com/docs/wcs5/w...de-2/webrtc_as_rtmp_re-publishing_web_sdk.htm

When Start button is clicked, stream with the name specified in 'Stream' field is published, and republished as RTMP under the name with ‘rtmp_’ prefix to RTMP server specified in 'RTMP URL' field. RTMP URL is passed as parameter when the published stream is created: https://github.com/flashphoner/flas...publishing/webrtc-as-rtmp-republishing.js#L79

Base64 img Strings

cheinan

Member

Max

Administrator

cheinan

Member

Max

Administrator

cheinan

Member

Max

Administrator

cheinan

Member

Max

Administrator

cheinan

Member

Max

Administrator

cheinan

Member

Max

Administrator

cheinan

Member

Max

Administrator

cheinan

Member

Max

Administrator