Merge branch 'encode-several-qualities'

benIT · May 16, 2018 · afd0c31 · afd0c31
2 parents 9278e5f + 9751a81
commit afd0c31
Show file tree

Hide file tree

Showing 16 changed files with 217 additions and 132 deletions.
diff --git a/.env b/.env
@@ -35,7 +35,7 @@ APP_ABOUT='Welcome to this app. e-media video streaming'
 USE_X_SENDFILE_MODE=true
 
 #set the following variable to the nginx location for serving large files. [see configure your webserver](https://github.com/benIT/e-media/wiki/Webserver)
-NGINX_LOCATION_X_SEND_FILE=stream-files
+NGINX_LOCATION_X_SEND_FILE=/video-xsendfile/
 
 #the name of the hls playlist at format 'm3u8' generated by encoder
 HLS_PLAYLIST_NAME=index.m3u8
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -52,6 +52,7 @@ module.exports = function (grunt) {
                         'node_modules/chosen-js/chosen.min.css',
                         'node_modules/slabText/css/slabtext.css',
                         'node_modules/videosjs-assets/dist/video-js.min.css',
+                        'node_modules/videojs-qualityselector/dist/videojs-qualityselector.css'
                     ],
                     'web/assets/dist/css/app.min.css': [
                         'web/assets/css/jumbotron-narrow.css',
@@ -95,8 +96,8 @@ module.exports = function (grunt) {
                     'node_modules/videosjs-assets/dist/video.min.js',
                     'node_modules/slabText/js/jquery.slabtext.js',
                     'vendor/willdurand/js-translation-bundle/Resources/public/js/translator.min.js',
-                    'node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.min.js'
-
+                    'node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.min.js',
+                    'node_modules/videojs-qualityselector/dist/videojs-qualityselector.js',
                 ],
                 dest: 'web/assets/dist/js/vendors.min.js'
             }

diff --git a/app/Resources/translations/stream.fr.yml b/app/Resources/translations/stream.fr.yml
@@ -1,4 +1,8 @@
 encoding:
   error: Une erreur d'encodage est survenue
   pending: Votre vidéo est en cours d'encodage... patientez quelques instants
-  no-playlist: Une erreur d'encodage est survenue. Impossible de trouver la liste de lecture
+  no-playlist: Une erreur d'encodage est survenue. Impossible de trouver la liste de lecture
+framesize:
+  switcher: Choisissez une autre qualité vidéo
+  720x480: Qualité standard (720x480)
+  1280x720: Qualité supérieure (1280x720)
diff --git a/app/Resources/views/stream/hls.html.twig b/app/Resources/views/stream/hls.html.twig
diff --git a/app/Resources/views/stream/stream.html.twig b/app/Resources/views/stream/stream.html.twig
@@ -0,0 +1,43 @@
+{% extends 'base.html.twig' %}
+{% trans_default_domain "stream" %}
+{% block body %}
+    <h2>{{ video.title }}</h2>
+    <div class="row marketing">
+    {% if not error %}
+        <div style="background-color: #eceeef;border-radius: 3px; padding: 20px" class="col-lg-12">
+        <p class="lead"> {{ video.description }}</p>
+        <video id="my-video" class="video-js js-default-skin vjs-16-9" controls width="200px" poster="{{ asset('assets/dist/image/video-poster.png') }}" data-setup="{}">
+            <source src="{{ absolute_url(path('stream_download_hls_file',{'id':video.id,'frameSize': frameSize,'file': 'index.m3u8'} )) }}" type="application/x-mpegURL">
+        </video>
+        <form action="">
+            <select data-placeholder="{% trans %}framesize.switcher{% endtrans %}" class="form-control chosen-select quality-selector" tabindex="1">
+                <option value=""></option>
+                {% set frameSizes = ['720x480', '1280x720'] %}
+                {% for  frameSize in frameSizes %}
+                    {% if  app.request.uri != absolute_url(path('stream_video',{'id':video.id,'frameSize': frameSize} )) %}
+                        {% set label='framesize.'~frameSize|raw %}
+                        <option value="{{ absolute_url(path('stream_video',{'id':video.id,'frameSize': frameSize} )) }}">{{ label|trans }}</option>
+                    {% endif %}
+                {% endfor %}
+            </select>
+        </form>
+        <a class="btn btn-primary" href="{{ path('video_index') }}">{% trans from "common" %}back{% endtrans %}</a>
+    {% else %}
+        <img class="img-centered" src="{{ asset('assets/dist/image/tv-broken.png') }}" width="250px" alt="">
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block javascripts%}
+<script>
+    $('.quality-selector').on('change', function(evt, params) {
+        console.log( params.selected);
+        if(window.location.href !== params.selected){
+         window.location= params.selected;
+        }
+    });
+{% if error %}
+    setTimeout(function() { window.location=window.location;},10000);
+{% endif %}
+</script>
+{% endblock %}
diff --git a/app/Resources/views/video/show.html.twig b/app/Resources/views/video/show.html.twig
@@ -1,32 +1,73 @@
 {% extends 'base.html.twig' %}
 {% trans_default_domain "video" %}
 {% block body %}
