Videoübertragung an die Webcam

Webcam-Video in eine Webseite einfügen

Verwenden Sie diese Anweisungen für eine schnelle Installation und Konfiguration des Servers. Außerdem können Sie sich zu Testzwecken mit unserem Demoserver verbinden.flashphoner.Websockets.

Um das Video-Streaming in Ihre Webseite einzubetten, erstellen Sie zwei leere two-way-streaming-min-Dateien.html und bidirektionales Streaming-min.js. Diese Dateien werden minimalen Code enthalten.

HTML

Lassen Sie uns Zwei-Wege-Streaming-min.html-Elemente erforderlich:

Skript für Videoübertragungen importieren

Fügen Sie Stile hinzu, um das Video in den div-Elementen korrekt anzuzeigen:

Initialisierung der API zum Laden der Seite

Webcam video girls #1

Fügen Sie ein div-Element hinzu, um den von der Webcam aufgezeichneten Stream anzuzeigen

Fügen Sie ein div-Element hinzu, in dem das Video von Ihrem Server abgespielt wird

Fügen Sie eine „Veröffentlichen“-Schaltfläche hinzu, die, wenn sie angeklickt wird, eine Verbindung zum Server herstellt und den Stream von Ihrer Webcam aufnimmt

Fügen Sie die Schaltfläche „Abspielen“ hinzu. Wenn Sie darauf klicken, wird der Videostream von Ihrem Server abgespielt

Hinzufügen der Schaltfläche „Stop“, durch deren Betätigung die Veröffentlichung und Wiedergabe des Streams gestoppt wird

Der vollständige HTML-Seitencode sieht wie folgt aus (Datei „two-way-streaming-min.html“):

JavaScript

Erstellen Sie Konstanten und Variablen für den Status des Servers, der WebSocket-Sitzung und des Streams. Damit es mit dem iOS Safari-Browser funktioniert, benötigen wir einen Preloader, den Sie von GitHub herunterladen können

Initialisierung der API beim Laden der HTML-Seite, Zuordnung der Funktionen zum Drücken der entsprechenden Schaltflächen und Verbindung zum WCS-Server über WebSocket. In diesem Beispiel verwenden wir unseren Demo-Server. Um Ihren eigenen Server zu testen, ersetzen Sie „wss://demo.flashphoner.com“ zu unserem WCS

Als nächstes erstellen Sie einen Stream mit der Sitzungsfunktion.createStream und übergibt den Streamnamen „stream“ und das HTML-Element „publish“ als Parameter. Veröffentlichen Sie den Stream mit diesen Parametern.

Auf der zweiten div-e-Webseite wird der Videostream abgespielt. Geben Sie in den Parametern der Sitzungsfunktion an.createStream Stream-Name „stream“ und HTML-Element „play“

Veröffentlichung stoppen und Funktion abspielen

Der vollständige JavaScript-Code sieht wie folgt aus (Datei „two-way-streaming-min.js“):

Fallstrick Nr. 1. Codecs

Die verwendeten Codecs können ein Hindernis für einen Betrieb mit geringer Latenz sein und die Gesamtleistung des Systems beeinträchtigen. Wenn die Kamera beispielsweise ein 720p-Video in H.264, und ein Chrome-Browser auf einem Android-Smartphone, das nur VP8 unterstützt, ist angeschlossen.

Wenn Sie die Transcodierung aktivieren, muss für jede der angeschlossenen IP-Kameras eine Transcodierungssitzung erstellt werden, die die H.264 und kodiert in VP8. In diesem Fall kann ein 16-Kern-Dualprozessor-Server nur 10-15 IP-Kameras bedienen, also etwa 1 Kamera pro physischem Kern. Wenn die Serverkapazität die geplante Anzahl von Kameras nicht zulässt, sollte die Transkodierung daher vermieden werden. Zum Beispiel, um nur Browser mit H.264, und schlagen anderen vor, eine native mobile App für iOS oder Android zu verwenden, die Unterstützung für das H.264.

Als Option zur Umgehung des Video-Streamings im mobilen Browser können Sie HLS verwenden. Streaming über HTTP hat jedoch keine geringe Latenzzeit und kann derzeit nicht für interaktive Sendungen verwendet werden.

Webcam-Video-Streaming in eine Webseite einbetten

Für eine schnelle Installation und Konfiguration des Servers, verwenden Sie dieses Tutorial. Darüber hinaus können Sie zu Testzwecken eine Verbindung zu unserem Demoserver demo.flashphoner.com über Websockets.

Um das Video-Streaming in Ihre Webseite einzubinden, erstellen wir zwei leere two-way-streaming-min-Dateien.html und bidirektionales Streaming-min.js. Diese Dateien werden minimalen Code enthalten.

