Recherche avancée

Médias (91)

Autres articles (50)

  • Les autorisations surchargées par les plugins

    27 avril 2010, par

    Mediaspip core
    autoriser_auteur_modifier() afin que les visiteurs soient capables de modifier leurs informations sur la page d’auteurs

  • De l’upload à la vidéo finale [version standalone]

    31 janvier 2010, par

    Le chemin d’un document audio ou vidéo dans SPIPMotion est divisé en trois étapes distinctes.
    Upload et récupération d’informations de la vidéo source
    Dans un premier temps, il est nécessaire de créer un article SPIP et de lui joindre le document vidéo "source".
    Au moment où ce document est joint à l’article, deux actions supplémentaires au comportement normal sont exécutées : La récupération des informations techniques des flux audio et video du fichier ; La génération d’une vignette : extraction d’une (...)

  • HTML5 audio and video support

    13 avril 2011, par

    MediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
    The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
    For older browsers the Flowplayer flash fallback is used.
    MediaSPIP allows for media playback on major mobile platforms with the above (...)

Sur d’autres sites (9580)

  • Audio recorded with MediaRecorder on Chrome missing duration

    27 octobre 2016, par suppp111

    I am recording audio (oga/vorbis) files with MediaRecorder. When I record these file through Chrome I get problems : I cannot edit the files on ffmpeg and when I try to play them on Firefox it says they are corrupt (they do play fine on Chrome though).

    Looking at their metadata on ffmpeg I get this :

    Input #0, matroska,webm, from '91.oga':
     Metadata:
       encoder         : Chrome
     Duration: N/A, start: 0.000000, bitrate: N/A
       Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
    [STREAM]
    index=0
    codec_name=opus
    codec_long_name=Opus (Opus Interactive Audio Codec)
    profile=unknown
    codec_type=audio
    codec_time_base=1/48000
    codec_tag_string=[0][0][0][0]
    codec_tag=0x0000
    sample_fmt=fltp
    sample_rate=48000
    channels=1
    channel_layout=mono
    bits_per_sample=0
    id=N/A
    r_frame_rate=0/0
    avg_frame_rate=0/0
    time_base=1/1000
    start_pts=0
    start_time=0.000000
    duration_ts=N/A
    duration=N/A
    bit_rate=N/A
    max_bit_rate=N/A
    bits_per_raw_sample=N/A
    nb_frames=N/A
    nb_read_frames=N/A
    nb_read_packets=N/A
    DISPOSITION:default=1
    DISPOSITION:dub=0
    DISPOSITION:original=0
    DISPOSITION:comment=0
    DISPOSITION:lyrics=0
    DISPOSITION:karaoke=0
    DISPOSITION:forced=0
    DISPOSITION:hearing_impaired=0
    DISPOSITION:visual_impaired=0
    DISPOSITION:clean_effects=0
    DISPOSITION:attached_pic=0
    TAG:language=eng
    [/STREAM]
    [FORMAT]
    filename=91.oga
    nb_streams=1
    nb_programs=0
    format_name=matroska,webm
    format_long_name=Matroska / WebM
    start_time=0.000000
    duration=N/A
    size=7195
    bit_rate=N/A
    probe_score=100
    TAG:encoder=Chrome

    As you can see there are problems with the duration. I have looked at posts like this :
    How can I add predefined length to audio recorded from MediaRecorder in Chrome ?

    But even trying that, I got errors when trying to chop and merge files.For example when running :

    ffmpeg -f concat  -i 89_inputs.txt -c copy final.oga

    I get a lot of this :

    [oga @ 00000000006789c0] Non-monotonous DTS in output stream 0:0; previous: 57612, current: 1980; changing to 57613. This may result in incorrect timestamps in the output file.
    [oga @ 00000000006789c0] Non-monotonous DTS in output stream 0:0; previous: 57613, current: 2041; changing to 57614. This may result in incorrect timestamps in the output file.
    DTS -442721849179034176, next:42521 st:0 invalid dropping
    PTS -442721849179034176, next:42521 invalid dropping st:0
    [oga @ 00000000006789c0] Non-monotonous DTS in output stream 0:0; previous: 57614, current: 2041; changing to 57615. This may result in incorrect timestamps in the output file.
    [oga @ 00000000006789c0] Timestamps are unset in a packet for stream 0. This is deprecated and will stop working in the future. Fix your code to set the timestamps properly
    DTS -442721849179031296, next:42521 st:0 invalid dropping
    PTS -442721849179031296, next:42521 invalid dropping st:0

    Does anyone know what we need to do to audio files recorded from Chrome for them to be useful ? Or is there a problem with my setup ?

    Recorder js :

    if (navigator.getUserMedia) {
     console.log('getUserMedia supported.');

     var constraints = { audio: true };
     var chunks = [];

     var onSuccess = function(stream) {
       var mediaRecorder = new MediaRecorder(stream);

       record.onclick = function() {
         mediaRecorder.start();
         console.log(mediaRecorder.state);
         console.log("recorder started");
         record.style.background = "red";

         stop.disabled = false;
         record.disabled = true;

         var aud = document.getElementById("audioClip");
         start = aud.currentTime;
       }

       stop.onclick = function() {
         console.log(mediaRecorder.state);
         console.log("Recording request sent.");
         mediaRecorder.stop();
       }

       mediaRecorder.onstop = function(e) {
         console.log("data available after MediaRecorder.stop() called.");

         var audio = document.createElement('audio');
         audio.setAttribute('controls', '');
         audio.setAttribute('id', 'audioClip');

         audio.controls = true;
         var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs="vorbis"' });
         chunks = [];
         var audioURL = window.URL.createObjectURL(blob);
         audio.src = audioURL;

         sendRecToPost(blob);   // this just send the audio blob to the server by post
         console.log("recorder stopped");

       }
  • How to transcribe the recording for speech recognization

    29 mai 2021, par DLim

    After downloading and uploading files related to the mozilla deeepspeech, I started using google colab. I am using mozilla/deepspeech for speech recognization. The code shown below is for recording my audio. After recording the audio, I want to use a function/method to transcribe the recording into text. Everything compiles, but the text does not come out correctly. Any thoughts in my code ?

    


    """&#xA;To write this piece of code I took inspiration/code from a lot of places.&#xA;It was late night, so I&#x27;m not sure how much I created or just copied o.O&#xA;Here are some of the possible references:&#xA;https://blog.addpipe.com/recording-audio-in-the-browser-using-pure-html5-and-minimal-javascript/&#xA;https://stackoverflow.com/a/18650249&#xA;https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/&#xA;https://air.ghost.io/recording-to-an-audio-file-using-html5-and-js/&#xA;https://stackoverflow.com/a/49019356&#xA;"""&#xA;from google.colab.output import eval_js&#xA;from base64 import b64decode&#xA;from scipy.io.wavfile import read as wav_read&#xA;import io&#xA;import ffmpeg&#xA;&#xA;AUDIO_HTML = """&#xA;<code class="echappe-js">&lt;script&gt;&amp;#xA;var my_div = document.createElement(&quot;DIV&quot;);&amp;#xA;var my_p = document.createElement(&quot;P&quot;);&amp;#xA;var my_btn = document.createElement(&quot;BUTTON&quot;);&amp;#xA;var t = document.createTextNode(&quot;Press to start recording&quot;);&amp;#xA;&amp;#xA;my_btn.appendChild(t);&amp;#xA;//my_p.appendChild(my_btn);&amp;#xA;my_div.appendChild(my_btn);&amp;#xA;document.body.appendChild(my_div);&amp;#xA;&amp;#xA;var base64data = 0;&amp;#xA;var reader;&amp;#xA;var recorder, gumStream;&amp;#xA;var recordButton = my_btn;&amp;#xA;&amp;#xA;var handleSuccess = function(stream) {&amp;#xA;  gumStream = stream;&amp;#xA;  var options = {&amp;#xA;    //bitsPerSecond: 8000, //chrome seems to ignore, always 48k&amp;#xA;    mimeType : &amp;#x27;audio/webm;codecs=opus&amp;#x27;&amp;#xA;    //mimeType : &amp;#x27;audio/webm;codecs=pcm&amp;#x27;&amp;#xA;  };            &amp;#xA;  //recorder = new MediaRecorder(stream, options);&amp;#xA;  recorder = new MediaRecorder(stream);&amp;#xA;  recorder.ondataavailable = function(e) {            &amp;#xA;    var url = URL.createObjectURL(e.data);&amp;#xA;    var preview = document.createElement(&amp;#x27;audio&amp;#x27;);&amp;#xA;    preview.controls = true;&amp;#xA;    preview.src = url;&amp;#xA;    document.body.appendChild(preview);&amp;#xA;&amp;#xA;    reader = new FileReader();&amp;#xA;    reader.readAsDataURL(e.data); &amp;#xA;    reader.onloadend = function() {&amp;#xA;      base64data = reader.result;&amp;#xA;      //console.log(&quot;Inside FileReader:&quot; &amp;#x2B; base64data);&amp;#xA;    }&amp;#xA;  };&amp;#xA;  recorder.start();&amp;#xA;  };&amp;#xA;&amp;#xA;recordButton.innerText = &quot;Recording... press to stop&quot;;&amp;#xA;&amp;#xA;navigator.mediaDevices.getUserMedia({audio: true}).then(handleSuccess);&amp;#xA;&amp;#xA;&amp;#xA;function toggleRecording() {&amp;#xA;  if (recorder &amp;amp;&amp;amp; recorder.state == &quot;recording&quot;) {&amp;#xA;      recorder.stop();&amp;#xA;      gumStream.getAudioTracks()[0].stop();&amp;#xA;      recordButton.innerText = &quot;Saving the recording... pls wait!&quot;&amp;#xA;  }&amp;#xA;}&amp;#xA;&amp;#xA;// https://stackoverflow.com/a/951057&amp;#xA;function sleep(ms) {&amp;#xA;  return new Promise(resolve =&gt; setTimeout(resolve, ms));&amp;#xA;}&amp;#xA;&amp;#xA;var data = new Promise(resolve=&gt;{&amp;#xA;//recordButton.addEventListener(&quot;click&quot;, toggleRecording);&amp;#xA;recordButton.onclick = ()=&gt;{&amp;#xA;toggleRecording()&amp;#xA;&amp;#xA;sleep(2000).then(() =&gt; {&amp;#xA;  // wait 2000ms for the data to be available...&amp;#xA;  // ideally this should use something like await...&amp;#xA;  //console.log(&quot;Inside data:&quot; &amp;#x2B; base64data)&amp;#xA;  resolve(base64data.toString())&amp;#xA;&amp;#xA;});&amp;#xA;&amp;#xA;}&amp;#xA;});&amp;#xA;      &amp;#xA;&lt;/script&gt;&#xA;"""&#xA;&#xA;def get_audio() :&#xA;  display(HTML(AUDIO_HTML))&#xA;  data = eval_js("data")&#xA;  binary = b64decode(data.split(',')[1])&#xA;  &#xA;  process = (ffmpeg&#xA;    .input('pipe:0')&#xA;    .output('pipe:1', format='wav')&#xA;    .run_async(pipe_stdin=True, pipe_stdout=True, pipe_stderr=True, quiet=True, overwrite_output=True)&#xA;  )&#xA;  output, err = process.communicate(input=binary)&#xA;  &#xA;  riff_chunk_size = len(output) - 8&#xA;  # Break up the chunk size into four bytes, held in b.&#xA;  q = riff_chunk_size&#xA;  b = []&#xA;  for i in range(4) :&#xA;      q, r = divmod(q, 256)&#xA;      b.append(r)&#xA;&#xA;  # Replace bytes 4:8 in proc.stdout with the actual size of the RIFF chunk.&#xA;  riff = output[:4] + bytes(b) + output[8 :]&#xA;&#xA;  sr, audio = wav_read(io.BytesIO(riff))&#xA;&#xA;  return audio, sr&#xA;&#xA;audio, sr = get_audio()&#xA;

    &#xA;

    def recordingTranscribe(audio):&#xA;  data16 = np.frombuffer(audio)&#xA;  return model.stt(data16)&#xA;

    &#xA;

    recordingTranscribe(audio)&#xA;

    &#xA;

  • Python Flask : Saving live stream video to a file periodically

    25 juillet 2023, par Sanjay Shahi

    I am creating a flask application with JavaScript to save the live video streams to a file.

    &#xA;

    What I am trying to achieve here is that, the video stream will be sent to flask application periodically (20 secs). The first time it will create a video and after that, the video needs to be merged to the existing file.

    &#xA;

    I am using SocketIO to transmit the video from JS.

    &#xA;

    `async function startCapture() {&#xA;  try {&#xA;    // Access the user&#x27;s webcam&#xA;    stream = await navigator.mediaDevices.getUserMedia({ &#xA;      video: true,&#xA;      audio: { echoCancellation: true, noiseSuppression: true },&#xA;    });&#xA;&#xA;    // Attach the stream to the video element&#xA;    video.srcObject = stream;&#xA;&#xA;    // Create a new MediaRecorder instance to capture video chunks&#xA;    recorder = new MediaRecorder(stream);&#xA;&#xA;    // Event handler for each data chunk received from the recorder&#xA;    recorder.ondataavailable = (e) => {&#xA;      const videoBlob = e.data;&#xA;      transmitVideoChunk(videoBlob);&#xA;      chunks.push(e.data);&#xA;    };&#xA;&#xA;    // Start recording the video stream&#xA;    recorder.start();&#xA;&#xA;    // Enable/disable buttons&#xA;    startButton.disabled = true;&#xA;    stopButton.disabled = false;&#xA;&#xA;    // Start transmitting video chunks at the desired fps&#xA;    startTransmitting();&#xA;  } catch (error) {&#xA;    console.error(&#x27;Error accessing webcam:&#x27;, error);&#xA;  }&#xA;}`&#xA;

    &#xA;

    `&#xA;function transmitVideoBlob() {&#xA;    const videoBlob = new Blob(chunks, { type: &#x27;video/webm&#x27; });&#xA;    socket.emit(&#x27;video_data&#x27;, videoBlob);&#xA;    // Clear the chunks array&#xA;    chunks = [];&#xA;}&#xA;&#xA;// Start transmitting video chunks at the desired fps&#xA;function startTransmitting() {&#xA;    const videoInterval = 20000; // Interval between frames in milliseconds&#xA;    videoIntervalId = setInterval(() => {&#xA;        transmitVideoBlob();&#xA;    }, videoInterval);&#xA;}`&#xA;

    &#xA;

    In flask, I have created a function, which will call create_videos.&#xA;video_path : location to save the video&#xA;filename : file name of video&#xA;new_video_data_blob : binary data received from JS

    &#xA;

    def create_videos(video_path, filename, new_video_data_blob):&#xA;    chunk_filename = os.path.join(video_path, f"{str(uuid1())}_{filename}")&#xA;    final_filename = os.path.join(video_path, filename)&#xA;    out_final_filename = os.path.join(video_path, "out_" &#x2B; filename)&#xA;    # Save the current video chunk to a file&#xA;    with open(chunk_filename, "wb") as f:&#xA;        print("create file chunk ", chunk_filename)&#xA;        f.write(new_video_data_blob)&#xA;&#xA;    if not os.path.exists(final_filename):&#xA;        # If the final video file doesn&#x27;t exist, rename the current chunk file&#xA;        os.rename(chunk_filename, final_filename)&#xA;    else:&#xA;        while not os.path.exists(chunk_filename):&#xA;            time.sleep(0.1)&#xA;        # If the final video file exists, use FFmpeg to concatenate the current chunk with the existing file&#xA;        try:&#xA;            subprocess.run(&#xA;                [&#xA;                    "ffmpeg",&#xA;                    "-i",&#xA;                    f"concat:{final_filename}|{chunk_filename}",&#xA;                    "-c",&#xA;                    "copy",&#xA;                    "-y",&#xA;                    out_final_filename,&#xA;                ]&#xA;            )&#xA;            while not os.path.exists(out_final_filename):&#xA;                time.sleep(0.1)&#xA;            os.remove(final_filename)&#xA;            os.rename(out_final_filename, final_filename)&#xA;&#xA;        except Exception as e:&#xA;            print(e)&#xA;        # Remove the current chunk file&#xA;        os.remove(chunk_filename)&#xA;    return final_filename&#xA;

    &#xA;

    When I record as well using below code in JS

    &#xA;

    audio: { echoCancellation: true, noiseSuppression: true },&#xA;

    &#xA;

    I get the following error.

    &#xA;

    [NULL @ 0x55e697e8c900] Invalid profile 5.&#xA;[webm @ 0x55e697ec3180] Non-monotonous DTS in output stream 0:0; previous: 37075, current: 37020; changing to 37075. This may result in incorrect timestamps in the output file.&#xA;[NULL @ 0x55e697e8d8c0] Error parsing Opus packet header.&#xA;    Last message repeated 1 times&#xA;[NULL @ 0x55e697e8c900] Invalid profile 5.&#xA;[NULL @ 0x55e697e8d8c0] Error parsing Opus packet header.&#xA;

    &#xA;

    enter image description here

    &#xA;

    But when I record video only, it will work fine.

    &#xA;

    How can I merge the new binary data to the existing video file ?

    &#xA;