-    <h2>{{ video.title }}</h2>
-    <div class="row marketing">
-        <div style="background-color: #eceeef;border-radius: 3px; padding: 20px" class="col-lg-12">
-            <p class="lead"> {{ video.description }}</p>
-            <video id="my-video" class="video-js js-default-skin vjs-16-9" controls preload="auto" width="640" height="264"
-                   poster="{{ asset('assets/dist/image/video-poster.png') }}"
-                   data-setup="{}">
-                <source src="{{ path('video_download',{'id':video.id}) }}" type='video/mp4'>
-                {#<source src="MY_VIDEO.webm" type='video/webm'>#}
-                <p class="vjs-no-js">
-                    To view this video please enable JavaScript, and consider upgrading to a web browser that
-                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
-                </p>
-            </video>
-            {% trans %}index.tag{% endtrans %}
-            {% for tag in video.tags %}
-                <a href="{{ path('tag_show',{'id':tag.id}) }}">
-                    <div class="tag">{{ tag.name }}</div>
-                </a>
-            {% endfor %}
-            {% trans %} index.created_by{% endtrans %} : <a href="{{ path('user_show',{'id':video.creator.id}) }}">{{ video.creator }}</a>
+    <style>
+        .row{
+            padding-bottom: 20px;
+        }
+    </style>
+    <h2>Informations</h2>
+    <div style="background-color:#eceeef;border-radius: 3px; padding: 20px">
+        <div class="row">
+            <div class="col-lg-2">
+                {% trans %}index.video_title{% endtrans %}
+            </div>
+            <div class="col-lg-8">
+                {{ video.title }}
+            </div>
         </div>
+        <div class="row">
+            <div class="col-lg-2">
+                {% trans %}index.description{% endtrans %}
+            </div>
+            <div class="col-lg-8">
+                {{ video.description }}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-2">
+                {% trans %}index.tag{% endtrans %}
+            </div>
+            <div class="col-lg-8">
+                {% for tag in video.tags %}
+                    <a class="btn btn-default" href="{{ path('tag_show',{'id':tag.id}) }}">{{ tag.name }}</a>
+                {% endfor %}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-2">
+                {% trans %} index.created_by{% endtrans %}
+            </div>
+            <div class="col-lg-8">
+                <a class="btn btn-default" href="{{ path('user_show',{'id':video.creator.id}) }}">{{ video.creator }}</a>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-2">
+                {% trans from "common" %}actions{% endtrans %}
+            </div>
+            <div class="col-lg-8">
+                <a class="btn btn-primary" href="{{ path('video_edit',{'id': video.id}) }}">{% trans from "common" %}update{% endtrans %}</a>
+                <a class="btn btn-info" data-toggle="modal" data-target="#modal-share-video" href="#">{% trans from "common" %}share{% endtrans %}</a>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-2">
+                {% trans %}form_create.file{% endtrans %}
+            </div>
+            <div class="col-lg-10">
+                <video id="my-video" class="video-js js-default-skin vjs-16-9" controls preload="auto"
+                       poster="{{ asset('assets/dist/image/video-poster.png') }}"
+                       data-setup="{}">
+                    <source src="{{ path('video_download',{'id':video.id}) }}" type='video/mp4'>
+                    <p class="vjs-no-js">
+                        To view this video please enable JavaScript, and consider upgrading to a web browser that
+                        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
+                    </p>
+                </video>
 
-        <a href="{{ path('video_edit',{'id': video.id}) }}">{% trans from "common" %}update{% endtrans %}</a> -
-        <a data-toggle="modal" data-target="#modal-share-video" href="#">{% trans from "common" %}share{% endtrans %}</a>
-
+            </div>
+        </div>
     </div>
     <a class="btn btn-primary" href="{{ path('video_index') }}">{% trans from "common" %}back{% endtrans %}</a>
     <div class="modal fade" id="modal-share-video" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
@@ -43,7 +84,7 @@
                         {% set videoLink =   absolute_url(path('video_download',{'id':video.id})) %}
                         {% trans from "video" %}share.download{% endtrans %} : <a href="{{ videoLink }}">{{ videoLink }}</a> <br>
                         <img class='img-centered' src="{{ qrcode_data_uri(videoLink, { writer: 'svg', size: 150 }) }}"/><br>
-                        {% set videoLinkHls =   absolute_url(path('video_hls',{'id':video.id})) %}
+                        {% set videoLinkHls =   absolute_url(path('stream_video',{'id':video.id})) %}
                         {% trans from "video" %}share.hls{% endtrans %} : <a href="{{ videoLinkHls }}">{{ videoLinkHls }}</a> <br>
                         <img class='img-centered' src="{{ qrcode_data_uri(videoLink, { writer: 'svg', size: 150 }) }}"/><br>
                         {% set videoLinkLti =   absolute_url(path('lti_show',{'id':video.id})) %}

diff --git a/app/config/security.yml b/app/config/security.yml
@@ -34,4 +34,4 @@ security:
         - { path: ^/video/, role: IS_AUTHENTICATED_FULLY }
         - { path: ^/stream/, role: IS_AUTHENTICATED_FULLY }
         - { path: ^/home, role: IS_AUTHENTICATED_FULLY }
-        - { path: ^/, role: IS_AUTHENTICATED_ANONYMOUSLY }
+        - { path: ^/, role: IS_AUTHENTICATED_FULLY }
diff --git a/bin/encoder/conf.sh b/bin/encoder/conf.sh
@@ -2,6 +2,8 @@
 ##################################################################
 #configuration
 ##################################################################
-MONITORDIR="web/e-media-data/video"
+MONITORDIR="..//e-media-data/video"
 LOGFILE='var/logs/encoder.log'
-declare -a VIDEO_EXTENSION=("mp4" "flv" "mkv");
+SEGMENT_DURATION=1
+declare -a VIDEO_EXTENSION=("mp4" "flv" "mkv");
+declare -a FRAME_SIZES_TO_PROCESS=("1280x720" "720x480");
diff --git a/bin/encoder/encodeAll.sh b/bin/encoder/encodeAll.sh
@@ -23,13 +23,16 @@ done
 for CURRENTDIR in $(ls -d ${MONITORDIR}/*)
 do
     echo ${CURRENTDIR}
-    if [ -f ${CURRENTDIR}/index.m3u8 ]; then
-        if [ "${ENCODE_EXISTING}" = true ]; then
-            launchEncoding ${CURRENTDIR}
+    for FRAME_SIZE in "${FRAME_SIZES_TO_PROCESS[@]}"
+    do
+        if [ -f ${CURRENTDIR}/${FRAME_SIZE}/index.m3u8 ]; then
+            if [ "${ENCODE_EXISTING}" = true ]; then
+                launchEncoding ${CURRENTDIR}
+            else
+                log "$LEVEL_INFO" "${CURRENTDIR}/${FRAME_SIZE} already encoded!"
+            fi
         else
-            log "$LEVEL_INFO" "${CURRENTDIR} already encoded!"
+            launchEncoding ${CURRENTDIR}
         fi
-    else
-        launchEncoding ${CURRENTDIR}
-    fi
+    done
 done
diff --git a/bin/encoder/encoder.sh b/bin/encoder/encoder.sh
@@ -1,13 +1,29 @@
 #!/bin/bash
 #this scripts to encode video: from a video file to a .index.m3u8 file for Http Live Streaming!
+# https://opensource.com/article/17/6/ffmpeg-convert-media-file-formats
 source 'bin/encoder/lib.sh'
 NEWFILE=$1
 log "$LEVEL_INFO" "video to encode detected: ${NEWFILE}"
 DIR=$(dirname ${NEWFILE})
+FILENAME=$(basename "$NEWFILE")
+EXTENSION="${FILENAME##*.}"
+FILENAME="${FILENAME%.*}"
+echo "evaluating ${file} : filename is ${FILENAME} and extension is ${EXTENSION}"
+
 rm -f ${DIR}/*.m3u8 ${DIR}/*.ts ${DIR}/lock ${DIR}/error
 touch ${DIR}/lock
 log "$LEVEL_INFO" "encoding video: ${NEWFILE}..."
-ffmpeg -i ${NEWFILE}  -hls_list_size 0 -f hls ${DIR}/index.m3u8 2> /dev/null
+
+for FRAME_SIZE in "${FRAME_SIZES_TO_PROCESS[@]}"
+do
+    rm -rf ${DIR}/${FRAME_SIZE}
+    mkdir -p ${DIR}/${FRAME_SIZE}
+    #generate framesize
+    ffmpeg -i ${NEWFILE} -c:a copy -s ${FRAME_SIZE} "${DIR}/${FRAME_SIZE}/${FILENAME}.${EXTENSION}" 2> /dev/null
+    ffmpeg -i ${DIR}/${FRAME_SIZE}/${FILENAME}.${EXTENSION} -hls_time ${SEGMENT_DURATION} -g ${SEGMENT_DURATION} -hls_list_size 0 -f hls ${DIR}/${FRAME_SIZE}/index.m3u8 2> /dev/null
+done
+#generate hls segment and playlist for original uploaded file too
+#ffmpeg -i ${NEWFILE} -hls_list_size 0 -f hls ${DIR}/index.m3u8 2> /dev/null
 if [ $? -eq 0 ]; then
     log "$LEVEL_INFO" "video encoded: ${NEWFILE}"
 else

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "load-grunt-tasks": "^0.6.0",
     "slabText": "freqdec/slabText#^2.2.0",
     "videojs-contrib-hls": "^5.12.2",
+    "videojs-qualityselector": "0.0.4",
     "videosjs-assets": "benIT/videosjs-assets"
   },
   "scripts": {