Recherche avancée

Sur d’autres sites (8221)

• Webm video files recorded on Chrome Mobile cannot be converted to MP4

  7 juillet 2022, par Tobias Kristensen

  I have a website where I record the user's webcam via the MediaRecorder API.
The video stream is created with navigator.mediaDevices.getUserMedia() :

  


  // Create stream
const cameraStream = await navigator.mediaDevices.getUserMedia({ video: 
  { 
    aspectRatio: 1/1, 
    facingMode: 'user',
    width: { min: 360, ideal: 720, max: 1080 },
    height: { min: 360, ideal: 720, max: 1080 },
    deviceId: undefined
  }  
});

// Add stream to videoElement to display a video preview
videoElement.srcObject = cameraStream; 


  


  I then check which mime types are available in the browser and use that info to initialize the MediaRecorder :

  


  const validMimeTypes = [
  "video/webm\;codecs=vp8",
  "video/webm\;codecs=daala",
  "video/webm\;codecs=h264",
  "video/webm",
  "video/mpeg"
];

const getFirstAvailableMimeType = () => {
  for (const mimeType of validMimeTypes) {
    if (MediaRecorder.isTypeSupported(mimeType)) {
      return mimeType;
    }
  }
}

// Initialize Media Recorder
const mediaRecorder = new MediaRecorder(cameraStream, {
  mimeType: getFirstAvailableMimeType(),
});


  


  After I finish recording a video, I upload it to a server and store it on Firebase Storage, so it can be downloaded later.

  


  After downloading a video, I would like to convert it to an MP4 file. I've tried using CloudConvert and HandBrake. Both services have no issues converting videos that were recorded via Chrome on my desktop, but both fail when I try to convert videos recorded via Chrome Mobile on my phone.

  


  When trying to convert the video to MP4 via CloudConvert, the following error is shown :

  


  EBML header parsing failed. /input/import1/69fcceaccc27a0d6eabcb8a65045e87e.webm Invalid data found when processing input


  


  Any ideas how I can resolve this issue ?

  