Siehe auch  So befestigen Sie die Action-Kamera auf Ihrem Kopf

HTML

Zwei-Wege-Streaming-Min. einfügen.html-Elemente erforderlich:

Importieren Sie das Skript, um die Videoübertragung zu bearbeiten

Hinzufügen von Stilen für die korrekte Anzeige von Videos in div-Elementen:

Initialisierung der API für das Laden der Seite

Fügen Sie ein div-Element hinzu, um den von Ihrer Webcam aufgenommenen Videostream anzuzeigen

Fügen Sie ein div-Element hinzu, in dem das Video von Ihrem Server abgespielt wird

Fügen Sie eine „Veröffentlichen“-Schaltfläche hinzu, die, wenn sie angeklickt wird, eine Verbindung zum Server herstellt und den Stream von Ihrer Webcam aufnimmt

Fügen Sie die Schaltfläche „Abspielen“ hinzu, mit der Sie den Videostream von Ihrem Server abspielen können

Hinzufügen einer „Stopp“-Schaltfläche, die, wenn sie angeklickt wird, die Veröffentlichung und Wiedergabe des Streams stoppt

Der vollständige HTML-Code sieht wie folgt aus (Datei „two-way-streaming-min.html“):

JavaScript

Erstellen von Konstanten und Variablen für den Status von Server, WebSocket-Sitzung und Stream. Um mit dem iOS Safari-Browser zu arbeiten, benötigen wir einen Preloader, den Sie von GitHub herunterladen können

Wir initialisieren die API beim Laden der HTML-Seite, ordnen die Funktionen den entsprechenden Schaltflächen zu und verbinden uns mit dem WCS-Server über den WebSocket. In diesem Beispiel verwenden wir unsere Demo. Um Ihren eigenen Server zu testen, ersetzen Sie „wss://demo.flashphoner.com“ an Ihre WCS-Adresse

Als nächstes erstellen Sie den Stream mit der Sitzungsfunktion.createStream und übergibt den Streamnamen „stream“ und das HTML-Element „publish“ als Parameter. Veröffentlichen Sie den Stream mit diesen Einstellungen.

Das zweite div-e der Webseite spielt den Videostream ab. Geben Sie in den Parametern der Sitzungsfunktion an.createStream Stream-Name „stream“ und HTML-Element „play

Stoppen der Veröffentlichung und Wiedergabefunktion

Der vollständige JavaScript-Code sieht wie folgt aus (die Datei „two-way-streaming-min.js“):

Übertragung über Webcam

Erstellen einer Sendung

Melden Sie sich bei Ihrem Google YouTube-Konto an. Klicken Sie in der oberen rechten Ecke auf das Symbol für Ihr Konto

Klicken Sie in der Dropdown-Liste auf „Mein Kanal“, dann werden Sie zu Ihrer Kanalseite weitergeleitet

Klicken Sie oben auf der Seite auf „Video oder Aufnahme erstellen“ und wählen Sie „Übertragung starten“

In dem sich öffnenden Fenster wählen Sie oben „VEB CAMERA“ aus, geben in den Übertragungsdetails den Namen an und stellen „Zugriff über Link“ ein.

Bei Bedarf können Sie die Übertragung für ein bestimmtes Datum/eine bestimmte Uhrzeit planen. Klicken Sie dazu auf das Optionsfeld „Übertragung planen“ und legen Sie das gewünschte Datum/die gewünschte Uhrzeit fest. Lesen Sie hier mehr über „geplante Sendungen“

Wählen Sie unter „Publikum“ aus, für wen der Inhalt freigegeben werden soll (dies ist nach den neuesten YouTube-Regeln erforderlich). Sie können „nicht für Kinder“ auswählen, aber ohne Altersbeschränkung von 18 Jahren (klicken Sie auf „Altersbeschränkungen (optional)“ und wählen Sie „Nein, das Video ist für Zuschauer unter 18 Jahren geeignet“).

Fügen Sie eine Beschreibung des Webinars hinzu, wählen Sie eine passende Kategorie. Geben Sie unter „Andere Optionen“ Ihre Webcam und Ihr aktives Mikrofon an (falls Sie mehr als eines haben). Standardmäßig ist die Hauptkamera/das Hauptmikrofon angeschlossen. Klicken Sie auf „Weiter“

Diesen Link fügen wir in die Webinareinstellungen im Abschnitt „Video“ ein

Danach können Sie mit den Webinareinstellungen fortfahren, falls diese noch nicht eingerichtet wurden.

videoübertragung, webcam

Wenn alle Vorbereitungen abgeschlossen sind und Sie bereit sind, das Webinar zu starten, gehen Sie zurück zur Webinar-Seite und klicken Sie auf die Schaltfläche „LIVE BROADCASTING STARTEN“

