Coder Social home page Coder Social logo

streaming-website's Introduction

C3VOC Streaming-Webseite

Dies ist der Code für die Streaming-Webseite unter streaming.media.ccc.de, welche vom C3VOC benutzt wird, um Live-Video- und -Audio-Streams von diversen Konferenzen im Internet zu präsentieren. Die Idee hinter diesem Projekt ist es, eine generische Codebasis zu haben, die mit wenigen Konfigurationsoptionen und ein paar CSS-Rules an die Gegebenheiten und die Gestaltung der Konferenz angepasst werden können.

Development

Während der Entwicklung kann der eingebaute PHP-Webserver verwendet werden:

$ ./serve.sh
[Thu Jan  1 13:37:42 1970] PHP 8.2.7 Development Server (http://localhost:8000) started
Press Ctrl-C to quit.
…

Unterstützt wird PHP ab 7.4.

Docker

Wer lieber Docker mag, kann auch folgende Zeile verwenden:

docker run -it -p 8000:8000 -v "$PWD":/app -w /app php:7-cli ./serve.sh 0.0.0.0 8000

Abhängigkeiten

apt install php8.2 php8.2-curl php8.2-xml
# - or -
apt install php php-curl php-xml

Dateidownload testen

./download.sh

Konfiguration der einzelnen Konferenzen

Die Seite kann für mehrere parallel laufende Konferenzen gleichzeitig verwendet werden. Jede Konferenz wird über einen Ordner unterhalb von configs/conferences konfiguriert. In diesen Ordnern können jeweils folgende Dateien abgelegt werden, welche das Verhalten bzw. die Gestaltung der jeweiligen Konferenzseite bestimmen, im Folgendem am:

  • config.json – steuert das Verhalten der gesamten Konferenzseite. Dein Editor sollte dir über das referenzierte JSON Schema die einzelnen Felder erklären – die meisten Feature-Flags pro Raum oder auch die OverviewPage Config sind nicht mehr notwendig, da inzwischen die Defaults entsprechend angepasst wurden.
  • config.php – steuert das Verhalten der gesamten Konferenzseite wenn keine config.json existiert. Inzwischen Deprecated – bitte am besten direkt config.json verwenden.
  • main.less – steuert die Gestaltung der Konferenzseite.
  • weitere Assets wie .png oder .svg-Dateien, die aus der main.less heraus referenziert werden können.

Siehe auch https://c3voc.de/wiki/software:streamingwebsite#add_a_new_conference

Setup

Das Setup beim VOC besteht aus einem Hidden-Master-Server, welcher den PHP-Code in einem nginx ausführt. Dahinter kommen n Frontend-Caches, wobei für kleine Events n eigentlich fast immer =1 ist. Für große Events (Camp, Congress) können wir aber sehr einfach weitere Frontend-Caches bei verschiedenen Hostern hinzu deployen.

Zur Vorbereitung einer Konferenz oder zur Weiterentwickelung der Seite ist es hilfreich, sich das Teil lokal aufzusetzen. Am einfachsten geht das mit 'nem Apachen, denn die beiliegende .htaccess konfiguriert das URL-Rewriting gleich richtig. Bei nginx muss das in der globalen nginx.conf ungefähr so eingestellt werden:

location / {
    rewrite /(.*) /index.php?route=$1 last;
}

Abweichend von der Default-Config muss in PHP das Flag short_open_tag = On gesetzt werden.

Deployment (auf der VOC Infrastruktur)

see deploy.sh bzw. https://c3voc.de/wiki/software:streamingwebsite

JSON-API

Unter der URL http://streaming.media.ccc.de/streams/v2.json bietet die Streaming-Webseite eine Übersicht über alle konfigurierten Räume und Streams in einem maschinenlesbaren Format an. Dieses kann z.B. genutzt werden, um in den diversen Anwendungen, die sich rund um das Konferenzgeschehen entwickelt haben, Player und Links zu Liveübertragungen anzubieten.

Wie die URL vermuten lässt, ist die API versioniert. Dies bedeutet, dass in der v2.json keine Felder entfernt werden oder ihre Bedeutung ändern – es können aber durchaus neue Felder hinzukommen. Eine formalere Spezifikation des JSON-Formats ist tbd. Ein Beispiel kann hier betrachtet werden.

Bekannte Nutzer der API

Troubleshooting

Falsche PHP-Version

Wenn serve.sh einen Fehler wirft wie z.B. PHP Fatal error: Uncaught ErrorException: Required parameter $rules follows optional parameter $value in /<path-to-repository>/lib/less.php/Less.php:5501 kann es sein, dass du eine falsche PHP-Version verwendest. Wenn php --version 8 oder neuer zurückgibt, dann ist deine Version zu neu. Versuche auf deinem Betriebssystem PHP 7.4 zu installieren und in den Skripts, die zu benötigst, die Version anzupassen. Zum Beispiel wird dann aus

# vorher
php -S localhost:$port -d short_open_tag=true index.php

dann

# nachher
php7.4 -S localhost:$port -d short_open_tag=true index.php

Fehlermeldung Call to undefined function iconv()

Wenn du beim Aufrufen der Seite im Browser nur eine leere Seite siehst, schau in dein Terminal, ob es einen Fehler gab. Wenn du einen Fehler wie PHP Fatal error: Uncaught Error: Call to undefined function iconv() siehst, ist bei dir die iconv-Extention nicht aktiviert. Du kannst diese in deiner globalen php.ini aktivieren. Wo diese Datei liegt kannst du mit php --ini bzw. php7 --ini rausfinden. Suche in der Datei nach der richtigen Zeile und entferne das Semikolon am Anfang. Wenn es kein Semikolon gibt, sollte die Extension bereits aktiviert sein.

// vorher
;extension=iconv
// nachher
extension=iconv

Fehlermeldung lessc: command not found

Wenn du beim Ausführen von Skripten den Fehler lessc: command not found bekommst, fehlt dir ein less-Compiler. Es gibt verschiedene Arten, sich einen less-Compiler zu installieren. Falls du npm verwendest, kannst du beispielsweise less global installieren mit npm install -g less. Anschließen sollte lessc dann global auf deinem System verfügbar sein.

streaming-website's People

Contributors

1uk4sh avatar a-tze avatar benjaminwand avatar bjoern-r avatar danimo avatar dedeibel avatar derchrisuk avatar derpeter avatar do1jlr avatar florob avatar florolf avatar hexchen avatar ischluff avatar jbeyerstedt avatar jwacalex avatar kunsi avatar lukas2511 avatar mazdermind avatar meise avatar n0emis avatar oe1rfc avatar peterhasse avatar robbi5 avatar saerdnaer avatar sophieschi avatar thomic avatar tu500 avatar v0tti avatar windauer avatar zuntrax avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

streaming-website's Issues

Show only mapped rooms in the Schedule

As a conference organize i want the Schedule-View by default to only show the rooms mapped to a stream and respect my room-order

IT should still be possible to override the rooms and sorting with the roomfilter (possibly renaming the property with backwards compatibility)

Feature request: Skip 10 seconds replay 10 seconds

Especially for long talks it would be nice to have a button to replay the last 10 seconds or skip 10 seconds.
I find my self often watching the videos on a second screen and doing something else on my main screen, if I miss a detail in a talk, I have to fiddle around with the progress bar to find the right position again.

Default Schedule-Names to Display-Names

As a conference-organizer I only want to write the Room-Names once

Change the default of the Schedule-Name of a Room to the Display-Name of that room (from the slug as it's currently the case)

deployment should deploy local code

Instead of requiring to have all commpit pushed to master, the deploy script should allow to deploy from the local branch, too. To do this, it should use rsync to copy the required files to the remote location(s) and fix the permissions afterwards via ssh.

Adding Time to coming up events

The coming up at the top of the streaming site, when there is no current stream, don't shows the time when the next event starts but only the date. This is fine for things far in the future but for events that are already "today" the time would be very useful.

Piwik-Tracking

As a conference-organizer I want to be able to enable/disable Piwik-Tracking in the config.php. As a visitor I want a tracking-Code that does not leave a Tracking-Cookie

Important metrics:

  • Provider
  • Country, maybe City
  • Device-Type
  • Browser-Type

Important Actions:

  • Stream breakups
  • HD/SD/Slides/Audio selection
  • Feedback/Schedule selection

Important technical/ppolitical things:

  • Respect Do-Not-Track header
  • Do not leave a cookie
  • Explain reasoning and technical implementation
  • Must be completely removable from Frontend via config-option

Dash-Player as Beta-Option

As a Website-Visitor I want to access the new experimental Dash-Streams but they should be clearly distinguishable from the main-streams and marked as being beta. As a Conference-Organizer i want to enable/disable Dash-Capabilities via the config.php.

A good place might be in a Tab next to Video/Audio/Slides.
TODO: decide which player to use.

API: add information to be able to generate relive configuration

Aktuell muss man in unserem Setup die Details zu den einzelnen Streams an zwei Stellen angeben: Bei der streaming-webseite Beispiel und im Relive-System, dort sieht die Config aktuell so aus:

FAHRPLAN_URL=https://events.ccc.de/congress/2014/Fahrplan/schedule.xml
MEDIA_CONFERENCE_ID=54

STREAM_s1="Saal 1"
STREAM_s2="Saal 2"
STREAM_s3="Saal G"
STREAM_s4="Saal 6"

RELIVE_RESOLUTION="hd"

Damit man die Relive-Config aus der streaming-website Config generiert werden kann sind folgende Anpassungen notwendig:

streaming-website API v1? Beispiel-Ausgabe:

  • room->STREAM als eigenes Feld mit ausgeben
  • room->SCHEDULE_NAME als eigenes Feld mit ausgeben
  • FAHRPLAN_URL ausgeben
  • MEDIA_CONFERENCE_ID ausgeben oder Media API anpassen(s.u)

Streams-API v2

We should set up a v2 Streams-Api that incorporates the following changes:

  • Group by "conference" (because of new mandator-system)
  • Rename "music" to "radio" (because there could also be audio-only streams with spoken content, see hack in 50c5c14)
  • tbc.

Web-IRC

183|Why does the chat feature require a plugin or extra program? Exchanging text messages is the most basic feature of HTTP(s). It should be working in all browsers.

We should think about running a Socket.io/IRC bridge on the lb's serving the website and implement this as part of the Website.

declarative downloading of schedule, relive & co.

writing a download.sh over and over again for every conference and needing to get all paths right every time is tedious and error prone.

Instead, the URLs should be configurable in the config.php and the downloader should be a php-command, which can be called from a cronjob.

Acceptance Criteria:

  • The configuration should not contain the conference-slug anymore because it is known from the name of the folder
  • There is a download-task that can be called as the downloader-user via a cronjob
  • The download-task tries to download all urls and puts them into the respective conference-folder
  • If the URL responds with an error or does not repond at all (timeout = 10s), the existing downloaded file may not be overwritten
  • The downloaded file must at all times have valid content. Moving a freshly downloaded file into its final location must be an atomic mv operation.
  • Files of conferences closed longer then 1 month should not be downloaded

Timezone-Independent Fahrplan

Time/Schedule feature is wrong (for me). Be cause of daylight savings time. Please use the server's time-stamp instead of the client's time. I don't intend to adjust my client clock. However, that should not disturb your features, like the schedule panel that is off by one hour because of unadjusted daylight savings time on my client. Have a nice day.

The Javascript should use UTC-Times locally and transform them into the Fahrplan's timezone, which should be configurable on the Conferences' config.

Unwind $GLOBALS['CONFIG']

In the early days, there was only one conference and so configuring it into $GLOBALS was fine. With the introduction of the multi-conference feature, hacks like this became necessary to remain compatibility with the old config format:

if(isset($GLOBALS['CONFIG']))

While preparing #20 this now -again- leads to the issue, that it's not possible to access all conferences' config options in one place, so now is probably the time to clean the $GLOBLAS thing up.

Twitter Hashtags here differ from wiki Congress Everywhere page

See streaming.media.ccc.de vs. events.ccc.de/congress/2019/wiki/index.php/Congress_Everywhere & the blog ("#hallA" vs. "#Ada").

Should/Can this be aligned by changing

'GROUPS' => array(
'Live' => array(
'halla',
'hallb',
'hallc',
'halld',
'halle',
),
'Assemblies Live' => array(
'chaoswest',
'wikipakawg',
'oio',
'sz',
'cdc'
to reduce confusion & workload for signal angels & Congress Everywhere participants?

Subtitles line

There were some wishes which reached c3subtitles:
The area for the subtitles seems to be too big. It would be nice to have them smaler and more close to the bottom. It should only be visible if a line is displayed and then not necessarily several lines at once.

It was also asked if it is possible to implement the subtitles in the streams which are not visible in the webplayer.

Add current time display to event schedule under streams

Hi,

As the subject line suggests, it would be nice to have a current time display on events at links like https://streaming.media.ccc.de/35c3/halla , as otherwise times stated on such pages have no relation to anything.

I.e. coming from non-EU timezone, you can't tell in which timezone they are specified, how long it is until any of the times there and such.

To illustrate, imagine you're in Tahiti, time is XX:YY, and (without looking it up) see whole page of e.g. https://streaming.media.ccc.de/35c3/halla , as it is attached below.
You can clearly see timestamps on events there, but can you tell anything useful from them, e.g. in how long you should check back on a stream to start, or when specific even will be in your time?

I think putting current timestamp in the same exact format and timezone as events there under "now" (point marked "A" in the image) label will solve this issue - e.g. it'd read something like "now: 10:08 CET" (at point marked "A") and next event is clearly marked as "11:00 - 11:30" (point marked "B"), so about 50 minutes until that.

Cheers!

screen shot 2018-12-27 at 13 56 55-fullpage

Feedback tab: Prefill IP connectivity

The checkboxes for "IP connectivity" should be profiled by some kind of javascript code. I believe many users don't know if their Browser/Player prefers IPv4 or IPv6.

HTML5 player for ReLive

Currently the ReLive site requires Flash. There are a few alternatives available now and it would be great to have a non-flash solution for the future.

For example MediaElement.js 3.x utilizes hls.js for HLS playback without flash in browsers that support MSE. A beta option akin to the DASH player option in live streams could work.

(If I'm at the wrong place here please let me know).

Feedback tab: Textfeld prominenter anzeigen

In der Praxis haben wir eig. das Textfeld am meisten beachtet und ausgewertet. Wir sollten es daher auch größer, ggf. Mehrzeilig anzeigen.

Das SQLite3 kann schon mehrzeilige Texte aufnehmen, der MQTT-Push-Client zeigt bislang nur die erste Zeile an.

Zeitversetzte Subtitle

Als Webseitenbesucher möchte ich einen Zeitversatz einstellen können, der beim Anzeigen der Subtitel-Zeile angewendet wird. Da die Subtitel oft schneller als das Video erscheinen, erleichtert es mir das lesen, wenn ich den Zeitversatz so einstellen kann, dass Subtitel und Video gleichzeitig erscheinen.

Fahrplan tweaks

schedule

  • The text for the individual items does not relate to the box size, leading to cut-offs
  • Maybe the room name could go to left side of the div so it only needs to be there once, this would make more space for title and speaker name
  • clicking on the schedule could also lead to the schedule it self (if a frab / pretalx export exists). This would especially useful for events in the future (currently it switches to corresponding streaming channel).
  • clicking on an event in the current room should not reload the page
  • It maybe a good idea to either allow the user to resize the fahrplan box or at least give it more space on high res screens

Feedback Configuration should be local

Things like Feedback-SQLite-File or login should not be per-conference configured but be global. The Feedback-Read-View should be global, too, and the results-sqlite should contain a Conference-Slug-Field.

Embed-Tab: Change to <object>

Using a -Tag should be more future-proof than using frames.

Old:
<iframe src="https://streaming.media.ccc.de/33c3/embed/hall1/hd/native/" width="1024" height="576" frameborder="none" allowfullscreen="allowfullscreen" seamless="seamless" scrolling="no"></iframe>

New:
<object data="https://streaming.media.ccc.de/33c3/embed/hall1/hd/native/" type="text/html" width="1024" height="576" style="border: 0; overflow: hidden;"></object>

Besseres Fehlverhalten bei Streamabbruch

Wenn ein Stream abbricht, soll die Webseite

  • 2x einen anderen Mirror probieren
  • nach 3 Fehlversuchen einen SD-Stream anbieten
  • einen Link zum Feedback-geben anbieten, welcher mit relevanten Infos angereichert ist (insb. Provider etc.)

Embed-Tab: iframe contains invalid attributes

iframe tag to embed streams uses invalid/unsupported attributes "frameborder", "allowfullscreen", "seamless" and "scrolling", which could lead to unexpected behavior of browsers.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.