Can I push stream as RTSP source?

[minchan]

Hi
Can I push stream by ffmpeg as on demand RTSP source to play on WebSocket/WebRTC client?
I can not play push stream by WebSocket/WebRTC client. Please see my code and command below.
Thanks

Code:
var playerConfig = {
videoid: “mVideo1”, //DomId
protocol: “http:”,
host: window.location.hostname + “:” + window.location.port,
rootpath: “/”,
token: “token3”, //stream token
session: “c1982caf-b540-42d8-ba90-7444d0b0ee13” //session got from login
};

FFMPEG Command:
ffmpeg -re -stream_loop -1 -i BigBuckBunny.mp4 -c:v copy -f rtsp rtsp://127.0.0.1:8554/live/token3

[orangeMax]

You need to create RTSP streaming address first

[orangeMax]

First add the RTSP source, and then add the corresponding token in your code

[minchan]

I can play the stream when I add RTSP source on config and Api.
Currently, I’m try to add source as push source.

[orangeMax]

Your RTSP streaming address can be played with the other player？

[minchan]

I can play by VLC from h5Stream server by rtsp://127.0.0.1:8554/live/token2
But, I would like to play it by WebSocket/WebRTC on web client.
@linkinginfo Can you suggest please?

[linkingv]

you can refer ws.html or rtc.html

[minchan]

I can play other source if sources url are in config.
But can not play rtsp push source by WebSocket/WebRTC.

FFMPEG Push Command:
ffmpeg -re -stream_loop -1 -i BigBuckBunny.mp4 -c:v copy -f rtsp rtsp://127.0.0.1:8554/live/token3

Player Code:

var conf1= {
                videoid: "mVideo1",
                protocol: "http:",
                host: window.location.hostname + ":" + window.location.port,
                rootpath: "/",
                token: "token3", //stream token		
        };      
var v1 = new H5sPlayerWS(conf1);
v1.connect();

I can play that rtsp push source by VLC by rtsp://127.0.0.1:8554/live/token3
What am I wrong on player code?
Thanks

[linkingv]

RTSP need play, don’t support PUSH, you can use RTMP push

[orangeMax]

Yes, you can try RTMP streaming

ffmpeg.exe -re -i h5s_file.mp4 -c copy -f flv rtmp://ip:8935/live/token8

[minchan]

Still can not play RTMP push stream by WebSocket/WebRTC.

FFMPEG Push Command:
ffmpeg -re -stream_loop -1 -i BigBuckBunny.mp4 -c:v copy -f flv rtmp://127.0.0.1:8935/live/token3

[orangeMax]

Check if the token in your code is correct？

the demo page is ws.html or rtc.html

[minchan]

I’m sure token is correct.
I can play other token1, token2 that are source in config.
token3 is from ffmpeg push command
ffmpeg -re -stream_loop -1 -i BigBuckBunny.mp4 -c:v copy -f flv rtmp://127.0.0.1:8935/live/token3

But, can not play token3 by WebSocket/WebRTC
I can play that RTMP push stream by VLC RTSP Client from h5stream server.

[minchan]

Any update on this issue?
Please @orangeMax @linkingv @linkinginfo

[orangeMax]

Post the error message and picture what you can not play by ws or rtc

[minchan]

ws2.html:51 Playing stream -> token3
h5splayer.js:1 [WS] Websocket Conf: {videoid: "h5sVideo1", protocol: "http:", host: "127.0.0.1:8080", rootpath: "/", token: "token3"}
h5splayer.js:1 [WS] use videoid token3
h5splayer.js:1 [WS] connect src token3
h5splayer.js:1 /api/v1/h5swsapi?token=token3&profile=main&session=undefined
h5splayer.js:1 [WS] H5SWebSocketClient
h5splayer.js:1 127.0.0.1:8080
h5splayer.js:1 [WS] setupWebSocket WebSocket {url: "ws://127.0.0.1:8080/api/v1/h5swsapi?token=token3&profile=main&session=undefined", readyState: 0, bufferedAmount: 0, onopen: null, onerror: null, …}
h5splayer.js:1 [WS] wsSocket.onopen H5sPlayerWS {buffer: Array(0), h: 0, l: 0, u: 0, C: false, …}buffer: []h: 0l: 0u: 0C: falseS: falsev: falsep: truek: {videoid: "h5sVideo1", protocol: "http:", host: "127.0.0.1:8080", rootpath: "/", token: "token3"}R: "h5sVideo1"P: undefinedW: "token3"T: video#h5sVideo1.h5video1video: video#h5sVideo1.h5video1s: WebSocket {nt: H5sPlayerWS, url: "ws://127.0.0.1:8080/api/v1/h5swsapi?token=token3&profile=main&session=undefined", readyState: 1, bufferedAmount: 0, onopen: ƒ, …}at: 82i: 84o: 85__proto__: Object
h5splayer.js:1 [WS] CheckSourceBuffer H5sPlayerWS {buffer: Array(0), h: 0, l: 0, u: 0, C: false, …}
h5splayer.js:1 TypeError: Cannot read property 'buffered' of undefined
    at H5sPlayerWS.ht (h5splayer.js:1)