Gehen Sie auf Ihre Webinar-Seite, warten Sie auf den Start und beginnen Sie mit der Übertragung

Während der Sendung kann der Ton dupliziert werden. Wenn Sie keine Kopfhörer verwenden, kann es zu einer Schleife kommen. Um diese Situation zu vermeiden, reduzieren Sie den Ton oder schalten Sie ihn stumm

Siehe auch  Wie Sie Ihr Computer-BIOS aktualisieren

Herzlichen Glückwunsch! Sie haben Ihr Webinar gestartet!

Geplante Webcam-Übertragung

Wenn Sie die Sendung erstellen und vorher einen Link dazu in den Raum einfügen möchten, planen Sie die Sendung.

Starten Sie die Webcam-Übertragung wie oben beschrieben. In der Phase der Broadcast-Einstellungen: Geben Sie den Namen, den Zugang und die Verschiebung des Schalters Schedule broadcast. Legen Sie ein Datum und eine Uhrzeit für Ihr Webinar fest.

Klicken Sie im Vorschaufenster auf die Schaltfläche „Teilen“. Kopieren Sie den Link in dem sich öffnenden Fenster.

Fügen Sie diesen Link in das Feld „YouTube-Video/Broadcast-Link“ in den Webinareinstellungen unter „Video“ ein

An dieser Stelle können Sie die Webinar-Übertragungsseite schließen und sich auf das Webinar vorbereiten.

Um die geplante Übertragung zu starten, klicken Sie auf Ihrer Kanalseite oben auf der Seite auf das Symbol „Video oder Aufnahme erstellen“, aber wählen Sie diesmal CONTROL aus dem oberen Menü.

Wählen Sie das geplante Webinar aus, indem Sie es anklicken

Webinar-Übertragung beenden

Ihr Webinar ist zu Ende. Gehen Sie zum Übertragungsfenster und klicken Sie auf Übertragung beenden.

Das Webinar auf der AutoWebOffice-Plattform wird dann automatisch beendet. Der Raum bleibt für die Zeit geöffnet, die in den Webinareinstellungen unter „Wie viele Minuten nach dem Ende des Webinars ist der Raum noch geöffnet?

Streamer. Prüfung

Wir haben eine Mini-Streaming-App entwickelt, die aus drei Skripten besteht:

Kopieren Sie unsere Skripte auf den Webserver, um mit den Tests zu beginnen. Wir verwenden Apache 2 mit dem Standardverzeichnis /var/www/html als Webserver

Im Ergebnis sieht unser Live-Streamer wie im folgenden Screenshot aus. Nach dem Klicken auf die Schaltfläche Start wird eine Verbindung mit dem Server hergestellt und der WebRTC-Videostream wird an den Server gesendet:

Um sicherzustellen, dass der Stream tatsächlich gesendet wird, gehen wir zu chrome://webrtc-internals. Hier können Sie in Echtzeit beobachten, was mit dem Videostream passiert und Parameter wie Bitrate, Auflösung, Bildrate, Anzahl der gesendeten Pakete, RTT und mehr überwachen.

Unser Streamer funktioniert also und der WebRTC-Videostream wird korrekt an den Server gesendet, von dem er abgeholt werden muss. Um den Stream abzurufen und wiederzugeben, erstellen Sie eine neue Playerseite.html

Spieler. HTML

Die Spielerseite wird vom Streamer kopiert, der einzige Unterschied ist, dass wir das Skript verwenden werden: Spieler.js anstelle von Streamer.js, und geben Sie statt localVideo ID = remoteVideo für unser div-Element an.

Auch im Player-Skript gibt es einige Unterschiede, aber der Ansatz ist derselbe: Die Flashphoner-API wird initialisiert, die Schaltfläche Start öffnet eine Verbindung zum Server über einen Websocket, wartet auf das Ereignis ESTABLISHED und beginnt mit der Wiedergabe des Streams.

Liste der Unterschiede des Streamer-Skripts.js von Streamer.js:

  • Verwendung von remoteVideo anstelle von localVideo
  • Nach dem Aufbau der Verbindung rufen wir startPlayback anstelle von startStreaming auf
  • Bei der Erstellung eines Streams mit der Methode createStream werden die Parameter receiveAudio=true und receiveVideo=true übergeben
  • Aufruf der Play-Methode anstelle von Publish

Als Ergebnis erhalten wir einen WebRTC-Player, der aus zwei Skripten besteht:

Vergessen Sie nicht, dass der Player auch die Flashphoner-API-Datei benötigt.js, also kopieren wir die Player-Dateien in denselben Ordner auf dem Webserver.

Daher besteht unsere endgültige Anwendung für WebRTC-Online-Streaming aus fünf Dateien:

