Recherche avancée

Sur d’autres sites (10029)

• A systematic approach to making Web Applications accessible

  22 février 2012, par silvia

  With the latest developments in HTML5 and the still fairly new ARIA (Accessible Rich Interface Applications) attributes introduced by the W3C WAI (Web Accessibility Initiative), browsers have now implemented many features that allow you to make your JavaScript-heavy Web applications accessible.

  Since I began working on making a complex web application accessible just over a year ago, I discovered that there was no step-by-step guide to approaching the changes necessary for creating an accessible Web application. Therefore, many people believe that it is still hard, if not impossible, to make Web applications accessible. In fact, it can be approached systematically, as this article will describe.

  This post is based on a talk that Alice Boxhall and I gave at the recent Linux.conf.au titled “Developing accessible Web apps – how hard can it be ?” (slides, video), which in turn was based on a Google Developer Day talk by Rachel Shearer (slides).

  These talks, and this article, introduce a process that you can follow to make your Web applications accessible : each step will take you closer to having an application that can be accessed using a keyboard alone, and by users of screenreaders and other accessibility technology (AT).

  The recommendations here only roughly conform to the requirements of WCAG (Web Content Accessibility Guidelines), which is the basis of legal accessibility requirements in many jurisdictions. The steps in this article may or may not be sufficient to meet a legal requirement. It is focused on the practical outcome of ensuring users with disabilities can use your Web application.

  Step-by-step Approach

  The steps to follow to make your Web apps accessible are as follows :

  1. Use native HTML tags wherever possible
  2. Make interactive elements keyboard accessible
  3. Provide extra markup for AT (accessibility technology)

  If you are a total newcomer to accessibility, I highly recommend installing a screenreader and just trying to read/navigate some Web pages. On Windows you can install the free NVDA screenreader, on Mac you can activate the pre-installed VoiceOver screenreader, on Linux you can use Orca, and if you just want a browser plugin for Chrome try installing ChromeVox.

  1. Use native HTML tags

  As you implement your Web application with interactive controls, try to use as many native HTML tags as possible.

  HTML5 provides a rich set of elements which can be used to both add functionality and provide semantic context to your page. HTML4 already included many useful interactive controls, like <a>, <button>, <input> and <select>, and semantic landmark elements like <h1>. HTML5 adds richer <input> controls, and a more sophisticated set of semantic markup elements like such as <time>, <progress>, <meter>, <nav>, <header>, <article> and <aside>. (Note : check browser support for browser support of the new tags).

  Using as much of the rich HTML5 markup as possible means that you get all of the accessibility features which have been implemented in the browser for those elements, such as keyboard support, short-cut keys and accessibility metadata, for free. For generic tags you have to implement them completely from scratch.

  What exactly do you miss out on when you use a generic tag such as <div> over a specific semantic one such as <button> ?

  1. Generic tags are not focusable. That means you cannot reach them through using the [tab] on the keyboard.
  2. You cannot activate them with the space bar or enter key or perform any other keyboard interaction that would be regarded as typical with such a control.
  3. Since the role that the control represents is not specified in code but is only exposed through your custom visual styling, screenreaders cannot express to their users what type of control it is, e.g. button or link.
  4. Neither can screenreaders add the control to the list of controls on the page that are of a certain type, e.g. to navigate to all headers of a certain level on the page.
  5. And finally you need to manually style the element in order for it to look distinctive compared to other elements on the page ; using a default control will allow the browser to provide the default style for the platform, which you can still override using CSS if you want.

  Example :

  Compare these two buttons. The first one is implemented using a <div> tag, the second one using a <button> tag. Try using a screenreader to experience the difference.

  Send	<style> .custombutton cursor : pointer ; border : 1px solid #000 ; background-color : #F6F6F6 ; display : inline-block ; padding : 2px 5px ; </style> <div class="custombutton" onclick="alert(’sent !’)"> Send </div>
  Send	<button onclick="alert(’sent !’)"> Send </button>

  2. Make interactive elements keyboard accessible

  Many sophisticated web applications have some interactive controls that just have no appropriate HTML tag equivalent. In this case, you will have had to build an interactive element with JavaScript and <div> and/or <span> tags and lots of custom styling. The good news is, it’s possible to make even these custom controls accessible, and as a side benefit you will also make your application smoother to use for power users.

  The first thing you can do to test usability of your control, or your Web app, is to unplug the mouse and try to use only the [TAB] and [ENTER] keys to interact with your application.

  

  Try the following :

  • Can you reach all interactive elements with [TAB] ?
  • Can you activate interactive elements with [ENTER] (or [SPACE]) ?
  • Are the elements in the right tab order ?
  • After interaction : is the right element in focus ?
  • Is there a keyboard shortcut that activates the element (accesskey) ?

  No ? Let’s fix it.

  2.1. Reaching interactive elements

  If you have an element on your page that cannot be reached with [TAB], put a @tabindex attribute on it.

  Example :

  Here we have a <span> tag that works as a link (don’t do this – it’s just a simple example). The first one cannot be reached using [TAB] but the second one has a tabindex and is thus part of the tab order of the HTML page.

  (Note : since we experiment lots with the tabindex in this article, to avoid confusion, click on some text in this paragraph and then hit the [TAB] key to see where it goes next. The click will set your keyboard focus in the DOM.)

  Click	<style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)"> Click </span>
  Click	<style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>

  You set @tabindex=0 to add an element into the native tab order of the page, which is the DOM order.

  2.2. Activating interactive elements

  Next, you typically want to be able to use the [ENTER] and [SPACE] keys to activate your custom control. To do so, you will need to implement an onkeydown event handler. Note that the keyCode for [ENTER] is 13 and for [SPACE] is 32.

  Example :

  Let’s add this functionality to the <span> tag from before. Try tabbing to it and hit the [ENTER] or [SPACE] key.

  Click	<span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>
  &lt;script&gt;<br /> function handlekey(event) {<br /> var target = event.target || event.srcElement;<br /> if (event.keyCode == 13 || event.keyCode == 32) { target.onclick(); }<br /> }<br /> &lt;/script&gt; Click	<span class="customlink" onclick="alert(’activated !’)" tabindex="0" onkeydown="handlekey(event) ;"> Click </span> <script> function handlekey(event) var target = event.target || event.srcElement ; if (event.keyCode == 13 || event.keyCode == 32) target.onclick() ; </script>

  Note that there are some controls that might need support for keys other than [tab] or [enter] to be able to use them from the keyboard alone, for example a custom list box, menu or slider should respond to arrow keys.

  2.3. Elements in the right tab order

  Have you tried tabbing to all the elements on your page that you care about ? If so, check if the order of tab stops seems right. The default order is given by the order in which interactive elements appear in the DOM. For example, if your page’s code has a right column that is coded before the main article, then the links in the right column will receive tab focus first before the links in the main article.

  You could change this by re-ordering your DOM, but oftentimes this is not possible. So, instead give the elements that should be the first ones to receive tab focus a positive @tabindex. The tab access will start at the smallest non-zero @tabindex value. If multiple elements share the same @tabindex value, these controls receive tab focus in DOM order. After that, interactive elements and those with @tabindex=0 will receive tab focus in DOM order.

  Example :

  The one thing that always annoys me the most is if the tab order in forms that I am supposed to fill in is illogical. Here is an example where the first and last name are separated by the address because they are in a table. We could fix it by moving to a <div> based layout, but let’s use @tabindex to demonstrate the change.

  Firstname : Address : Lastname : City :	<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname"> </td> <td>Address : <input type="text" id="address"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname"> </td> <td>City : <input type="text" id="city"> </td> </tr> </table>
  Click here to test this form, then [TAB] : Firstname : Address : Lastname : City :	<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname" tabindex="10"> </td> <td>Address : <input type="text" id="address" tabindex="30"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname" tabindex="20"> </td> <td>City : <input type="text" id="city" tabindex="40"> </td> </tr> </table>

  Be very careful with using non-zero tabindex values. Since they change the tab order on the page, you may get side effects that you might not have intended, such as having to give other elements on the page a non-zero tabindex value to avoid skipping too many other elements as I would need to do here.

  2.4. Focus on the right element

  Some of the controls that you create may be rather complex and open elements on the page that were previously hidden. This is particularly the case for drop-downs, pop-ups, and menus in general. Oftentimes the hidden element is not defined in the DOM right after the interactive control, such that a [TAB] will not put your keyboard focus on the next element that you are interacting with.

  The solution is to manage your keyboard focus from JavaScript using the .focus() method.

  Example :

  Here is a menu that is declared ahead of the menu button. If you tab onto the button and hit enter, the menu is revealed. But your tab focus is still on the menu button, so your next [TAB] will take you somewhere else. We fix it by setting the focus on the first menu item after opening the menu.

  Menu item1 Menu item2 Menu &lt;script&gt;<br /> function displayMenu(value) {<br /> document.getElementById(&quot;custommenu&quot;).style.display=value;<br /> }<br /> &lt;/script&gt;	<div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; </script>
  Menu item1 Menu item2 Menu &lt;script&gt;<br /> function displayMenu2(value) {<br /> document.getElementById(&quot;custommenu2&quot;).style.display=value;<br /> document.getElementById(&quot;item1&quot;).focus();<br /> }<br /> &lt;/script&gt;	<div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; document.getElementById("item1").focus() ; </script>

  You will notice that there are still some things you can improve on here. For example, after you close the menu again with one of the menu items, the focus does not move back onto the menu button.

  Also, after opening the menu, you may prefer not to move the focus onto the first menu item but rather just onto the menu <div>. You can do so by giving that div a @tabindex and then calling .focus() on it. If you do not want to make the div part of the normal tabbing order, just give it a @tabindex=-1 value. This will allow your div to receive focus from script, but be exempt from accidental tabbing onto (though usually you just want to use @tabindex=0).

  Bonus : If you want to help keyboard users even more, you can also put outlines on the element that is currently in focus using CSS”s outline property. If you want to avoid the outlines for mouse users, you can dynamically add a class that removes the outline in mouseover events but leaves it for :focus.

  2.5. Provide sensible keyboard shortcuts

  At this stage your application is actually keyboard accessible. Congratulations !

  However, it’s still not very efficient : like power-users, screenreader users love keyboard shortcuts : can you imagine if you were forced to tab through an entire page, or navigate back to a menu tree at the top of the page, to reach each control you were interested in ? And, obviously, anything which makes navigating the app via the keyboard more efficient for screenreader users will benefit all power users as well, like the ubiquitous keyboard shortcuts for cut, copy and paste.

  HTML4 introduced so-called accesskeys for this. In HTML5 @accesskey is now allowed on all elements.

  The @accesskey attribute takes the value of a keyboard key (e.g. @accesskey="x") and is activated through platform- and browser-specific activation keys. For example, on the Mac it’s generally the [Ctrl] key, in IE it’ the [Alt] key, in Firefox on Windows [Shift]-[Alt], and in Opera on Windows [Shift]-[ESC]. You press the activation key and the accesskey together which either activates or focuses the element with the @accesskey attribute.

  Example :

  Send &lt;script&gt;<br /> var button = document.getElementById('accessbutton');<br /> if (button.accessKeyLabel) {<br />  button.innerHTML += ' (' + button.accessKeyLabel + ')';<br /> }<br /> &lt;/script&gt;

  <button id="accessbutton" onclick="alert(’sent !’)" accesskey="e"> Send </button> <script> var button = document.getElementById(’accessbutton’) ; if (button.accessKeyLabel) button.innerHTML += ’ (’ + button.accessKeyLabel + ’)’ ; </script>

  Now, the idea behind this is clever, but the execution is pretty poor. Firstly, the different activation keys between different platforms and browsers make it really hard for people to get used to the accesskeys. Secondly, the key combinations can conflict with browser and screenreader shortcut keys, the first of which will render browser shortcuts unusable and the second will effectively remove the accesskeys.

  In the end it is up to the Web application developer whether to use the accesskey attribute or whether to implement explicit shortcut keys for the application through key event handlers on the window object. In either case, make sure to provide a help list for your shortcut keys.

  Also note that a page with a really good hierarchical heading layout and use of ARIA landmarks can help to eliminate the need for accesskeys to jump around the page, since there are typically default navigations available in screen readers to jump directly to headings, hyperlinks, and ARIA landmarks.

  3. Provide markup for AT

  Having made the application keyboard accessible also has advantages for screenreaders, since they can now reach the controls individually and activate them. So, next we will use a screenreader and close our eyes to find out where we only provide visual cues to understand the necessary interaction.

  Here are some of the issues to consider :

  • Role may need to get identified
  • States may need to be kept track of
  • Properties may need to be made explicit
  • Labels may need to be provided for elements

  This is where the W3C’s ARIA (Accessible Rich Internet Applications) standard comes in. ARIA attributes provide semantic information to screen readers and other AT that is otherwise conveyed only visually.

  Note that using ARIA does not automatically implement the standard widget behavior – you’ll still need to add focus management, keyboard navigation, and change aria attribute values in script.

  3.1. ARIA roles

  After implementing a custom interactive widget, you need to add a @role attribute to indicate what type of controls it is, e.g. that it is playing the role of a standard tag such as a button.

  Example :

  This menu button is implemented as a <div>, but with a role of “button” it is announced as a button by a screenreader.

  Menu	<div tabindex="0" role="button">Menu</div>

  ARIA roles also describe composite controls that do not have a native HTML equivalent.

  Example :

  This menu with menu items is implemented as a set of <div> tags, but with a role of “menu” and “menuitem” items.

  Cut Copy Paste

  <div role="menu"> <div tabindex="0" role="menuitem">Cut</div> <div tabindex="0" role="menuitem">Copy</div> <div tabindex="0" role="menuitem">Paste</div> </div>

  3.2. ARIA states

  Some interactive controls represent different states, e.g. a checkbox can be checked or unchecked, or a menu can be expanded or collapsed.

  Example :

  The following menu has states on the menu items, which are here not just used to give an aural indication through the screenreader, but also a visual one through CSS.

  Left Center Right

  <style> .custombutton[aria-checked=true]:before content : "\2713 " ; </style> <div role="menu"> <div tabindex="0" role="menuitem" aria-checked="true">Left</div> <div tabindex="0" role="menuitem" aria-checked="false">Center</div> <div tabindex="0" role="menuitem" aria-checked="false">Right</div> </div>

  3.3. ARIA properties

  Some of the functionality of interactive controls cannot be captured by the role attribute alone. We have ARIA properties to add features that the screenreader needs to announce, such as aria-label, aria-haspopup, aria-activedescendant, or aria-live.

  Example :

  The following drop-down menu uses aria-haspopup to tell the screenreader that there is a popup hidden behind the menu button together with an ARIA state of aria-expanded to track whether it’s open or closed.

  Justify Left Center Right &lt;script&gt;<br /> var button = document.getElementById(&quot;button&quot;);<br /> var menu = document.getElementById(&quot;menu&quot;);<br /> var items = document.getElementsByClassName(&quot;menuitem&quot;);<br /> var focused = 0;<br /> function showMenu(evt) {<br />    evt.stopPropagation();<br />    menu.style.visibility = 'visible';<br />    button.setAttribute('aria-expanded','true');<br />    focused = getSelected();<br />    items[focused].focus();<br />  }<br />  function hideMenu(evt) {<br />    evt.stopPropagation();<br />    menu.style.visibility = 'hidden';<br />    button.setAttribute('aria-expanded','false');<br />    button.focus();<br />  }<br />  function getSelected() {<br />    for (var i=0; i &lt; items.length; i++) {<br />      if (items[i].getAttribute('aria-checked') == 'true') {<br />        return i;<br />      }<br />    }<br />  }<br />  function setSelected(elem) {<br />    var curSelected = getSelected();<br />    items[curSelected].setAttribute('aria-checked', 'false');<br />    elem.setAttribute('aria-checked', 'true');<br />  }<br />  function selectItem(evt) {<br />    setSelected(evt.target);<br />    hideMenu(evt);<br />  }<br /> function getPrevItem(index) {<br />    var prev = index - 1;<br />    if (prev &lt; 0) {<br />      prev = items.length - 1;<br />    }<br />    return prev;<br />  }<br />  function getNextItem(index) {<br />    var next = index + 1;<br />    if (next == items.length) {<br />      next = 0;<br />    }<br />    return next;<br />  }<br /> function handleButtonKeys(evt) {<br />    evt.stopPropagation();<br />    var key = evt.keyCode;<br />    switch(key) {<br />      case (13): /* ENTER */<br />      case (32): /* SPACE */<br />        showMenu(evt);<br />      default:<br />    }<br />  }<br />  function handleMenuKeys(evt) {<br />    evt.stopPropagation();<br />    var key = evt.keyCode;<br />    switch(key) {<br />      case (38): /* UP */<br />        focused = getPrevItem(focused);<br />        items[focused].focus();<br />        break;<br />      case (40): /* DOWN */<br />        focused = getNextItem(focused);<br />        items[focused].focus();<br />        break;<br />      case (13): /* ENTER */<br />      case (32): /* SPACE */<br />        setSelected(evt.target);<br />          hideMenu(evt);<br />          break;<br />      case (27): /* ESC */<br />        hideMenu(evt);<br />         break;<br />      default:<br />    }<br />  }<br />  button.addEventListener('click', showMenu, false);<br />  button.addEventListener('keydown', handleButtonKeys, false);<br />  for (var i = 0;  i &lt; items.length; i++) {<br />    items[i].addEventListener('click', selectItem, false);<br />    items[i].addEventListener('keydown', handleMenuKeys, false);<br />  }<br /> &lt;/script&gt;

  <div class="custombutton" id="button" tabindex="0" role="button" aria-expanded="false" aria-haspopup="true"> <span>Justify</span> </div> <div role="menu" class="menu" id="menu" style="display : none ;"> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="true"> Left </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Center </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Right </div> </div> [CSS and JavaScript for example omitted]

  3.4. Labelling

  The main issue that people know about accessibility seems to be that they have to put alt text onto images. This is only one means to provide labels to screenreaders for page content. Labels are short informative pieces of text that provide a name to a control.

  There are actually several ways of providing labels for controls :

  • on img elements use @alt
  • on input elements use the label element
  • use @aria-labelledby if there is another element that contains the label
  • use @title if you also want a label to be used as a tooltip
  • otherwise use @aria-label

  I’ll provide examples for the first two use cases - the other use cases are simple to deduce.

  Example :

  The following two images show the rough concept for providing alt text for images : images that provide information should be transcribed, images that are just decorative should receive an empty @alt attribute.

  Image by Noah Sussman

  <img src="texture.jpg" alt=""> <img src="lolcat.jpg" alt="shocked lolcat titled ’HTML cannot do that !"> <img src="texture.jpg" alt="">

  When marking up decorative images with an empty @alt attribute, the image is actually completely removed from the accessibility tree and does not confuse the blind user. This is a desired effect, so do remember to mark up all your images with @alt attributes, even those that don’t contain anything of interest to AT.

  Example :

  In the example form above in Section 2.3, when tabbing directly on the input elements, the screen reader will only say "edit text" without announcing what meaning that text has. That’s not very useful. So let’s introduce a label element for the input elements. We’ll also add checkboxes with a label.

  Doctor title : Firstname : Lastname : Address : City : Remember me :

  <label>Doctor title :</label> <input type="checkbox" id="doctor"/> <label>Firstname :</label> <input type="text" id="firstname2"/> <label for="lastname2">Lastname :</label> <input type="text" id="lastname2"/> <label>Address : <input type="text" id="address2"> </label> <label for="city2">City : <input type="text" id="city2"> </label> <label for="remember">Remember me :</label> <input type="checkbox" id="remember">

  In this example we use several different approaches to show what a different it makes to use the <label> element to mark up input boxes.

  The first two fields just have a <label> element next to a <input> element. When using a screenreader you will not notice a difference between this and not using the <label> element because there is no connection between the <label> and the <input> element.

  In the third field we use the @for attribute to create that link. Now the input field isn’t just announced as "edit text", but rather as "Lastname edit text", which is much more useful. Also, the screenreader can now skip the labels and get straight on the input element.

  In the fourth and fifth field we actually encapsulate the <input> element inside the <label> element, thus avoiding the need for a @for attribute, though it doesn’t hurt to explicity add it.

  Finally we look at the checkbox. By including a referenced <label> element with the checkbox, we change the screenreaders announcement from just "checkbox not checked" to "Remember me checkbox not checked". Also notice that the click target now includes the label, making the checkbox not only more usable to screenreaders, but also for mouse users.

  4. Conclusions

  This article introduced a process that you can follow to make your Web applications accessible. As you do that, you will noticed that there are other things that you may need to do in order to give the best experience to a power user on a keyboard, a blind user using a screenreader, or a vision-impaired user using a screen magnifier. But once you’ve made a start, you will notice that it’s not all black magic and a lot can be achieved with just a little markup.

  You will find more markup in the WAI ARIA specification and many more resources at Mozilla’s ARIA portal. Now go and change the world !

  Many thanks to Alice Boxhall and Dominic Mazzoni for their proof-reading and suggested changes that really helped improve the article !