• audio convert to mp3,pcm and vox using ffmpeg

  8 juillet 2014, par user3789242

  Please can someone help me with the code for ffmpeg.
  I have to use ffmpeg to convert a recorder voice (using HTML5) into mp3,pcm or vox depending on the user’s selection.
  I don’t know how to write the code for ffmpeg if some one can help me with the code or libraries.
  Thank you in advance.

  Here is my code for recording the voice with a visualizer :

  // variables
  
  var leftchannel = [];
  
  var rightchannel = [];
  
  var recorder = null;
  
  var recording = false;
  
  var recordingLength = 0;
  
  var volume = null;
  
  var audioInput = null;
  
  var sampleRate = 44100;
  
  var audioContext = null;
  
  var context = null;
  
  var outputString;
  
  
  
  
  
  
  
  if (!navigator.getUserMedia)
  
     navigator.getUserMedia = navigator.getUserMedia ||
  
                           navigator.webkitGetUserMedia ||
  
                           navigator.mozGetUserMedia || 
  
                           navigator.msGetUserMedia;
  
  
  
   if (navigator.getUserMedia){
  
  navigator.getUserMedia({audio:true}, success, function(e) {
  
  alert('Error capturing audio.');
  
  });
  
  } else alert('getUserMedia not supported in this browser.');
  
  
  
  
  
  
  
  function getVal(value)
  
    {
  
  
  
  // if R is pressed, we start recording
  
  if ( value == "record"){
  
      recording = true;
  
      // reset the buffers for the new recording
  
      leftchannel.length = rightchannel.length = 0;
  
      recordingLength = 0;
  
      document.getElementById('output').innerHTML="Recording now...";
  
  
  
  // if S is pressed, we stop the recording and package the WAV file
  
  } else if ( value == "stop" ){
  
  
  
      // we stop recording
  
      recording = false;
  
      document.getElementById('output').innerHTML="Building wav file...";
  
  
  
      // we flat the left and right channels down
  
      var leftBuffer = mergeBuffers ( leftchannel, recordingLength );
  
      var rightBuffer = mergeBuffers ( rightchannel, recordingLength );
  
      // we interleave both channels together
  
      var interleaved = interleave ( leftBuffer, rightBuffer );
  
  
  
  
  
  
  
      var buffer = new ArrayBuffer(44 + interleaved.length * 2);
  
      var view = new DataView(buffer);
  
  
  
      // RIFF chunk descriptor
  
      writeUTFBytes(view, 0, 'RIFF');
  
      view.setUint32(4, 44 + interleaved.length * 2, true);
  
      writeUTFBytes(view, 8, 'WAVE');
  
      // FMT sub-chunk
  
      writeUTFBytes(view, 12, 'fmt ');
  
      view.setUint32(16, 16, true);
  
      view.setUint16(20, 1, true);
  
      // stereo (2 channels)
  
      view.setUint16(22, 2, true);
  
      view.setUint32(24, sampleRate, true);
  
      view.setUint32(28, sampleRate * 4, true);
  
      view.setUint16(32, 4, true);
  
      view.setUint16(34, 16, true);
  
      // data sub-chunk
  
      writeUTFBytes(view, 36, 'data');
  
      view.setUint32(40, interleaved.length * 2, true);
  
  
  
  
  
      var lng = interleaved.length;
  
      var index = 44;
  
      var volume = 1;
  
      for (var i = 0; i < lng; i++){
  
          view.setInt16(index, interleaved[i] * (0x7FFF * volume), true);
  
          index += 2;
  
      }
  
  
  
      var blob = new Blob ( [ view ], { type : 'audio/wav' } );
  
  
  
      // let's save it locally
  
  
  
      document.getElementById('output').innerHTML='Handing off the file now...';
  
      var url = (window.URL || window.webkitURL).createObjectURL(blob);
  
  
  
      var li = document.createElement('li');
  
      var au = document.createElement('audio');
  
      var hf = document.createElement('a');
  
  
  
      au.controls = true;
  
      au.src = url;
  
      hf.href = url;
  
      hf.download = 'audio_recording_' + new Date().getTime() + '.wav';
  
      hf.innerHTML = hf.download;
  
      li.appendChild(au);
  
      li.appendChild(hf);
  
      recordingList.appendChild(li);
  
  
  
  }
  
  }
  
  
  
  
  
  function success(e){
  
  
  
  audioContext = window.AudioContext || window.webkitAudioContext;
  
  context = new audioContext();
  
  
  
  
  
  volume = context.createGain();
  
  
  
  // creates an audio node from the microphone incoming stream(source)
  
  source = context.createMediaStreamSource(e);
  
  
  
  // connect the stream(source) to the gain node
  
  source.connect(volume);
  
  
  
  var bufferSize = 2048;
  
  
  
  recorder = context.createScriptProcessor(bufferSize, 2, 2);
  
  
  
  //node for the visualizer
  
  analyser = context.createAnalyser();
  
  analyser.smoothingTimeConstant = 0.3;
  
  analyser.fftSize = 512;
  
  
  
  splitter = context.createChannelSplitter();
  
  //when recording happens
  
  recorder.onaudioprocess = function(e){
  
  
  
      if (!recording) return;
  
      var left = e.inputBuffer.getChannelData (0);
  
      var right = e.inputBuffer.getChannelData (1);
  
  
  
      leftchannel.push (new Float32Array (left));
  
      rightchannel.push (new Float32Array (right));
  
      recordingLength += bufferSize;
  
  
  
      // get the average for the first channel
  
      var array =  new Uint8Array(analyser.frequencyBinCount);
  
      analyser.getByteFrequencyData(array);
  
  
  
      var c=document.getElementById("myCanvas");
  
      var ctx = c.getContext("2d");
  
      // clear the current state
  
      ctx.clearRect(0, 0, 1000, 325);
  
      var gradient = ctx.createLinearGradient(0,0,0,300);
  
      gradient.addColorStop(1,'#000000');
  
      gradient.addColorStop(0.75,'#ff0000');
  
      gradient.addColorStop(0.25,'#ffff00');
  
      gradient.addColorStop(0,'#ffffff');
  
      // set the fill style
  
      ctx.fillStyle=gradient;
  
      drawSpectrum(array);
  
      function drawSpectrum(array) {
  
          for ( var i = 0; i < (array.length); i++ ){
  
                  var value = array[i];
  
                  ctx.fillRect(i*5,325-value,3,325);
  
              } 
  
  
  
      }
  
  }
  
  
  
  function getAverageVolume(array) {
  
      var values = 0;
  
      var average;
  
  
  
      var length = array.length;
  
  
  
      // get all the frequency amplitudes
  
      for (var i = 0; i < length; i++) {
  
          values += array[i];
  
      }
  
  
  
      average = values / length;
  
      return average;
  
  }
  
  
  
      // we connect the recorder(node to destination(speakers))
  
      volume.connect(splitter);
  
      splitter.connect(analyser, 0, 0);
  
  
  
      analyser.connect(recorder);
  
      recorder.connect(context.destination);
  
  
  
  }
  
  
  
  
  
  
  
  
  
  function mergeBuffers(channelBuffer, recordingLength){
  
  var result = new Float32Array(recordingLength);
  
  var offset = 0;
  
  var lng = channelBuffer.length;
  
  for (var i = 0; i < lng; i++){
  
  var buffer = channelBuffer[i];
  
  result.set(buffer, offset);
  
  offset += buffer.length;
  
  }
  
      return result;
  
     }
  
  
  
  function interleave(leftChannel, rightChannel){  
  
  var length = leftChannel.length + rightChannel.length;
  
  var result = new Float32Array(length);
  
  
  
  var inputIndex = 0;
  
  
  
  for (var index = 0; index < length; ){
  
  result[index++] = leftChannel[inputIndex];
  
  result[index++] = rightChannel[inputIndex];
  
  inputIndex++;
  
  }
  
  return result;
  
  }
  
  
  
  
  
  function writeUTFBytes(view, offset, string){ 
  
  var lng = string.length;
  
  for (var i = 0; i < lng; i++){
  
  
  
   view.setUint8(offset + i, string.charCodeAt(i));
  
  }
  
  }

