Recherche avancée

Sur d’autres sites (11613)

• Recording audio with MediaRecorder on iPhone with Safari and Chrome only 1 second long ? Mimetype and FFMPEG problem ?

  9 mai 2023, par Avatar

  I am using MediaRecorder to record the Microphone audio on a website.

  


  Javascript :

  


  var blob;
var blob_url;
var stream;
var recorder;
var chunks;

var media = {
    tag: 'audio',
    type: 'audio/ogg',
    ext: '.ogg',
    gUM: {audio: true}
};

navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => 
{
    stream = _stream;

    recorder = new MediaRecorder(stream);

    recorder.ondataavailable = e => 
    {
        // push data to chunks
        chunks.push(e.data);

        // recording has been stopped
        if(recorder.state == 'inactive') 
        {
            // audio data available
            blob = new Blob(chunks, {type: media.type });
            blob_url = URL.createObjectURL(blob);
            
            // send data to server
            uploadfile_audio();
        }
    };

    if(typeof(recorder)=='undefined')
    {
        alert('No microphone access');
        return;
    }

    chunks = [];
    recorder.start();
}


// when stop button is clicked
recorder.stop();
stream.getTracks().forEach( track => track.stop() );


  


  The audio stream (ogg format) is sent to the server.

  


  Since iPad/iPhone do not play ogg files, the recording file is converted to "mp3" using FFMPEG.

  


  This file is stored on the server.

  

  


  This works on Windows and MAC (Chrome and Safari), also on iPad (Safari) but not properly on iPhone (Chrome/Safari). Version : iPhone iOS 15.1.

  


  On iPhone the recording file is only 0:01 min in length. Size is always 17277 Bytes.

  


  What could be the issue ? (I cannot debug because I don't have a Mac.)

  


  Does the stream get interrupted ? Is the recording stopped after 1 second ?

  


  Update 1 :

  


  I have checked the incoming filesize of the browser-recorded file serverside. It seems to be coming in properly, because there are different sizes such as 184 kB.

  


  My guess is now that FFMPEG cannot handle the incoming file correctly. Which might have the wrong mimetype set in Javascript with type: 'audio/ogg',. Is another format needed ?

  


  The conversion code serverside :

  


  PHP

  


  $mp3file = shell_exec("ffmpeg -i ".$file_locationtmp." -vn -ar 44100 -ac 2 -b:a 128k ".$file_locationtmp.".mp3");


  


  I would need to find out the audio recording format used by iPhone but I couldn't.

  


  I tried to find the supporting mimetypes using https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported - however, it shows that NO mimetypes are supported on iPhone (neither in Chrome nor Safari).

  


  Update 2 :

  


  I used ffprobe to get the recording file information. It says Stream #0:0(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, mono, fltp, 2234 kb/s (default)

  


  Update 3 :

  


  It seems to be a problem with FFMPEG. See my new question How to convert AAC/MP4A to MP3 using FFMPEG in full length ? Audio file gets cut off after 1 second

  


• Why won't this encrypted HLS video play on iOS (but works on Windows Chrome via hls.js library) ?

  8 mai 2023, par Ryan

  I am trying to play an MP4 test video.

  


  My /home/vagrant/Code/example/public/hls_hls.keyInfo is :

  


  https://example.com/hls.key
/home/vagrant/Code/example/public/hls_hls.key
467216aae8a26fb699080812628031955e304a66e9e4480f9b70d31d8fe94e9a


  


  My /home/vagrant/Code/example/public/hls_hls.key was generated using PHP : hex2bin('467216aae8a26fb699080812628031955e304a66e9e4480f9b70d31d8fe94e9a')

  


  The ffmpeg command for encrypting the video as HLS playlist with "ts" files :

  


  '/usr/bin/ffmpeg' '-y' '-i' 'storage/app/sample_media2/2020-02-27/Sample_Videos_5.mp4' 
'-c:v' 'libx264' '-s:v' '1920x1080' '-crf' '20' '-sc_threshold' '0' '-g' '48' 
'-keyint_min' '48' '-hls_list_size' '0' 
'-hls_time' '10' '-hls_allow_cache' '0' '-b:v' '4889k' '-maxrate' '5866k' 
'-hls_segment_type' 'mpegts' '-hls_fmp4_init_filename' 'output_init.mp4' 
'-hls_segment_filename' 'storage/app/public/test/output_1080p_%04d.ts' 
'-hls_key_info_file' '/home/vagrant/Code/example/public/hls_hls.keyInfo' 
'-strict' '-2' '-threads' '12' 'storage/app/public/test/output_1080p.m3u8'


  


  Then, I know from https://caniuse.com/#search=hls that Windows Chrome won't be able to play the HLS video without a library, so I use https://github.com/video-dev/hls.js/, and Windows Chrome successfully plays the encrypted video !

  


  However, iOS Safari is unable to play it (with or without the hls.js library).

  


  On iOS Safari, when I try to play the video, I see just a quick glimpse (less than a second) where the screen shows 0:15, so it must be reading and decrypting enough to know the correct duration of the video.

  


  So, to debug, I log events :

  


  const nativeHlsEvents = ['play', 'playing', 'abort', 'error', 'canplaythrough', 'waiting', 'loadeddata', 'loadstart', 'progress', 'timeupdate', 'volumechange'];
$.each(nativeHlsEvents, function (i, eventType) {
    video.addEventListener(eventType, (event) => {//https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
        console.log(eventType, event);
        if (eventType === 'error') {
            console.error(video.error);//https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error
        }
    });
});


  


  I see in the console log :

  


  loadstart, {"isTrusted":true}
progress, {"isTrusted":true}
play, {"isTrusted":true}
waiting, {"isTrusted":true}
error, {"isTrusted":true}
video.error, {}


  


  I don't know how to find more details about the error.

  


  Note that even though Windows Chrome successfully plays the video, it too shows warnings in the console log :

  


  {"type":"mediaError","details":"fragParsingError","fatal":false,"reason":"TS packet did not start with 0x47","frag":{"...
{"type":"mediaError","details":"fragParsingError","fatal":false,"reason":"no audio/video samples found","frag":{...


  


  Where is my problem ?

  


• MJPEG Stream works in Firefox but not in Chrome

  11 décembre 2019, par Maoration

  We have a system that contains cameras and we want to stream them to multiple clients.
  Behind the scenes on the server we get connections from cameras, we keep everything related to that camera in a CameraContainer, which also includes a mpegtsToMjpegStream that extends Duplex (both Readable and Writable Stream).

  after a camera connects, we open an ffmpeg process to work on the incoming mpegts stream, and output an MJPEG stream :

        '-map', '0:v', '-c:v', 'mjpeg','-f', 'mjpeg', `-`,

  ** we are doing this because we are also mapping to other outputs, like writing files.

  ---

  On the ’serving’ side, we are currently testing a simple API to GET an mjpeg stream with a camera id :

    async getCameraStream(@Param('cameraId') cameraId: string, @Res() res): Promise<any> {
  
  const cameraContainer = this.cameraBridgeService.getCameraContainer(cameraId);
  
  if (!cameraContainer) {
  
    throw new Error(`Camera with id: ${cameraId} was not found`);
  
  }
  
  
  
  if (!cameraContainer.mpegtsToMjpegStream) {
  
    throw new Error('ERROR: mpegtsToMjpegStream stream does not exist on this camera container');
  
  }
  
  
  
  const writable = new Writable({
  
    write: (chunk, encoding, callback) => {
  
      res.write(`Content-Type: image/jpeg\r\nContent-Length: ${chunk.length}\r\n\r\n`);
  
      res.write(chunk);
  
      res.write('\r\n--ffmpeg_streamer\r\n');
  
      callback();
  
    },
  
  });
  
  
  
  res.set('Content-Type', 'multipart/x-mixed-replace;boundary=ffmpeg_streamer');
  
  res.write('--ffmpeg_streamer\r\n');
  
  
  
  cameraContainer.mpegtsToMjpegStream.pipe(writable, { end: false });
  
  
  
  res.once('close', () => {
  
    if (cameraContainer.mpegtsToMjpegStream &amp;&amp; writable) {
  
      cameraContainer.mpegtsToMjpegStream.unpipe(writable);
  
    }
  
    res.destroy();
  
  });
  
  </any>

  ---

  The problem is this code works very nicely when accessing the stream with Firefox- after 1-2 seconds we get a stable, high quality, low latency stream.
  With Chrome however, the same code does not behave- the video output is corrupted, disappears into a black screen all the time, and we have to keep refreshing the page constantly just to view a few seconds of the stream until it disappears again.

  Any suggestions as to why this happens and how can I fix it ?