• Improved thumbnail extraction from videos

  21 janvier 2014, par Tommy Ng

  I have been using FFmpeg to find the middle frame of a h264 video file, and extract the jpg thumbnail for use on a streaming portal. This is done automatically for each uploaded video.

  Sometimes the frame happens to be a black frame or just semantically bad i.e. a background or blurry shot which doesn't relate well to the video content.

  I wonder if I can use openCV or some other method/library to programmatically find better thumbnails through facial recognition or frame analysis.

• FFMPEG : directly decode packets after encoding

  18 avril 2012, par user1282931

  using FFMPEG API, I try to encode a x264 video to a MP4 file with 0 frame latency and also, in realtime, show the currently encoded frame on screen (with encoding artifacts). The encoding to the file works, but so far I don't get the frames decoded right after writing them to the file. What I try is to feed the packetdata that is returned from avcodec_encode_video() right into avcodec_decode_video2() but the function returns -1 and the cmd output shows :

  [h264 @ 00000000025F0710] non-existing PPS 0 referenced
  
  [h264 @ 00000000025F0710] decode_slice_header error
  
  [h264 @ 00000000025F0710] no frame

  here is some code i use for encoding :

  AVPacket FFMpegEncoder2::write_video_frame(AVFrame* pic, int &numBytes)
  
  {
  
      int out_size, ret;
  
  
  
      AVPacket pkt;
  
  
  
  
  
      /* encode the image */
  
      out_size = avcodec_encode_video(m_cctx, m_outbuf,
  
                                          m_outbufSize, pic);
  
      /* If size is zero, it means the image was buffered. */
  
      assert(out_size>0) //0 frame delay
  
  
  
      av_init_packet(&pkt);
  
  
  
      if (m_cctx->coded_frame->pts != AV_NOPTS_VALUE)
  
            pkt.pts = av_rescale_q(m_cctx->coded_frame->pts,m_cctx->time_base, m_video_st->time_base);
  
      if (m_cctx->coded_frame->key_frame)
  
            pkt.flags |= AV_PKT_FLAG_KEY;
  
      pkt.stream_index = m_video_st->index;
  
      pkt.data         = m_outbuf;
  
      pkt.size         = out_size;
  
  
  
      /* Write the compressed frame to the media file. */
  
      ret = av_interleaved_write_frame(m_fctx, &pkt);
  
  
  
      if (ret != 0) {
  
          fprintf(stderr, "Error while writing video frame\n");
  
          exit(1);
  
      }
  
      numBytes = out_size;
  
      return pkt;
  
  }

  and then I take this returned packet and feed it into the decoder :

  const AVFrame* FFMpegDecoder2::decode(AVPacket* packet){
  
      AVPacket pkt;
  
      av_init_packet(&pkt);
  
      pkt.size = packet->size;
  
      pkt.data = packet->data;
  
  
  
      int len=0;
  
      int got_picture=0;
  
  
  
  
  
      while (pkt.size > 0) {
  
              len = avcodec_decode_video2(m_cctx, m_frame, &got_picture, &pkt);
  
              if (len < 0) {
  
                  fprintf(stderr, "Error while decoding frame %d\n", m_f);
  
                  exit(1);
  
              }
  
              if (got_picture) {
  
                  assert(pkt.size==len);
  
                  m_f++;
  
              }
  
              pkt.size -= len;
  
              pkt.data += len;
  
          }
  
      assert(got_picture);
  
      return m_frame;
  
  }

  but as stated, avcodec_decode_video2() returns -1

  what am I doing wrong ? Do i need to feed some headerdata into the decoder first somehow ?

  //edit :

  if i set

  m_formatCtx->oformat->flags &= ~AVFMT_GLOBALHEADER;
  
  m_codecctx->flags &= ~CODEC_FLAG_GLOBAL_HEADER;

  then i can decode the returned packet without error, but the written mp4 file will be black.

  //edit : this is how i setup the decoder :

  FFMpegDecoder2::FFMpegDecoder2(CodecID id)
  
      : m_codec(NULL)
  
      , m_cctx(NULL)
  
  {
  
  
  
  
  
      /* Initialize libavcodec, and register all codecs and formats. */
  
      avcodec_register_all();
  
  
  
      m_codec = avcodec_find_decoder(id);
  
      if (!m_codec) {
  
          fprintf(stderr, "codec not found\n");
  
          exit(1);
  
      }
  
  
  
      m_cctx = avcodec_alloc_context3(m_codec);
  
      m_cctx->codec = m_codec;
  
      m_cctx->pix_fmt = PIX_FMT_YUV420P;
  
  
  
      avcodec_open2(m_cctx, m_codec, NULL);
  
  
  
      //alloc frame
  
      m_frame = avcodec_alloc_frame();
  
  }

  this is what the memory window shows for the first packet (didn't copy all. the size of the first packet is 7859) :

  0x0000000002E66670  00 00 01 06 05 ff ff 55 dc 45 e9 bd e6 d9 48 b7 96 2c d8 20 d9 23 ee ef 78 32 36 34 20 2d 20 63 6f 72 65 20 31 32 30 20 72 32 31 34 36 20 62  .....ÿÿUÜEé.æÙH·–,Ø Ù#îïx264 - core 120 r2146 b
  
  0x0000000002E6669F  63 64 34 31 64 62 20 2d 20 48 2e 32 36 34 2f 4d 50 45 47 2d 34 20 41 56 43 20 63 6f 64 65 63 20 2d 20 43 6f 70 79 6c 65 66 74 20 32 30 30 33  cd41db - H.264/MPEG-4 AVC codec - Copyleft 2003
  
  0x0000000002E666CE  2d 32 30 31 31 20 2d 20 68 74 74 70 3a 2f 2f 77 77 77 2e 76 69 64 65 6f 6c 61 6e 2e 6f 72 67 2f 78 32 36 34 2e 68 74 6d 6c 20 2d 20 6f 70 74  -2011 - http://www.videolan.org/x264.html - opt
  
  0x0000000002E666FD  69 6f 6e 73 3a 20 63 61 62 61 63 3d 30 20 72 65 66 3d 33 20 64 65 62 6c 6f 63 6b 3d 31 3a 30 3a 30 20 61 6e 61 6c 79 73 65 3d 30 78 33 3a 30  ions: cabac=0 ref=3 deblock=1:0:0 analyse=0x3:0
  
  0x0000000002E6672C  78 31 31 33 20 6d 65 3d 68 65 78 20 73 75 62 6d 65 3d 34 20 70 73 79 3d 31 20 70 73 79 5f 72 64 3d 31 2e 30 30 3a 30 2e 30 30 20 6d 69 78 65  x113 me=hex subme=4 psy=1 psy_rd=1.00:0.00 mixe
  
  0x0000000002E6675B  64 5f 72 65 66 3d 31 20 6d 65 5f 72 61 6e 67 65 3d 31 36 20 63 68 72 6f 6d 61 5f 6d 65 3d 31 20 74 72 65 6c 6c 69 73 3d 30 20 38 78 38 64 63  d_ref=1 me_range=16 chroma_me=1 trellis=0 8x8dc
  
  0x0000000002E6678A  74 3d 31 20 63 71 6d 3d 30 20 64 65 61 64 7a 6f 6e 65 3d 32 31 2c 31 31 20 66 61 73 74 5f 70 73 6b 69 70 3d 31 20 63 68 72 6f 6d 61 5f 71 70  t=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp
  
  0x0000000002E667B9  5f 6f 66 66 73 65 74 3d 30 20 74 68 72 65 61 64 73 3d 31 20 73 6c 69 63 65 64 5f 74 68 72 65 61 64 73 3d 30 20 6e 72 3d 30 20 64 65 63 69 6d  _offset=0 threads=1 sliced_threads=0 nr=0 decim
  
  0x0000000002E667E8  61 74 65 3d 31 20 69 6e 74 65 72 6c 61 63 65 64 3d 30 20 62 6c 75 72 61 79 5f 63 6f 6d 70 61 74 3d 30 20 63 6f 6e 73 74 72 61 69 6e 65 64 5f  ate=1 interlaced=0 bluray_compat=0 constrained_
  
  0x0000000002E66817  69 6e 74 72 61 3d 30 20 62 66 72 61 6d 65 73 3d 30 20 77 65 69 67 68 74 70 3d 32 20 6b 65 79 69 6e 74 3d 32 35 20 6b 65 79 69 6e 74 5f 6d 69  intra=0 bframes=0 weightp=2 keyint=25 keyint_mi
  
  0x0000000002E66846  6e 3d 32 20 73 63 65 6e 65 63 75 74 3d 34 30 20 69 6e 74 72 61 5f 72 65 66 72 65 73 68 3d 30 20 72 63 3d 61 62 72 20 6d 62 74 72 65 65 3d 30  n=2 scenecut=40 intra_refresh=0 rc=abr mbtree=0
  
  0x0000000002E66875  20 62 69 74 72 61 74 65 3d 34 30 30 20 72 61 74 65 74 6f 6c 3d 31 2e 30 20 71 63 6f 6d 70 3d 30 2e 36 30 20 71 70 6d 69 6e 3d 30 20 71 70 6d   bitrate=400 ratetol=1.0 qcomp=0.60 qpmin=0 qpm
  
  0x0000000002E668A4  61 78 3d 36 39 20 71 70 73 74 65 70 3d 34 20 69 70 5f 72 61 74 69 6f 3d 31 2e 34 30 20 61 71 3d 31 3a 31 2e 30 30 00 80 00 00 00 01 65 88 84  ax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00.€....eˆ.
  
  0x0000000002E668D3  11 ef ff f8 22 0f 8a 00 02 09 7e 38 00 08 45 c7 00 01 1d c9 39 3d 87 ff e0 ac 13 03 6d 05 f1 00 10 00 10 12 88 04 00 04 02 60 70 4e 2d cc 38  .ïÿø".Š...~8..EÇ...É9=.ÿà¬..m.ñ.....ˆ....`pN-Ì8
  
  0x0000000002E66902  27 16 e6 07 21 1a e6 1c 84 6b 9f f0 f0 27 15 f2 7b 87 ff c1 58 2a 8a 00 04 b8 80 00 58 00 04 02 62 01 03 c1 c1 04 63 07 04 11 88 90 b1 89 0b  '.æ.!.æ..kŸðð'.ò{.ÿÁX*Š..¸€.X...b..ÁÁ.c...ˆ.±..
  
  0x0000000002E66931  1f 2c 11 02 b1 40 00 87 8f a4 f7 0f ff 82 b0 55 06 93 41 c4 10 51 00 00 40 14 00 04 00 a3 b7 35 b7 30 38 26 1e e6 1c 13 0f 73 f2 c1 10 2b 14  .,..±@...¤÷.ÿ.°U.“AÄ.Q..@....£·5·08&.æ...sòÁ.+.
  
  0x0000000002E66960  1f 1f 1c 32 7f 94 11 82 a1 40 01 f1 00 00 40 14 01 22 00 01 e0 1e 22 0a e3 83 1c 19 3d f8 7f e0 b0 16 03 01 22 0f 88 00 02 00 00 16 20 01 17  ...2.”..¡@.ñ..@.."..à.".ãƒ..=ø.à°...".ˆ..... ..
  
  0x0000000002E6698F  03 84 c2 5c 87 09 84 b9 06 4a e4 a4 ae 08 82 d8 e0 00 20 0f 1d 93 df c3 fe 0b 01 54 50 07 88 a8 80 00 64 09 88 58 88 58 83 84 1d 88 38 41 d8  ..Â\.....J䤮..Øà. ..“ßÃþ..TP.ˆ¨€.d.ˆXˆXƒ..ˆ8AØ
  
  0x0000000002E669BE  f2 c1 10 2b 14 00 08 f8 e0 00 62 38 64 ff 08 70 13 0a c1 d2 e9 b5 5d ba 10 80 09 a2 01 2e 07 04 c2 dc 87 04 c2 dc 81 c8 66 b9 0e 43 35 cb 0f  òÁ.+...øà.b8dÿ.p..ÁÒéµ]º.€.¢....ÂÜ..ÂÜ.Èf..C5Ë.
  
  0x0000000002E669ED  ff c1 10 27 2c 00 7e 8e 00 05 64 e4 f6 1f ff 82 28 a0 00 21 99 e3 80 00 99 ac 70 00 11 39 93 93 d8 7f fe 0a c1 40 34 9a 0b e3 40 00 84 40 01  ÿÁ.',.~Ž..däö.ÿ.( .!™ã€.™¬p..9““Ø.þ.Á@4š.ã@..@.
  
  0x0000000002E66A1C  00 01 02 88 fd cd 7d cc 0e 08 a4 dc c3 82 29 37 3f e0 88 14 8b f1 c3 1c 03 27 f0 c3 60 a0 50 62 86 da 36 1f 10 00 0a 80 00 80 14 40 00 20 00  ...ˆýÍ}Ì..¤ÜÃ.)7?àˆ..ñÃ..'ðÃ` Pb.Ú6....€.€.@. .

  and this is the encoders output (until after encoding frame 0) :

  [libx264 @ 00000000005ADAA0] using cpu capabilities: MMX2 SSE2Fast SSSE3 FastShu
  
  ffle SSE4.2
  
  [libx264 @ 00000000005ADAA0] profile High, level 3.0
  
  [libx264 @ 00000000005ADAA0] 264 - core 120 r2146 bcd41db - H.264/MPEG-4 AVC cod
  
  ec - Copyleft 2003-2011 - http://www.videolan.org/x264.html - options: cabac=0 r
  
  ef=3 deblock=1:0:0 analyse=0x3:0x113 me=hex subme=4 psy=1 psy_rd=1.00:0.00 mixed
  
  _ref=1 me_range=16 chroma_me=1 trellis=0 8x8dct=1 cqm=0 deadzone=21,11 fast_pski
  
  p=1 chroma_qp_offset=0 threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 b
  
  luray_compat=0 constrained_intra=0 bframes=0 weightp=2 keyint=25 keyint_min=2 sc
  
  enecut=40 intra_refresh=0 rc=abr mbtree=0 bitrate=100 ratetol=1.0 qcomp=0.60 qpm
  
  in=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
  
  Output #0, mp4, to 'out2.mp4':
  
      Stream #0:0: Video: h264, yuv420p, 640x480, q=-1--1, 100 kb/s, 90k tbn, 25 t
  
  bc
  
  [mp4 @ 0000000000467570] Encoder did not produce proper pts, making some up.