Clever Geek Handbook

Streaming multiple RTSP IP cameras to YouTube and / or Facebook

, YouTube RTSP . , , , YouTube , , , . , 240p. : IP — YouTube, , . , , - YouTube .





, IP , H.264 RTSP YouTube. RTSP RTMPS , YouTube. RTMPS, RTMP? . HTTP , , S - Secure . RTMP Facebook, , RTMPS. , RTSP RTMPS. Headless ( UI), .. .





RTSP YouTube , . , ?





, YouTube-, , . . 10, 50? 50 ? ? ? , .





, RTSP . mixer1 = rtsp1 + rtsp2. mixer1 YouTube. - . , - CPU .





, RTSP , RTMP endpoints, CPU . RTSP Facebook, Twitch, RTSP .





, , , , . REST API .





, : 





/rtsp/startup

IP .





: 





/rtsp/find_all

RTSP .





RTSP :





/rtsp/terminate

REST , web .





, .





, Live YouTube Facebook

demo.flashphoner.com. WCS Amazon, DigitalOcean Docker.





, YouTube YouTube Studio, Facebook.





Live YouTube Facebook WCS flashphoner.properties :





rtmp_transponder_stream_name_prefix=



– .





rtmp_transponder_full_url=true



– "true" "streamName" RTMP , .





rtmp_flash_ver_subscriber=LNX 76.219.189.0



- RTMP WCS YouTube.





, , . HTML :





API JS live , :





 <script type="text/javascript" src="../../../../flashphoner.js"></script>
 <script type="text/javascript" src="rtsp-to-rtmp-min.js"></script>

API web-:





<body onload="init_page()">

– YouTube Facebook, RTSP , div :





<input id="streamKeyYT" type="text" placeholder="YouTube Stream key"/>
<input id="streamKeyFB" type="text" placeholder="FaceBook Stream key"/>
<button id="repubBtn">Start republish</button>
<div id="republishStatus"></div>
<br>
<button id="stopBtn">Stop republish</button>

JS RTSP. REST .





:





"url", REST API . "demo.flashphoner.com" WCS.





"rtspStream" — RTSP IP . RTSP . 





var url = "https://demo.flashphoner.com:8444/rest-api";
var rtspStream = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"

"init_page()" API web - . "getStream", RTSP IP :





function init_page() {
	Flashphoner.init({});
	repubBtn.onclick = streamToYouTube;
	stopBtn.onclick = stopStream;
	getStream();
}

"getStream()" WCS REST /rtsp/startup



RTSP rtspStream 







function getStream() {
    fetchUrl = url + "/rtsp/startup";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": rtspStream
        }),
    }
    fetch(fetchUrl, options);
	console.log("Stream Captured");
}

"streamToYouTube()" Live YouTube: 





function streamToYouTube() {
	fetchUrl = url + "/push/startup";
	const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "streamName": rtspStream,
						"rtmpUrl": "rtmp://a.rtmp.youtube.com/live2/"+document.getElementById("streamKeyYT").value
        }),
    }
  fetch(fetchUrl, options);
	streamToFB()
}

WCS REST /push/startup



:





"streamName" - , IP . RTSP , "rtspStream"





"rtmpUrl" - URL + . Live YouTube Studio. URL , web . "streamKeyYT" Web .





"streamToFB" Live Facebook: 





function streamToFB() {
	fetchUrl = url + "/push/startup";
	const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "streamName": rtspStream,
						"rtmpUrl": "rtmps://live-api-s.facebook.com:443/rtmp/"+document.getElementById("streamKeyFB").value
        }),
    }
  fetch(fetchUrl, options);
	document.getElementById("republishStatus").textContent = "Stream republished";
}

WCS REST "/push/startup" :





"streamName" - , IP . RTSP , "rtspStream"





"rtmpUrl" - URL + . Live Facebook Live API. Url , YouTube. "streamKeyFB" Web .





"stopStream()" RTSP "/rtsp/terminate" IP WCS YouTube Facebook:





function stopStream() {
	fetchUrl = url + "/rtsp/terminate";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": document.getElementById("rtspLink").value
        }),
    }
    fetch(fetchUrl, options);
	document.getElementById("captureStatus").textContent = null;
	document.getElementById("republishStatus").textContent = null;
	document.getElementById("stopStatus").textContent = "Stream stopped";
}

HTML JS .





. .





Live YouTube Studio. :





HTML . , YouTube:





Live Facebook. .





web , "Start republish





. YouTube Studio Facebook, .





"Stop"





, , :





HTML "rtsp-to-rtmp-min.html" 





<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="../../../../flashphoner.js"></script>
        <script type="text/javascript" src="rtsp-to-rtmp-min.js"></script>
    </head>
    <body onload="init_page()">
        <input id="streamKeyYT" type="text" placeholder="YouTube Stream key" /> <input id="streamKeyFB" type="text" placeholder="Facebook Stream key" /> <button id="repubBtn">Start republish</button>
        <div id="republishStatus"></div>
        <br />
        <button id="stopBtn">Stop republish</button>
    </body>
</html>

JS "rtsp-to-rtmp-min.js":





var url = "https://demo.flashphoner.com:8444/rest-api";
var rtspStream = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"​
function init_page() {
    Flashphoner.init({});
    repubBtn.onclick = streamToYouTube;
    stopBtn.onclick = stopStream;
    getStream();
}

function getStream() {
    fetchUrl = url + "/rtsp/startup";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": rtspStream
        }),
    }
    fetch(fetchUrl, options);
    console.log("Stream Captured");
}

function streamToYouTube() {
    fetchUrl = url + "/push/startup";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "streamName": rtspStream,
            "rtmpUrl": "rtmp://a.rtmp.youtube.com/live2/" + document.getElementById("streamKeyYT").value
        }),
    }
    fetch(fetchUrl, options);
    streamToFB()
}

function streamToFB() {
    fetchUrl = url + "/push/startup";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "streamName": rtspStream,
            "rtmpUrl": "rtmps://live-api-s.facebook.com:443/rtmp/" + document.getElementById("streamKeyFB").value
        }),
    }
    fetch(fetchUrl, options);
    document.getElementById("republishStatus").textContent = "Stream republished";
}

function stopStream() {
    fetchUrl = url + "/rtsp/terminate";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "uri": rtspStream
        }),
    }
    fetch(fetchUrl, options);
    document.getElementById("republishStatus").textContent = "Stream stopped";
}

. - web JS . .





!









WCS Amazon EC2 - WCS Amazon





WCS DigitalOcean - WCS DigitalOcean





WCS Docker - WCS Docker





WebRTC RTMP - WebRTC RTMP





(Live Encoder) RTMP - Live Encoder RTMP





HTML5- RTSP-IP - RTSP







More articles:


All Articles