h5splayer.js:1 [WS] CheckSourceBuffer H5sPlayerWS {buffer: Array(0), h: 0, l: 0, u: 0, C: false, …}
h5splayer.js:1 TypeError: Cannot read property 'buffered' of undefined
    at H5sPlayerWS.ht (h5splayer.js:1)
h5splayer.js:1 [WS] CheckSourceBuffer H5sPlayerWS {buffer: Array(0), h: 0, l: 0, u: 0, C: false, …}
h5splayer.js:1 TypeError: Cannot read property 'buffered' of undefined
    at H5sPlayerWS.ht (h5splayer.js:1)

[minchan]

Can not play token3 by ffmpeg push, can play token2 by RTSP URL source.
Please see my screen recording https://imgur.com/UYCjmoa .
Testing code is below.

<!DOCTYPE HTML>  
<html>  
<head>
<title>H5STREAM VIDEO</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/adapter.js"></script>
<script src="js/platform.js"></script>
<script src="js/h5splayer.js"></script>
<script src="js/h5splayerhelper.js"></script>
<link rel = "stylesheet" type = "text/css" href = "css/h5splayer.css" />

<body>
    <h2>Live Stream by WebSocket</h2>
	<b>StreamToken:</b> <input id="streamToken" value="token3" /> <br/><br/>
    <div class="h5videodiv1">        
		<video class="h5video1" id="h5sVideo1"  autoplay webkit-playsinline playsinline></video>
        <div class="playpause" id="playpause1"></div>		
    </div>

    <script type="text/javascript">
        var playerConfig = {
            videoid: "h5sVideo1",
            protocol: "http:",
            host: window.location.hostname + ":" + window.location.port,
            rootpath: "/",
            token: "token3"	
        };
		
		var playerInstance;
        var playerElement = $("#h5sVideo1").get(0);
		var streamTokenElement = $("#streamToken").get(0);
        if (isiOS() === true || isSafariBrowser() === true) {
            $(playerElement).prop("controls", true);
        }
        
		playerElement.onplay = function() {
			console.log("The video has started to play");
		};
		
        $(playerElement).parent().click(function () {						
            if (playerElement.paused) {							              
                if (playerInstance != null) {
                    playerInstance.disconnect();
                    delete playerInstance;
                    playerInstance = null;
                }
				
				playerConfig.token = streamTokenElement.value;
				console.log("Playing stream -> %s", playerConfig.token);				
				playerInstance = CreatePlayerInstance(playerConfig);				               
                playerInstance.connect();
                $("#playpause1").fadeOut();
            } else {
                console.log("Stoping stream -> %s", playerConfig.token);
                playerInstance.disconnect();
                delete playerInstance;
                playerInstance = null;
                playerElement.pause();
                $("#playpause1").fadeIn();
            }
        });

        function CreatePlayerInstance(conf) {
            var player;
            if (isiOS()) {
                player = new H5sPlayerRTC(conf);
            } else {
                player = new H5sPlayerWS(conf);
            }
            return player;
        }

        function isiOS() {
            var browserName = platform.os.family;
            if (/ios/i.test(browserName)) {
                return true;
            }
            return false;
        }

        function isSafariBrowser() {
            var browserName = platform.name;
            console.log(browserName);
            if (/safari/i.test(browserName)) {
                return true;
            }
            return false;
        }
    </script>
</body>

</html>