Eigene Streamingseite programmieren (Youtube/Twitch)

Abend,

habe das Thema in den letzten zwei Monaten ein wenig aus den Augen verloren, aufgrund von Studium, Arbeit usw.

Und jetzt schaue ich hier rein und sehe eine rege Beteiligung. Finde ich Klasse, hätte ich nicht gedacht.

@Ludacris
Das auf dem Handy schon recht viel geht, da stimme ich dir zu.

Zitat (Ludacris: 03. August 2017 - 13:24)

Jo eh - mit HTML5 geht recht viel - Kamera & Mikro, GPS ist schon mal absolut kein problem.

Ich hatte mir auch schon mal WebRTC angeschaut und auch mittels getUserMedia auf Kamera und Mikrofon zugegriffen.
Hatte auch local so wie du in deinen Beispiel einen Stream Lokal erstellt. Problem war halt nur das es lokal war und ich diesen irgendwie nicht "öffentlich" zugänglich bekommen habe. So das er zum Beispiel in einer Art liste angezeigt wird und ein x-beliebiger User diesen auswählen kan bzw. sich damit verbinden kann.

Zitat (Ludacris: 03. August 2017 - 13:24)

Spoiler


<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <video autoplay></video>

    <script>
        var errorCallback = function (e) {
            console.log('Reeeejected!', e);
        };

        // Not showing vendor prefixes.
        navigator.getUserMedia({
            video: true,
            audio: true
        }, function (localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);

            // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
            // See crbug.com/110938.
            video.onloadedmetadata = function (e) {
                // Ready to go. Do some stuff.
            };
        }, errorCallback);

        navigator.getUserMedia = navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia;

        var video = document.querySelector('video');

        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                audio: true,
                video: true
            }, function (stream) {
                video.src = window.URL.createObjectURL(stream);
            }, errorCallback);
        } else {
            video.src = 'somevideo.webm'; // fallback.
        }

        var hdConstraints = {
            video: {
                mandatory: {
                    minWidth: 1280,
                    minHeight: 720
                }
            }
        };

        navigator.getUserMedia(hdConstraints, successCallback, errorCallback);



        var vgaConstraints = {
            video: {
                mandatory: {
                    maxWidth: 640,
                    maxHeight: 360
                }
            }
        };

        navigator.getUserMedia(vgaConstraints, successCallback, errorCallback);

        MediaStreamTrack.getSources(function (sourceInfos) {
            var audioSource = null;
            var videoSource = null;

            for (var i = 0; i != sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                if (sourceInfo.kind === 'audio') {
                    console.log(sourceInfo.id, sourceInfo.label || 'microphone');

                    audioSource = sourceInfo.id;
                } else if (sourceInfo.kind === 'video') {
                    console.log(sourceInfo.id, sourceInfo.label || 'camera');

                    videoSource = sourceInfo.id;
                } else {
                    console.log('Some other kind of source: ', sourceInfo);
                }
            }

            sourceSelected(audioSource, videoSource);
        });

        function sourceSelected(audioSource, videoSource) {
            var constraints = {
                audio: {
                    optional: [{
                        sourceId: audioSource
                    }]
                },
                video: {
                    optional: [{
                        sourceId: videoSource
                    }]
                }
            };

            navigator.getUserMedia(constraints, successCallback, errorCallback);
        }

        function fallback(e) {
            video.src = 'fallbackvideo.webm';
        }

        function success(stream) {
            video.src = window.URL.createObjectURL(stream);
        }

        if (!navigator.getUserMedia) {
            fallback();
        } else {
            navigator.getUserMedia({
                video: true
            }, success, fallback);
        }

        function hasGetUserMedia() {
            return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia || navigator.msGetUserMedia);
        }

        if (hasGetUserMedia()) {
            // Good to go!
        } else {
            alert('getUserMedia() is not supported in your browser');
        }
    </script>
</body>
</html>

Vielleicht hat ja jemand Erfahrung damit wie man diesen Stream "Öffentlich" zugänglich machen kann.

Gruß PSP3004

Jetzt habe ich mich nur angemeldet um ein 4 Jahre alten Thread raus zu kramen.

Tatsächlich ist es sehr leicht ein Twitch Backend zu entwickeln.

Ich beschäftige mich damit aktuell aufgrund einer Geschäftsidee und habe bereits ein fertiges Twitch backend entwickelt.

Das Stichwort nennt sich RTMP. Ist ein simples Protokoll, das mit einem NGINX Server verarbeiten lässt.

Twitch bietet einfach jedem Streamer einen RTMP Schlüssel und eine Stream URL an. Der NGINX RTMP Server kann dann diesen Stream empfangen und an jeden der den Stream per Public URL aufruft weiterleiten.

Twitch hat einfach eine Fancy Oberfläche und ein Player der den RTMP Stream anzeigt.

Das kluge bei Twitch ist das es ein Peer To Peer RTMP System nutzt, das ich nicht nach bilden kann. In meinem Stream backend wird viel Datenvolumen erzeugt. Was jedoch mittlerweile erschwinglich ist.

Aufgrund des alters des Beitrages vermute ich das das ganze Bereits kein Thema mehr ist. Falls doch Interesse besteht ein Front End zu entwickelt, suche ich aktuell Front End Entwickler für die Umsetzung.

WinFuture-Forum.de: Eigene Streamingseite programmieren (Youtube/Twitch) - WinFuture-Forum.de

Eigene Streamingseite programmieren (Youtube/Twitch) Eigene Streamingseite programmieren (Youtube/Twitch)

#16 Ludacris

Anzeige

#17 psp3004

#18 vife

#19 GrauerStein

Thema verteilen:

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0

Beitrag entfernen

Design und Sprache

Sprache:

Ausführungsstatistiken