Recherche avancée

Médias (0)

Mot : - Tags -/navigation

Aucun média correspondant à vos critères n’est disponible sur le site.

Autres articles (46)

  • La file d’attente de SPIPmotion

    28 novembre 2010, par

    Une file d’attente stockée dans la base de donnée
    Lors de son installation, SPIPmotion crée une nouvelle table dans la base de donnée intitulée spip_spipmotion_attentes.
    Cette nouvelle table est constituée des champs suivants : id_spipmotion_attente, l’identifiant numérique unique de la tâche à traiter ; id_document, l’identifiant numérique du document original à encoder ; id_objet l’identifiant unique de l’objet auquel le document encodé devra être attaché automatiquement ; objet, le type d’objet auquel (...)

  • Personnaliser en ajoutant son logo, sa bannière ou son image de fond

    5 septembre 2013, par

    Certains thèmes prennent en compte trois éléments de personnalisation : l’ajout d’un logo ; l’ajout d’une bannière l’ajout d’une image de fond ;

  • MediaSPIP v0.2

    21 juin 2013, par

    MediaSPIP 0.2 est la première version de MediaSPIP stable.
    Sa date de sortie officielle est le 21 juin 2013 et est annoncée ici.
    Le fichier zip ici présent contient uniquement les sources de MediaSPIP en version standalone.
    Comme pour la version précédente, il est nécessaire d’installer manuellement l’ensemble des dépendances logicielles sur le serveur.
    Si vous souhaitez utiliser cette archive pour une installation en mode ferme, il vous faudra également procéder à d’autres modifications (...)

Sur d’autres sites (6105)

  • FFmpeg command to capture video/Audio from Android mobile

    17 juillet 2023, par Uday

    I'm trying to capture Vido/Audio from my Android mobile using FFmpeg.
Tried the below commands and the recorded clip has nothing in it, it's just a dark black screen with no audio/video.

    


    Actually, I wanted to recode the audio from Android Mobile.
Any Idea what's wrong with this command ?

    


    Given all Android permission for the microphone & camera.

    


    Lib used : ffmpeg_kit_flutter

    


    Command :

    


    FFmpegKit.execute('-y -f android_camera -i 0:0 -r 30 -c:v mpeg4 -f mp4 "/storage/emulated/0/Download/androidvideo.mp4"');

FFmpegKit.execute('-y -f android_camera -i 0:0 -r 30 -pixel_format bgr0 "/storage/emulated/0/Download/androidvideo.mp4"');


    


    This command records video but no audio in it

    


    FFmpegKit.execute('-video_size hd720 -f android_camera -camera_index 1 -i anything -r 10 -t 00:00:15 "$dir/androidvideo.mp4”');


    


    Response

    


    I/flutter (22881): Loading ffmpeg-kit-flutter.