• Making colour of MP4 video consistent in Chrome

  21 septembre 2021, par OneWorld

  I see a difference in the colour of a video between different machines using different browsers. I was wondering what the cause of the difference is ?

  


  I use FFMPEG to create the video. I sent the video to three different people with slightly different machines, and slightly different Chrome versions, to try and see where the differences are.

  


  The FFMPEG output from the video is as follows :-

  


  ffmpeg version 3.2.2-static http://johnvansickle.com/ffmpeg/  Copyright (c) 2000-2016 the FFmpeg developers
  built with gcc 5.4.1 (Debian 5.4.1-4) 20161202
  configuration: --enable-gpl --enable-version3 --enable-static --disable-debug --disable-ffplay --disable-indev=sndio --disable-outdev=sndio --cc=gcc-5 --enable-fontconfig --enable-frei0r --enable-gnutls --enable-gray --enable-libass --enable-libfreetype --enable-libfribidi --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-librtmp --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libvidstab --enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxvid --enable-libzimg
  libavutil      55. 34.100 / 55. 34.100
  libavcodec     57. 64.101 / 57. 64.101
  libavformat    57. 56.100 / 57. 56.100
  libavdevice    57.  1.100 / 57.  1.100
  libavfilter     6. 65.100 /  6. 65.100
  libswscale      4.  2.100 /  4.  2.100
  libswresample   2.  3.100 /  2.  3.100
  libpostproc    54.  1.100 / 54.  1.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'red_and_yellow_uat.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf57.56.100
  Duration: 00:00:03.00, start: 0.000000, bitrate: 84 kb/s
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p(tv, unknown/bt709/bt709), 1080x1080, 81 kb/s, 25 fps, 25 tbr, 12800 tbn, 50 tbc (default)
    Metadata:
      handler_name    : VideoHandler


  


  From the same UAT rendered Video, with screenshots taken in Chrome from person 1, person 2, person 3, and person 4, and using GIMP colour picker on my machine from the screenshots, the results for red, and yellow are as follows.

  


  Person 1:- #A83833  and  #FFCB2E  Chrome Version 92.0.4515.131 (Official Build) (64-bit)
Person 2:- #AB3334  and  #FFCA38  Chrome Version 92.0.4515.107


  


  (Note : these colours Match / are very close to the original).

  


  Both these machines above are 64 bit Ubuntu machines, using Ubuntu 18.04.5 LTS
We both use the gnome screenshot tool in Ubuntu to take the screenshot, which creates an 8bit PNG.

  


  Person 3:-    #B14039  and  #FED303  Chrome Version 93.0.4577.63 (Official Build) (x86_64)
Person 4:-    #B2403A  and  #FFD201  Chrome Version 92.0.4515.159 (Official Build) (x86_64)


  


  Mac screenshots are taken using cmd shift 4, and generate an 8bit PNG file.

  


  Person 3 Machine Spec :-
Machine :- Macbook Pro (2019)
OS : macOS Big Sur Version 11.5.2
Processor :- 2.6Ghz Intel Core i7 processor. 32bit architecture (typing arch in her tty terminal returns i386).
Graphics :- Intel UHD Graphics 630 1536

  


  Person 4 Machine Spec :-
Machine :- Macbook Pro (Retina, 2015)
OS :- MacOS Mojave, Version 10.14.6
Processor :- 2.5GHz, Intel Core i7
Graphics :- AMD Radeon R9, M370X 2 GB Intel Iris Pro 1536 MB

  


  Person 1 screenshot

  


  

  


  Person 2 screenshot

  


  

  


  Person 3 screenshot

  


  

  


  Person 4 screenshot

  


  

  


  Any suggestions anyone has to make these colours consistent would be much appreciated. Would love to know why it happens also ? If anyone can explain ?