Starten wir den Test und senden den Videostream erneut über den Streamer.html. Öffnen Sie anschließend eine neue Browser-Registerkarte mit dem Player.html und klicken Sie auf Start.

Als Ergebnis fand die Übertragung statt und wir haben WebRTC. Video-Streaming zum Player. Jetzt können Sie von anderen Geräten aus eine Verbindung zum gleichen Videostream herstellen oder einfach mehrere Browser-Tabs öffnen, von denen jeder den gleichen Videostream aufnimmt.

Siehe auch  So löschen Sie Ihren Verlauf auf Samsung

Also senden wir den Videostream an einen Server und verteilen ihn an mehrere Personen, wodurch wir eine einfache Videoübertragung für mehrere Verbindungen implementieren.

IP-Kamera-Viewer

Arbeitsfenster des IP-Kamera-Viewers

Mit dieser Anwendung können Sie ganz einfach ein Überwachungssystem einrichten und die Videos von IP- und Webkameras beobachten.

Zur gleichzeitigen Verfolgung mehrerer Objekte. die Software unterstützt den gleichzeitigen Betrieb mit mehreren Kameras, die entweder über die IP-Adresse oder den USB-Anschluss des Computers angeschlossen sind.

Mit dem IP-Kamera-Viewer können Sie verschiedene Videoparameter einstellen und das Bild mit dem Digitalzoom vergrößern.

Zusammen mit der Bildaufnahme ermöglicht das Programm auch die Speicherung des Tons, aber um diese Funktion zu realisieren, benötigen Sie eine spezielle Kamera oder ein separates Mikrofon.

Installieren und testen Sie diese App, die einer teuren professionellen Überwachungsanlage in nichts nachsteht.

Droiden-Kamera

Mit diesem kleinen Programm können Sie Ihr Android-Gerät als Webcam für die Internetkommunikation nutzen.

Sie können Ihren Computer und Ihr Telefon miteinander verbinden, indem Sie zwei Teile des Programms auf beiden Geräten installieren, die Verbindung über ein USB-Kabel herstellen oder das Wi-Fi-Modul verwenden.

Mit dieser App können Sie Ihr Smartphone nicht nur in eine vollwertige Webcam verwandeln, sondern auch die Auflösung einstellen.

Es gibt auch die Möglichkeit, den Blitz und die Zoomfunktion Ihres Telefons zu verwenden sowie Helligkeit und Kontrast einzustellen.

Streaming von der Webcam mit ffserver

Gelegentlich stellt sich die Aufgabe, Videos von einer Webcam über ein Netzwerk zu streamen. Das beliebteste Tool für solche Übertragungen ist VLC, aber das ffserver-Projekt, das die gleiche Aufgabe löst und eine bequemere Art der Konfiguration bietet, wird seit einiger Zeit als Teil des ffmpeg-Projekts entwickelt. Im Folgenden finden Sie ein Beispiel für die Verwendung von ffserver zur Übertragung von einer Webcam.

Lassen Sie uns die Ausgangsbedingungen klären:

Ziel: Streaming von einer Kamera über http im flv-Format, mit der Möglichkeit, das Kamerabild in Webseiten einzubetten.

Eine der interessanten Eigenschaften von ffserver ist, dass er den Stream nicht selbst ausstrahlt, sondern den Stream von einer anderen Quelle weiterleitet (ungefähr so wie icecast). Es ist üblich, Konfigurationen zu beschreiben, bei denen der ffserver separat gestartet wird und dann die Streamquelle (meistens ffmpeg) gestartet wird. Wir werden hingegen eine Konfiguration verwenden, bei der ffserver selbst die Stream-Quelle startet.

Weiter zur Lösung. Zuerst installieren wir das ffmpeg-Paket (ffserver ist ein Teil davon):

Unmittelbar nach der Installation können Sie mit der Konfiguration beginnen. Es ist ausreichend, die Datei „/etc/ffserver“ zu zitieren.conf“ in die folgende Form zu bringen:

Weitere Details zur Einrichtung von ffserver finden Sie in der offiziellen Dokumentation und in einer Beispielkonfigurationsdatei von den Entwicklern des Produkts.

Starten Sie den ffserver mit dem Befehl:

Um ffserver automatisch beim Start des Servers zu starten, müssen Sie diesen Befehl in die Datei „/etc/rc.lokal“.

Nach dem Start von ffserver können Sie die Adresse „//:12345“ in Ihrem Browser öffnen und die Serverstatusseite sehen:

Die Server-Statusseite enthält auch Links zu allen Broadcast-Streams, so dass Sie diese sofort testen können.

Der folgende Code sollte in die HTML-Seite für das Kamerabild eingefügt werden:

Related Posts

| Denial of responsibility | Contacts |RSS