D/ffmpeg-kit-flutter(22881): FFmpegKitFlutterPlugin com.arthenica.ffmpegkit.flutter.FFmpegKitFlutterPlugin@7f3db78 started listening to events on io.flutter.plugin.common.EventChannel$IncomingStreamRequestHandler$EventSinkImplementation@518a6b1.
I/flutter (22881): Loaded ffmpeg-kit-flutter-android-https-arm64-v8a-5.1.0.
D/VendorTagDescriptor(22881): addVendorDescriptor: vendor tag id 3854507339 added
W/MapperHal(22881): buffer descriptor with invalid usage bits 0x202000
D/ViewRootImpl@53a7452[FlutterFragmentActivity](22881): ViewPostIme pointer 1
W/ACameraCaptureSession(22881): Device is closed but session 0 is not notified
I/flutter (22881): logs:ffmpeg version n5.1.2
I/flutter (22881): logs: Copyright (c) 2000-2022 the FFmpeg developers
I/flutter (22881): logs:
I/flutter (22881): logs:  built with Android (7155654, based on r399163b1) clang version 11.0.5 (https://android.googlesource.com/toolchain/llvm-project 87f1315dfbea7c137aa2e6d362dbb457e388158d)
I/flutter (22881): logs:  configuration: --cross-prefix=aarch64-linux-android- --sysroot=/files/android-sdk/ndk/22.1.7171670/toolchains/llvm/prebuilt/linux-x86_64/sysroot --prefix=/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/ffmpeg --pkg-config=/usr/bin/pkg-config --enable-version3 --arch=aarch64 --cpu=armv8-a --target-os=android --enable-neon --enable-asm --enable-inline-asm --ar=aarch64-linux-android-ar --cc=aarch64-linux-android24-clang --cxx=aarch64-linux-android24-clang++ --ranlib=aarch64-linux-android-ranlib --strip=aarch64-linux-android-strip --nm=aarch64-linux-android-nm --extra-libs='-L/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/cpu-features/lib -lndk_compat' --disable-autodetect --enable-cross-compile --enable-pic --enable-jni --enable-optimizations --enable-swscale --disable-static --enable-shared --enable-pthreads --enable-v4l2-m2m --disable-outdev=fbdev --disable-indev=fbdev --enable-small --disable-xmm-clobber-test --disable-debug --enable-lto --disable-neon-clobber-test --disable-programs --
I/flutter (22881): logs:  libavutil      57. 28.100 / 57. 28.100
I/flutter (22881): logs:  libavcodec     59. 37.100 / 59. 37.100
I/flutter (22881): logs:  libavformat    59. 27.100 / 59. 27.100
I/flutter (22881): logs:  libavdevice    59.  7.100 / 59.  7.100
I/flutter (22881): logs:  libavfilter     8. 44.100 /  8. 44.100
I/flutter (22881): logs:  libswscale      6.  7.100 /  6.  7.100
I/flutter (22881): logs:  libswresample   4.  7.100 /  4.  7.100
I/flutter (22881): logs:[android_camera @ 0x7450bb2f80] Requested video_size 0x0 not available, falling back to 4032x3024
I/flutter (22881): logs:Input #0, android_camera, from '0:0':
I/flutter (22881): logs:  Duration: 
I/flutter (22881): logs:N/A
I/flutter (22881): logs:, start: 
I/flutter (22881): logs:299109.760553
I/flutter (22881): logs:, bitrate: 
I/flutter (22881): logs:N/A
I/flutter (22881): logs:
I/flutter (22881): logs:  Stream #0:0
I/flutter (22881): logs:: Video: rawvideo (NV21 / 0x3132564E), nv21, 4032x3024
I/flutter (22881): logs:, 
I/flutter (22881): logs:30 fps, 
I/flutter (22881): logs:30 tbr, 
I/flutter (22881): logs:1000000000.00 tbn
I/flutter (22881): logs:
I/flutter (22881): logs:    Side data:
I/flutter (22881): logs:      
I/flutter (22881): logs:displaymatrix: rotation of -90.00 degrees
I/flutter (22881): logs:
I/flutter (22881): logs:Stream mapping:
I/flutter (22881): logs:  Stream #0:0 -> #0:0
I/flutter (22881): logs: (rawvideo (native) -> mpeg4 (native))
I/flutter (22881): logs:
I/flutter (22881): logs:Press [q] to stop, [?] for help
I/flutter (22881): logs:Output #0, mp4, to '/storage/emulated/0/Download/androidvideo.mp4':
I/flutter (22881): logs:  Metadata:
I/flutter (22881): logs:    encoder         : 
I/flutter (22881): logs:Lavf59.27.100
I/flutter (22881): logs:
I/flutter (22881): logs:  Stream #0:0
I/flutter (22881): logs:: Video: mpeg4 (mp4v / 0x7634706D), yuv420p(tv, progressive), 3024x4032, q=2-31, 200 kb/s
I/flutter (22881): logs:, 
I/flutter (22881): logs:30 fps, 
I/flutter (22881): logs:15360 tbn
I/flutter (22881): logs:
I/flutter (22881): logs:    Metadata:
I/flutter (22881): logs:      encoder         : 
I/flutter (22881): logs:Lavc59.37.100 mpeg4
I/flutter (22881): logs:
I/flutter (22881): logs:    Side data:
I/flutter (22881): logs:      
I/flutter (22881): logs:cpb: 
I/flutter (22881): logs:bitrate max/min/avg: 0/0/200000 buffer size: 0 
I/flutter (22881): logs:vbv_delay: N/A
I/flutter (22881): logs:
I/flutter (22881): logs:      
I/flutter (22881): logs:displaymatrix: rotation of -0.00 degrees
I/flutter (22881): logs:
I/flutter (22881): logs:frame=    1 fps=0.0 q=3.4 size=       0kB time=00:00:00.00 bitrate=5415.4kbits/s speed=32.5x    
I/flutter (22881): logs:frame=    2 fps=0.0 q=2.0 size=       0kB time=00:00:00.03 bitrate=  10.5kbits/s speed=0.0475x    
I/flutter (22881): logs:frame=    9 fps=6.8 q=10.9 size=     256kB time=00:00:00.26 bitrate=7863.7kbits/s dup=5 drop=0 speed=0.202x    
I/flutter (22881): logs:frame=   13 fps=6.6 q=22.7 size=     512kB time=00:00:00.40 bitrate=10484.9kbits/s dup=7 drop=0 speed=0.203x    
I/flutter (22881): logs:frame=   28 fps=8.4 q=31.0 size=     512kB time=00:00:00.90 bitrate=4660.4kbits/s dup=20 drop=0 speed=0.269x    
I/flutter (22881): logs:frame=   55 fps= 11 q=31.0 size=    1024kB time=00:00:01.80 bitrate=4660.4kbits/s dup=45 drop=0 speed=0.368x    
I/flutter (22881): logs:frame=   60 fps=9.8 q=31.0 size=    1280kB time=00:00:01.96 bitrate=5331.7kbits/s dup=49 drop=0 speed=0.321x    
I/flutter (22881): logs:frame=   73 fps=9.4 q=31.0 Lsize=    1500kB time=00:00:02.40 bitrate=5121.4kbits/s dup=61 drop=0 speed=0.309x    
I/flutter (22881): logs:video:1499kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.079011%
I/flutter (22881): logs:frame=   73 fps=9.4 q=31.0 Lsize=N/A time=00:00:02.40 bitrate=N/A dup=61 drop=0 speed=0.309x    
I/flutter (22881): logs:video:1499kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown
I/flutter (22881): logs:[android_camera @ 0x7450bb2f80] Android camera capture session was closed.
I/flutter (22881): logs:Exiting normally, received signal 2.
I/flutter (22881): output:ffmpeg version n5.1.2 Copyright (c) 2000-2022 the FFmpeg developers
I/flutter (22881):   built with Android (7155654, based on r399163b1) clang version 11.0.5 (https://android.googlesource.com/toolchain/llvm-project 87f1315dfbea7c137aa2e6d362dbb457e388158d)
I/flutter (22881):   configuration: --cross-prefix=aarch64-linux-android- --sysroot=/files/android-sdk/ndk/22.1.7171670/toolchains/llvm/prebuilt/linux-x86_64/sysroot --prefix=/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/ffmpeg --pkg-config=/usr/bin/pkg-config --enable-version3 --arch=aarch64 --cpu=armv8-a --target-os=android --enable-neon --enable-asm --enable-inline-asm --ar=aarch64-linux-android-ar --cc=aarch64-linux-android24-clang --cxx=aarch64-linux-android24-clang++ --ranlib=aarch64-linux-android-ranlib --strip=aarch64-linux-android-strip --nm=aarch64-linux-android-nm --extra-libs='-L/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/cpu-features/lib -lndk_compat' --disable-autodetect --enable-cross-compile --enable-pic --enable-jni --enable-optimizations --enable-s
I/flutter (22881): failStackTrace:null
I/flutter (22881): result code:255


    


  • FFmpeg command to capture Audio from Android mobile

    24 novembre 2023, par Uday

    I'm trying to capture Audio from my Android mobile using FFmpeg.
Tried the below commands and the recorded clip has no Audio in it, it's just a dark black screen with no audio/video.

    


    Basically, I want to stream the live microphone audio to the RTSP server

    


    Given all Android permission for the microphone & camera.

    


    Lib used : ffmpeg_kit_flutter

    


    Here are the commands which I tried :

    


     FFmpegKit.execute('-y -f android_camera -i 0:1 -r 30 -c:a aac -f rtsp -rtsp_transport tcp "$Url"');


    


    Command :

    


    FFmpegKit.execute('-y -f android_camera -i 0:1 -r 30 -c:a libmp3lame -qscale:a 2 "/storage/emulated/0/Download/androidvideo.mp3"');

FFmpegKit.execute('-y -f android_camera -i 0:0 -r 30 -c:a wavpack -b:a 64k "/storage/emulated/0/Download/androidvideo.wav"');


    


    This command records video but no audio in it

    


    FFmpegKit.execute('-video_size hd720 -f android_camera -camera_index 1 -i anything -r 10 -t 00:00:15 "$dir/androidvideo.mp4”');


    


    Response

    


    I/flutter (22881): Loading ffmpeg-kit-flutter.
D/ffmpeg-kit-flutter(22881): FFmpegKitFlutterPlugin com.arthenica.ffmpegkit.flutter.FFmpegKitFlutterPlugin@7f3db78 started listening to events on io.flutter.plugin.common.EventChannel$IncomingStreamRequestHandler$EventSinkImplementation@518a6b1.
I/flutter (22881): Loaded ffmpeg-kit-flutter-android-https-arm64-v8a-5.1.0.
D/VendorTagDescriptor(22881): addVendorDescriptor: vendor tag id 3854507339 added
W/MapperHal(22881): buffer descriptor with invalid usage bits 0x202000
D/ViewRootImpl@53a7452[FlutterFragmentActivity](22881): ViewPostIme pointer 1
W/ACameraCaptureSession(22881): Device is closed but session 0 is not notified
I/flutter (22881): logs:ffmpeg version n5.1.2
I/flutter (22881): logs: Copyright (c) 2000-2022 the FFmpeg developers
I/flutter (22881): logs:
I/flutter (22881): logs:  built with Android (7155654, based on r399163b1) clang version 11.0.5 (https://android.googlesource.com/toolchain/llvm-project 87f1315dfbea7c137aa2e6d362dbb457e388158d)
I/flutter (22881): logs:  configuration: --cross-prefix=aarch64-linux-android- --sysroot=/files/android-sdk/ndk/22.1.7171670/toolchains/llvm/prebuilt/linux-x86_64/sysroot --prefix=/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/ffmpeg --pkg-config=/usr/bin/pkg-config --enable-version3 --arch=aarch64 --cpu=armv8-a --target-os=android --enable-neon --enable-asm --enable-inline-asm --ar=aarch64-linux-android-ar --cc=aarch64-linux-android24-clang --cxx=aarch64-linux-android24-clang++ --ranlib=aarch64-linux-android-ranlib --strip=aarch64-linux-android-strip --nm=aarch64-linux-android-nm --extra-libs='-L/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/cpu-features/lib -lndk_compat' --disable-autodetect --enable-cross-compile --enable-pic --enable-jni --enable-optimizations --enable-swscale --disable-static --enable-shared --enable-pthreads --enable-v4l2-m2m --disable-outdev=fbdev --disable-indev=fbdev --enable-small --disable-xmm-clobber-test --disable-debug --enable-lto --disable-neon-clobber-test --disable-programs --
I/flutter (22881): logs:  libavutil      57. 28.100 / 57. 28.100
I/flutter (22881): logs:  libavcodec     59. 37.100 / 59. 37.100
I/flutter (22881): logs:  libavformat    59. 27.100 / 59. 27.100
I/flutter (22881): logs:  libavdevice    59.  7.100 / 59.  7.100
I/flutter (22881): logs:  libavfilter     8. 44.100 /  8. 44.100
I/flutter (22881): logs:  libswscale      6.  7.100 /  6.  7.100
I/flutter (22881): logs:  libswresample   4.  7.100 /  4.  7.100
I/flutter (22881): logs:[android_camera @ 0x7450bb2f80] Requested video_size 0x0 not available, falling back to 4032x3024
I/flutter (22881): logs:Input #0, android_camera, from '0:0':
I/flutter (22881): logs:  Duration: 
I/flutter (22881): logs:N/A
I/flutter (22881): logs:, start: 
I/flutter (22881): logs:299109.760553
I/flutter (22881): logs:, bitrate: 
I/flutter (22881): logs:N/A
I/flutter (22881): logs:
I/flutter (22881): logs:  Stream #0:0
I/flutter (22881): logs:: Video: rawvideo (NV21 / 0x3132564E), nv21, 4032x3024
I/flutter (22881): logs:, 
I/flutter (22881): logs:30 fps, 
I/flutter (22881): logs:30 tbr, 
I/flutter (22881): logs:1000000000.00 tbn
I/flutter (22881): logs:
I/flutter (22881): logs:    Side data:
I/flutter (22881): logs:      
I/flutter (22881): logs:displaymatrix: rotation of -90.00 degrees
I/flutter (22881): logs:
I/flutter (22881): logs:Stream mapping:
I/flutter (22881): logs:  Stream #0:0 -> #0:0
I/flutter (22881): logs: (rawvideo (native) -> mpeg4 (native))
I/flutter (22881): logs:
I/flutter (22881): logs:Press [q] to stop, [?] for help
I/flutter (22881): logs:Output #0, mp4, to '/storage/emulated/0/Download/androidvideo.mp4':
I/flutter (22881): logs:  Metadata:
I/flutter (22881): logs:    encoder         : 
I/flutter (22881): logs:Lavf59.27.100
I/flutter (22881): logs:
I/flutter (22881): logs:  Stream #0:0
I/flutter (22881): logs:: Video: mpeg4 (mp4v / 0x7634706D), yuv420p(tv, progressive), 3024x4032, q=2-31, 200 kb/s
I/flutter (22881): logs:, 
I/flutter (22881): logs:30 fps, 
I/flutter (22881): logs:15360 tbn
I/flutter (22881): logs:
I/flutter (22881): logs:    Metadata:
I/flutter (22881): logs:      encoder         : 
I/flutter (22881): logs:Lavc59.37.100 mpeg4
I/flutter (22881): logs:
I/flutter (22881): logs:    Side data:
I/flutter (22881): logs:      
I/flutter (22881): logs:cpb: 
I/flutter (22881): logs:bitrate max/min/avg: 0/0/200000 buffer size: 0 
I/flutter (22881): logs:vbv_delay: N/A
I/flutter (22881): logs:
I/flutter (22881): logs:      
I/flutter (22881): logs:displaymatrix: rotation of -0.00 degrees
I/flutter (22881): logs:
I/flutter (22881): logs:frame=    1 fps=0.0 q=3.4 size=       0kB time=00:00:00.00 bitrate=5415.4kbits/s speed=32.5x    
I/flutter (22881): logs:frame=    2 fps=0.0 q=2.0 size=       0kB time=00:00:00.03 bitrate=  10.5kbits/s speed=0.0475x    
I/flutter (22881): logs:frame=    9 fps=6.8 q=10.9 size=     256kB time=00:00:00.26 bitrate=7863.7kbits/s dup=5 drop=0 speed=0.202x    
I/flutter (22881): logs:frame=   13 fps=6.6 q=22.7 size=     512kB time=00:00:00.40 bitrate=10484.9kbits/s dup=7 drop=0 speed=0.203x    
I/flutter (22881): logs:frame=   28 fps=8.4 q=31.0 size=     512kB time=00:00:00.90 bitrate=4660.4kbits/s dup=20 drop=0 speed=0.269x    
I/flutter (22881): logs:frame=   55 fps= 11 q=31.0 size=    1024kB time=00:00:01.80 bitrate=4660.4kbits/s dup=45 drop=0 speed=0.368x    
I/flutter (22881): logs:frame=   60 fps=9.8 q=31.0 size=    1280kB time=00:00:01.96 bitrate=5331.7kbits/s dup=49 drop=0 speed=0.321x    
I/flutter (22881): logs:frame=   73 fps=9.4 q=31.0 Lsize=    1500kB time=00:00:02.40 bitrate=5121.4kbits/s dup=61 drop=0 speed=0.309x    
I/flutter (22881): logs:video:1499kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.079011%
I/flutter (22881): logs:frame=   73 fps=9.4 q=31.0 Lsize=N/A time=00:00:02.40 bitrate=N/A dup=61 drop=0 speed=0.309x    
I/flutter (22881): logs:video:1499kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown
I/flutter (22881): logs:[android_camera @ 0x7450bb2f80] Android camera capture session was closed.
I/flutter (22881): logs:Exiting normally, received signal 2.
I/flutter (22881): output:ffmpeg version n5.1.2 Copyright (c) 2000-2022 the FFmpeg developers
I/flutter (22881):   built with Android (7155654, based on r399163b1) clang version 11.0.5 (https://android.googlesource.com/toolchain/llvm-project 87f1315dfbea7c137aa2e6d362dbb457e388158d)
I/flutter (22881):   configuration: --cross-prefix=aarch64-linux-android- --sysroot=/files/android-sdk/ndk/22.1.7171670/toolchains/llvm/prebuilt/linux-x86_64/sysroot --prefix=/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/ffmpeg --pkg-config=/usr/bin/pkg-config --enable-version3 --arch=aarch64 --cpu=armv8-a --target-os=android --enable-neon --enable-asm --enable-inline-asm --ar=aarch64-linux-android-ar --cc=aarch64-linux-android24-clang --cxx=aarch64-linux-android24-clang++ --ranlib=aarch64-linux-android-ranlib --strip=aarch64-linux-android-strip --nm=aarch64-linux-android-nm --extra-libs='-L/home/taner/Projects/ffmpeg-kit/prebuilt/android-arm64/cpu-features/lib -lndk_compat' --disable-autodetect --enable-cross-compile --enable-pic --enable-jni --enable-optimizations --enable-s
I/flutter (22881): failStackTrace:null
I/flutter (22881): result code:255


    


  • Converting a voice recording into an mp3

    21 juillet 2023, par Raphael M

    For a vue.js messaging project, I'm using the wavesurfer.js library to record voice messages. However Google chrome gives me an audio/webm blob and Safari gives me an audio/mp4 blob.

    


    I'm trying to find a solution to transcode the blob into audio/mp3. I've tried several methods, including ffmpeg. However, ffmpeg gives me an error when compiling "npm run dev" : "Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'".

    


    "@ffmpeg/core": "^0.11.0",
"@ffmpeg/ffmpeg": "^0.11.6"


    


    I tried to downgrade ffmpeg

    


    "@ffmpeg/core": "^0.9.0",
"@ffmpeg/ffmpeg": "^0.9.8"


    


    I no longer get the error message when compiling, but when I want to convert my audio stream, the console displays a problem with SharedBuffer : "Uncaught (in promise) ReferenceError : SharedArrayBuffer is not defined".

    


    Here's my complete code below.
Is there a reliable way of transcoding the audio stream into mp3 ?

    


    Can you give me an example ?

    


    Thanks

    


    <template>&#xA;  <div class="left-panel">&#xA;    <header class="radial-blue">&#xA;      <div class="container">&#xA;        <h1 class="mb-30">Posez votre premi&#xE8;re question &#xE0; nos th&#xE9;rapeutes</h1>&#xA;        <p><b>Attention</b>, vous disposez seulement de 2 messages. Veillez &#xE0; les utiliser de mani&#xE8;re judicieuse !</p>&#xA;        <div class="available-messages">&#xA;          <div class="item disabled">&#xA;            <span>Message 1</span>&#xA;          </div>&#xA;          <div class="item">&#xA;            <span>Message 2</span>&#xA;          </div>&#xA;        </div>&#xA;      </div>&#xA;    </header>&#xA;  </div>&#xA;  <div class="right-panel">&#xA;    <div class="messagerie bg-light">&#xA;      <messaging ref="messagingComponent"></messaging>&#xA;      <footer>&#xA;        <button type="button"><img src="http://stackoverflow.com/assets/backoffice/images/record-start.svg" style='max-width: 300px; max-height: 300px' /></button>&#xA;        <div class="loading-animation">&#xA;          <img src="http://stackoverflow.com/assets/backoffice/images/record-loading.svg" style='max-width: 300px; max-height: 300px' />&#xA;        </div>&#xA;        <button type="button"><img src="http://stackoverflow.com/assets/backoffice/images/record-stop.svg" style='max-width: 300px; max-height: 300px' /></button>&#xA;        <div class="textarea gradient text-dark">&#xA;          <textarea placeholder="Posez votre question"></textarea>&#xA;        </div>&#xA;        <div class="loading-text">Chargement de votre microphone en cours...</div>&#xA;        <div class="loading-text">Envoi de votre message en cours...</div>&#xA;        <div ref="visualizer"></div>&#xA;        <button type="button"><img src="http://stackoverflow.com/assets/backoffice/images/send.svg" style='max-width: 300px; max-height: 300px' /></button>&#xA;        <div>&#xA;          {{ formatTimer() }}&#xA;        </div>&#xA;      </footer>&#xA;    </div>&#xA;  </div>&#xA;</template>&#xA;&#xA;<code class="echappe-js">&lt;script&gt;&amp;#xA;import Messaging from &quot;./Messaging.vue&quot;;&amp;#xA;import { createFFmpeg, fetchFile } from &amp;#x27;@ffmpeg/ffmpeg&amp;#x27;;&amp;#xA;&amp;#xA;export default {&amp;#xA;  data() {&amp;#xA;    return {&amp;#xA;      isMicrophoneLoading: false,&amp;#xA;      isSubmitLoading: false,&amp;#xA;      isMobile: false,&amp;#xA;      isMessagerie: false,&amp;#xA;      isRecording: false,&amp;#xA;      audioUrl: &amp;#x27;&amp;#x27;,&amp;#xA;      messageText: &amp;#x27;&amp;#x27;,&amp;#xA;      message:null,&amp;#xA;      wavesurfer: null,&amp;#xA;      access:(this.isMobile?&amp;#x27;denied&amp;#x27;:&amp;#x27;granted&amp;#x27;),&amp;#xA;      maxMinutes: 5,&amp;#xA;      orangeTimer: 3,&amp;#xA;      redTimer: 4,&amp;#xA;      timer: 0,&amp;#xA;      timerInterval: null,&amp;#xA;      ffmpeg: null,&amp;#xA;    };&amp;#xA;  },&amp;#xA;  components: {&amp;#xA;    Messaging,&amp;#xA;  },&amp;#xA;  mounted() {&amp;#xA;    this.checkScreenSize();&amp;#xA;    window.addEventListener(&amp;#x27;resize&amp;#x27;, this.checkScreenSize);&amp;#xA;&amp;#xA;    if(!this.isMobile)&amp;#xA;    {&amp;#xA;      this.$moment.locale(&amp;#x27;fr&amp;#x27;);&amp;#xA;      window.addEventListener(&amp;#x27;beforeunload&amp;#x27;, (event) =&gt; {&amp;#xA;        if (this.isMessagerie) {&amp;#xA;          event.preventDefault();&amp;#xA;          event.returnValue = &amp;#x27;&amp;#x27;;&amp;#xA;        }&amp;#xA;      });&amp;#xA;&amp;#xA;      this.initializeWaveSurfer();&amp;#xA;    }&amp;#xA;  },&amp;#xA;  beforeUnmount() {&amp;#xA;    window.removeEventListener(&amp;#x27;resize&amp;#x27;, this.checkScreenSize);&amp;#xA;  },&amp;#xA;  methods: {&amp;#xA;    checkScreenSize() {&amp;#xA;      this.isMobile = window.innerWidth &lt; 1200;&amp;#xA;&amp;#xA;      const windowHeight = window.innerHeight;&amp;#xA;      const navbarHeight = this.$navbarHeight;&amp;#xA;      let padding = parseInt(navbarHeight &amp;#x2B;181);&amp;#xA;&amp;#xA;      const messageListHeight = windowHeight - padding;&amp;#xA;      this.$refs.messagingComponent.$refs.messageList.style.height = messageListHeight &amp;#x2B; &amp;#x27;px&amp;#x27;;&amp;#xA;    },&amp;#xA;    showMessagerie() {&amp;#xA;      this.isMessagerie = true;&amp;#xA;      this.$refs.messagingComponent.scrollToBottom();&amp;#xA;    },&amp;#xA;    checkMicrophoneAccess() {&amp;#xA;      if (navigator.mediaDevices &amp;amp;&amp;amp; navigator.mediaDevices.getUserMedia) {&amp;#xA;&amp;#xA;        return navigator.mediaDevices.getUserMedia({audio: true})&amp;#xA;            .then(function (stream) {&amp;#xA;              stream.getTracks().forEach(function (track) {&amp;#xA;                track.stop();&amp;#xA;              });&amp;#xA;              return true;&amp;#xA;            })&amp;#xA;            .catch(function (error) {&amp;#xA;              console.error(&amp;#x27;Erreur lors de la demande d\&amp;#x27;acc&amp;#xE8;s au microphone:&amp;#x27;, error);&amp;#xA;              return false;&amp;#xA;            });&amp;#xA;      } else {&amp;#xA;        console.error(&amp;#x27;getUserMedia n\&amp;#x27;est pas support&amp;#xE9; par votre navigateur.&amp;#x27;);&amp;#xA;        return false;&amp;#xA;      }&amp;#xA;    },&amp;#xA;    initializeWaveSurfer() {&amp;#xA;      this.wavesurfer = this.$wavesurfer.create({&amp;#xA;        container: &amp;#x27;#visualizer&amp;#x27;,&amp;#xA;        barWidth: 3,&amp;#xA;        barHeight: 1.5,&amp;#xA;        height: 46,&amp;#xA;        responsive: true,&amp;#xA;        waveColor: &amp;#x27;rgba(108,115,202,0.3)&amp;#x27;,&amp;#xA;        progressColor: &amp;#x27;rgba(108,115,202,1)&amp;#x27;,&amp;#xA;        cursorColor: &amp;#x27;transparent&amp;#x27;&amp;#xA;      });&amp;#xA;&amp;#xA;      this.record = this.wavesurfer.registerPlugin(this.$recordPlugin.create());&amp;#xA;    },&amp;#xA;    startRecording() {&amp;#xA;      const _this = this;&amp;#xA;      this.isMicrophoneLoading = true;&amp;#xA;&amp;#xA;      setTimeout(() =&gt;&amp;#xA;      {&amp;#xA;        _this.checkMicrophoneAccess().then(function (accessible)&amp;#xA;        {&amp;#xA;          if (accessible) {&amp;#xA;            _this.record.startRecording();&amp;#xA;&amp;#xA;            _this.record.once(&amp;#x27;startRecording&amp;#x27;, () =&gt; {&amp;#xA;              _this.isMicrophoneLoading = false;&amp;#xA;              _this.isRecording = true;&amp;#xA;              _this.updateChildMessage( &amp;#x27;server&amp;#x27;, &amp;#x27;Allez-y ! Vous pouvez enregistrer votre message audio maintenant. La dur&amp;#xE9;e maximale autoris&amp;#xE9;e pour votre enregistrement est de 5 minutes.&amp;#x27;, &amp;#x27;text&amp;#x27;, &amp;#x27;&amp;#x27;, &amp;#x27;Message automatique&amp;#x27;);&amp;#xA;              _this.startTimer();&amp;#xA;            });&amp;#xA;          } else {&amp;#xA;            _this.isRecording = false;&amp;#xA;            _this.isMicrophoneLoading = false;&amp;#xA;            _this.$swal.fire({&amp;#xA;              title: &amp;#x27;Microphone non d&amp;#xE9;tect&amp;#xE9;&amp;#x27;,&amp;#xA;              html: &amp;#x27;&lt;p&gt;Le microphone de votre appareil est inaccessible ou l\&amp;#x27;acc&amp;#xE8;s a &amp;#xE9;t&amp;#xE9; refus&amp;#xE9;.&lt;/p&gt;&lt;p&gt;Merci de v&amp;#xE9;rifier les param&amp;#xE8;tres de votre navigateur afin de v&amp;#xE9;rifier les autorisations de votre microphone.&lt;/p&gt;&amp;#x27;,&amp;#xA;              footer: &amp;#x27;&lt;a href='http://stackoverflow.com/contact'&gt;Vous avez besoin d\&amp;#x27;aide ?&lt;/a&gt;&amp;#x27;,&amp;#xA;            });&amp;#xA;          }&amp;#xA;        });&amp;#xA;      }, 100);&amp;#xA;    },&amp;#xA;    stopRecording() {&amp;#xA;      this.stopTimer();&amp;#xA;      this.isRecording = false;&amp;#xA;      this.isSubmitLoading = true;&amp;#xA;      this.record.stopRecording();&amp;#xA;&amp;#xA;      this.record.once(&amp;#x27;stopRecording&amp;#x27;, () =&gt; {&amp;#xA;        const blobUrl = this.record.getRecordedUrl();&amp;#xA;        fetch(blobUrl).then(response =&gt; response.blob()).then(blob =&gt; {&amp;#xA;          this.uploadAudio(blob);&amp;#xA;        });&amp;#xA;      });&amp;#xA;    },&amp;#xA;    startTimer() {&amp;#xA;      this.timerInterval = setInterval(() =&gt; {&amp;#xA;        this.timer&amp;#x2B;&amp;#x2B;;&amp;#xA;        if (this.timer === this.maxMinutes * 60) {&amp;#xA;          this.stopRecording();&amp;#xA;        }&amp;#xA;      }, 1000);&amp;#xA;    },&amp;#xA;    stopTimer() {&amp;#xA;      clearInterval(this.timerInterval);&amp;#xA;      this.timer = 0;&amp;#xA;    },&amp;#xA;    formatTimer() {&amp;#xA;      const minutes = Math.floor(this.timer / 60);&amp;#xA;      const seconds = this.timer % 60;&amp;#xA;      const formattedMinutes = minutes &lt; 10 ? `0${minutes}` : minutes;&amp;#xA;      const formattedSeconds = seconds &lt; 10 ? `0${seconds}` : seconds;&amp;#xA;      return `${formattedMinutes}:${formattedSeconds}`;&amp;#xA;    },&amp;#xA;    async uploadAudio(blob)&amp;#xA;    {&amp;#xA;      const format = blob.type === &amp;#x27;audio/webm&amp;#x27; ? &amp;#x27;webm&amp;#x27; : &amp;#x27;mp4&amp;#x27;;&amp;#xA;&amp;#xA;      // Convert the blob to MP3&amp;#xA;      const mp3Blob = await this.convertToMp3(blob, format);&amp;#xA;&amp;#xA;      const s3 = new this.$AWS.S3({&amp;#xA;        accessKeyId: &amp;#x27;xxx&amp;#x27;,&amp;#xA;        secretAccessKey: &amp;#x27;xxx&amp;#x27;,&amp;#xA;        region: &amp;#x27;eu-west-1&amp;#x27;&amp;#xA;      });&amp;#xA;&amp;#xA;      var currentDate = new Date();&amp;#xA;      var filename = currentDate.getDate().toString() &amp;#x2B; &amp;#x27;-&amp;#x27; &amp;#x2B; currentDate.getMonth().toString() &amp;#x2B; &amp;#x27;-&amp;#x27; &amp;#x2B; currentDate.getFullYear().toString() &amp;#x2B; &amp;#x27;--&amp;#x27; &amp;#x2B; currentDate.getHours().toString() &amp;#x2B; &amp;#x27;-&amp;#x27; &amp;#x2B; currentDate.getMinutes().toString() &amp;#x2B; &amp;#x27;.mp4&amp;#x27;;&amp;#xA;&amp;#xA;      const params = {&amp;#xA;        Bucket: &amp;#x27;xxx/audio&amp;#x27;,&amp;#xA;        Key: filename,&amp;#xA;        Body: mp3Blob,&amp;#xA;        ACL: &amp;#x27;public-read&amp;#x27;,&amp;#xA;        ContentType: &amp;#x27;audio/mp3&amp;#x27;&amp;#xA;      }&amp;#xA;&amp;#xA;      s3.upload(params, (err, data) =&gt; {&amp;#xA;        if (err) {&amp;#xA;          console.error(&amp;#x27;Error uploading audio:&amp;#x27;, err)&amp;#xA;        } else {&amp;#xA;          const currentDate = this.$moment();&amp;#xA;          const timestamp = currentDate.format(&amp;#x27;dddd DD MMMM YYYY HH:mm&amp;#x27;);&amp;#xA;&amp;#xA;          this.updateChildMessage( &amp;#x27;client&amp;#x27;, &amp;#x27;&amp;#x27;, &amp;#x27;audio&amp;#x27;, mp3Blob, timestamp);&amp;#xA;          this.isSubmitLoading = false;&amp;#xA;        }&amp;#xA;      });&amp;#xA;    },&amp;#xA;    async convertToMp3(blob, format) {&amp;#xA;      const ffmpeg = createFFmpeg({ log: true });&amp;#xA;      await ffmpeg.load();&amp;#xA;&amp;#xA;      const inputPath = &amp;#x27;input.&amp;#x27; &amp;#x2B; format;&amp;#xA;      const outputPath = &amp;#x27;output.mp3&amp;#x27;;&amp;#xA;&amp;#xA;      ffmpeg.FS(&amp;#x27;writeFile&amp;#x27;, inputPath, await fetchFile(blob));&amp;#xA;&amp;#xA;      await ffmpeg.run(&amp;#x27;-i&amp;#x27;, inputPath, &amp;#x27;-acodec&amp;#x27;, &amp;#x27;libmp3lame&amp;#x27;, outputPath);&amp;#xA;&amp;#xA;      const mp3Data = ffmpeg.FS(&amp;#x27;readFile&amp;#x27;, outputPath);&amp;#xA;      const mp3Blob = new Blob([mp3Data.buffer], { type: &amp;#x27;audio/mp3&amp;#x27; });&amp;#xA;&amp;#xA;      ffmpeg.FS(&amp;#x27;unlink&amp;#x27;, inputPath);&amp;#xA;      ffmpeg.FS(&amp;#x27;unlink&amp;#x27;, outputPath);&amp;#xA;&amp;#xA;      return mp3Blob;&amp;#xA;    },&amp;#xA;    sendMessage() {&amp;#xA;      this.isSubmitLoading = true;&amp;#xA;      if (this.messageText.trim() !== &amp;#x27;&amp;#x27;) {&amp;#xA;        const emmet = &amp;#x27;client&amp;#x27;;&amp;#xA;        const text = this.escapeHTML(this.messageText)&amp;#xA;            .replace(/\n/g, &amp;#x27;&lt;br&gt;&amp;#x27;);&amp;#xA;&amp;#xA;        const currentDate = this.$moment();&amp;#xA;        const timestamp = currentDate.format(&amp;#x27;dddd DD MMMM YYYY HH:mm&amp;#x27;);&amp;#xA;&amp;#xA;        this.$nextTick(() =&gt; {&amp;#xA;          this.messageText = &amp;#x27;&amp;#x27;;&amp;#xA;&amp;#xA;          const textarea = document.getElementById(&amp;#x27;messageTextarea&amp;#x27;);&amp;#xA;          if (textarea) {&amp;#xA;            textarea.scrollTop = 0;&amp;#xA;            textarea.scrollLeft = 0;&amp;#xA;          }&amp;#xA;        });&amp;#xA;&amp;#xA;        this.updateChildMessage(emmet, text, &amp;#x27;text&amp;#x27;, &amp;#x27;&amp;#x27;, timestamp);&amp;#xA;        this.isSubmitLoading = false;&amp;#xA;      }&amp;#xA;    },&amp;#xA;    escapeHTML(text) {&amp;#xA;      const map = {&amp;#xA;        &amp;#x27;&amp;amp;&amp;#x27;: &amp;#x27;&amp;amp;amp;&amp;#x27;,&amp;#xA;        &amp;#x27;&lt;&amp;#x27;: &amp;#x27;&amp;amp;lt;&amp;#x27;,&amp;#xA;        &amp;#x27;&gt;&amp;#x27;: &amp;#x27;&amp;amp;gt;&amp;#x27;,&amp;#xA;        &amp;#x27;&quot;&amp;#x27;: &amp;#x27;&amp;amp;quot;&amp;#x27;,&amp;#xA;        &quot;&amp;#x27;&quot;: &amp;#x27;&amp;amp;#039;&amp;#x27;,&amp;#xA;        &quot;`&quot;: &amp;#x27;&amp;amp;#x60;&amp;#x27;,&amp;#xA;        &quot;/&quot;: &amp;#x27;&amp;amp;#x2F;&amp;#x27;&amp;#xA;      };&amp;#xA;      return text.replace(/[&amp;amp;&lt;&gt;&quot;&amp;#x27;`/]/g, (match) =&gt; map[match]);&amp;#xA;    },&amp;#xA;    updateChildMessage(emmet, text, type, blob, timestamp) {&amp;#xA;      const newMessage = {&amp;#xA;        id: this.$refs.messagingComponent.lastMessageId &amp;#x2B; 1,&amp;#xA;        emmet: emmet,&amp;#xA;        text: text,&amp;#xA;        type: type,&amp;#xA;        blob: blob,&amp;#xA;        timestamp: timestamp&amp;#xA;      };&amp;#xA;&amp;#xA;      this.$refs.messagingComponent.updateMessages(newMessage);&amp;#xA;    }&amp;#xA;  },&amp;#xA;};&amp;#xA;&lt;/script&gt;&#xA;

    &#xA;

Navigation