Recherche avancée

Médias (2)

Mot : - Tags -/documentation

Autres articles (67)

  • Participer à sa traduction

    10 avril 2011

    Vous pouvez nous aider à améliorer les locutions utilisées dans le logiciel ou à traduire celui-ci dans n’importe qu’elle nouvelle langue permettant sa diffusion à de nouvelles communautés linguistiques.
    Pour ce faire, on utilise l’interface de traduction de SPIP où l’ensemble des modules de langue de MediaSPIP sont à disposition. ll vous suffit de vous inscrire sur la liste de discussion des traducteurs pour demander plus d’informations.
    Actuellement MediaSPIP n’est disponible qu’en français et (...)

  • Support de tous types de médias

    10 avril 2011

    Contrairement à beaucoup de logiciels et autres plate-formes modernes de partage de documents, MediaSPIP a l’ambition de gérer un maximum de formats de documents différents qu’ils soient de type : images (png, gif, jpg, bmp et autres...) ; audio (MP3, Ogg, Wav et autres...) ; vidéo (Avi, MP4, Ogv, mpg, mov, wmv et autres...) ; contenu textuel, code ou autres (open office, microsoft office (tableur, présentation), web (html, css), LaTeX, Google Earth) (...)

  • MediaSPIP Player : problèmes potentiels

    22 février 2011, par

    Le lecteur ne fonctionne pas sur Internet Explorer
    Sur Internet Explorer (8 et 7 au moins), le plugin utilise le lecteur Flash flowplayer pour lire vidéos et son. Si le lecteur ne semble pas fonctionner, cela peut venir de la configuration du mod_deflate d’Apache.
    Si dans la configuration de ce module Apache vous avez une ligne qui ressemble à la suivante, essayez de la supprimer ou de la commenter pour voir si le lecteur fonctionne correctement : /** * GeSHi (C) 2004 - 2007 Nigel McNie, (...)

Sur d’autres sites (15248)

  • How to use Behavioural Analytics to Improve Website Performance

    20 septembre 2021, par Ben Erskine — Analytics Tips, Plugins, Heatmap

    User behavioural analytics (UBA) give your business unique insights into your customers. 

    Where traditional website metrics track what actions are completed or how many visitors you have, user behaviour shows the driving factors behind those actions. UBA tools such as website heatmap software provide an easy-to-read visualisation of this data. 

    Ultimately, user behaviour analysis improves website performance and conversions by boosting customer engagement, optimising positive customer experiences, and focusing on the most important part of your sales : the people who are actually buying from you. 

    What is user behaviour analytics ?

    User behaviour analytics (UBA) is data that shows how customers and website visitors interact with your brand online. 

    UBA is tracked using tools such as heatmaps, session recordings and data visualisation software. 

    Where traditional web analytics track metrics such as page views and bounce rates, behavioural analytics provide an even more in-depth picture of your website or funnel success. 

    For example, UBA tracks actions like 

    • How far users are scrolling down the page 
    • Which CTA’s and copy they are focusing on (or not focusing on) 
    • Which design elements, links or buttons they are interacting with 
    • What is happening in between each action

    Tracking user behaviour metrics help keep visitors on your website longer because they analyse where customers may be confused or unclear so you can fix it. 

    What’s the difference between data and behavioural analytics ?

    There are a few key differences between data and behavioural analytics. While data analytics are beneficial to improving website performance, using UBA creates a more customer-centric approach to funnel building. 

    The biggest difference between data and behavioural analytics ? Metric data shows which actions are happening. Behavioural analytics show you WHY they are happening. 

    For example, data can show you that a customer bounced or clicked away. Behaviour analytics show you that a page took a long time to load, they tried to click a link several times and then maybe got frustrated and clicked away. 

    Key differences between data analytics and behavioural analytics : 

    • What is happening versus what is driving it 
    • Track an action (e.g. click-through) versus tracking inaction (e.g. hover without clicking) 
    • Measuring completion of an action versus the flow of actions to complete action 
    • Source of traffic versus individual actions 
    • What happens when someone takes an action versus what happens in between taking action 

    Matomo heatmaps offer both website analytics and user behaviour for a comprehensive analysis.

    Why do behavioural analytics help improve website performance ?

    User behaviour is important because it doesn’t matter how many website visitors you have if they don’t convert. 

    If you have a lot of traffic on mobile devices, but a low CTR, heatmaps show you what is causing the low conversions. Perhaps there is a button that isn’t optimised for mobile scrolling, or a pop up that covers important copy. 

    Analysing the driving factors behind each decision means that you can increase sign-ups and conversions without losing money on website traffic that never actually buys. 

    Matomo's heatmaps feature

    How do heatmap tools show website user behaviour analytics ? 

    Heatmap tools provide a visual representation of user behaviour. 

    There are several key ways that heatmap tracking can improve website performance and therefore your overall conversions.

    Firstly, heatmaps show where to optimise website structure. It uses real visitor experiences to indicate whether customers have to scroll to reach important content, whether important messages are being missed, and whether CTAs are clear. 

    Secondly, heatmaps provide always-on UX and useability testing for your website, identifying user frustrations and optimising their experience over time.

    They also show valuable user experience insights for A/B versions of a landing page. Not only will you see the raw conversion data, but you will also understand why one page converts more than another.

    Ultimately, heatmaps increase ROI on marketing by optimising the traffic that you are sending to your website.

    Matomo Heatmaps - Hotjar alternative

    5 ways heatmaps and user behaviour analytics improve website performance and conversions

    #1. Improve customer experience

    One of the most important uses for UBA is to improve your customer experience. 

    Imagine you had a physical store. If there was something blocking customers from getting to the counter you could easily see and fix the problem. 

    It is just as important for an online store to find and fix these “roadblocks”. 

    Not only does it reduce friction in the sales funnel and make it easy for customers to buy from you, it improves their overall experience. And when 86% of buyers are willing to pay more for a great customer experience, UBA should be one of your number one priorities for growing your bottom line. 

    #2. Improve customer engagement

    Customer engagement is any interaction between a customer/product user and your business. 

    User behaviour analytics increase engagement at each customer journey touch point. 

    Using data from heatmaps will improve customer engagement because it gives you insights into how you can make your website more user friendly. This reduces friction and increases customer loyalty by making sure customers :

    • See important content 
    • Are not distracted by unnecessary elements 
    • Can easily access information or pages no matter what device they are using 
    • Are clicking on important page elements that take them further through the customer journey 

    For example, say a customer is on a sales page. A heatmap might show that pop ups or design elements like links to another page are pulling their attention away from the primary focus (i.e. the sales copy). 

    #3. Focus on customer-centric approach 

    A customer-centric approach means putting your customers at the centre of everything that you do. There is a lot of competition for your customers’ hard earned dollars, so you need to stand out. A good product or service is not enough on its own anymore. 

    User behaviour analytics are at the heart of customer-centric strategies. Instead of guessing how customers interact with your online presence, tools like heatmaps give insight into exactly what customers need. 

    This matched with an effective customer feedback strategy gives a holistic and effective approach to improving your customer experiences. 

    #4. Capture customer data across multiple channels

    Most customers won’t convert on their very first visit to a website. They might interact with your business across many channels and research your product multiple times before purchasing. 

    Multi Channel Conversion Attribution, also known as Cross Channel Attribution, lets you assign a value to each visit prior to a conversion or prior to a sale. By applying different attribution models, you get a better view on which channels actually lead to a conversion.

    User behaviour analytics like the multi channel conversion attribution that Matomo offers can show you exactly where you should focus your money to acquire new customers. 

    #5. Track and measure business objectives

    User behaviour analytics like heatmaps can show you whether you are actually hitting your targets. 

    Setting goals helps track your website performance against business objectives. 

    These include objectives such as lead generation, online sales and increased brand exposure. Matomo has a specific function for tracking goals and measuring analytics.

    Using a combination of UBA and data metrics will produce the most effective conversions. 

    For example, a customer reaching the payment confirmation page is a common objective to measure conversions. However, it is only tracked if they actually complete the action. Measuring on-page customer activity with heatmaps shows why they do or do not convert so you can fix issues. 

    Final thoughts on user behaviour analytics 

    User behavioural analytics (UBA) provide a unique and in-depth insight into your customers and their needs. Unlike traditional data metrics that track completed actions, UBA like heatmaps show you what happens in between each action and help fix any critical issues. 

    Heatmaps are your secret weapon to improving website performance while staying customer-centric ! 

    Want to know how heatmap analytics increase conversions and improve customer experience without spending more on traffic or marketing ? Check out some of the other in depth guides below. 

    The Ultimate Guide to Heatmap Software

    10 Proven Ways Heatmap Software Improves Website Conversions

    Heatmap Video

    Session Recording Video

  • How to combine multiple video blobs in js without gap ?

    5 septembre 2021, par Pouria Moosavi

    I have an array of urls. I download them with fetch and then get blob from each response with await res.blob(). I need to concat all these blobs together to make a full video out of it, I tried to push each blob into an array and make a file new File(blobArray, "test") but the result has a gap between each blob.

    


    I've tried to save each blob as a separate file and concat them with ffmpeg -f concat -safe 0 -i text -c copy out3.mp4 and the result was perfect. So I know that my blobs are correct and the problem is how I am combining them together.

    


    This is my full code :

    


    (async function() {
  var urlString = `
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18160.ts?Expires=1630841672&Signature=C-DrIcvmIGkm0s42EQRPWh6Y-aEWvnl2xu1LOIWyzgQqOe-~6E9rLtpR5Kdfz8lNdNXVFz2XyrsgSX1Dn8AUbxUM6umqxALPn57sdSUoVf5-JQce472EHX-roQTsy3SAM~IIXH3B6FHcpdce~1vdqTze~nQY2F3wbzCPyspJSEPU74~-TySj8PhHrFtYNFIsFVr4R-Pc4FF-EWy2zXzo0Av59-4VlOXqFYhmQwcm~kimWNXJpOYhghv6pVbFYzyp7x9tYLiX1~9hbTG3otmoBAJGRt7EUlZiBZhprAgMzhrPS2TezenBKXNf0qJEp-fnC5so0OykRt-TGhyRapbJoA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18161.ts?Expires=1630841672&Signature=bBVrS4brV209hRADZgPnYQICBcXWe6Ed6zwBOFdozjIR1tiuahx3YmPhM8uaxLNRqowALgylen1wQBmdK5bGm~73DQUcUUfGXQU8kIv45CW1DyHDzX-ECR3MDpzSzIYDI8ELbFXK8gmT7ELgtmdkSrL0XO0FXCVAzLrzSw6-0XAZgzBY7tZUncRum5Wb7EhYQgluO2uCquz6HZqaVA9IYoCeFWKFXvU3xE-RBqHXksWkZO01o3UNEEgnzYrRepurcdYY029~6MsHEyj5304pDlefXKrEj8mbZidvhaUKkiIjcoG15jznWPvN3WAewK3zXpLlCYhBMuDL0kOVIq5zjA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18162.ts?Expires=1630841672&Signature=a3lUizMPzmtntrapM9qLk0f~GrfnQAFNlEJEzrvFowGMZVMukqPVfloM7Z9J33ZThK7mKfRy7tiYH1KDzCT5hpRl0X-pcCvcmAmy4u8h1upKO0RJmaP1v7PVzqACPTyvDHNDy3Fh-pxhpO1ubKR2SR7gq1n1K6tX8sbogNHmo0jPnERRxtLKF618nAuGBPQVYofkNG0zvcomGRX7iN95ovn8Ql9IxmqsGLGI2HzlJq3v8L4iS6UYUpV4yhAtZxmbERACq82JcwdiMMlLlnn~SoenYttzDrTdSh-u321KqjAoD6lij6l~j-dReVWY4HTDlsCnGaw9w-eOIuEywi8DpA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18163.ts?Expires=1630841672&Signature=Q6eYIsoPFVKYjY0vVDcnMKKI3oV14xnfDLpvJdH7Z9GoNqojPRXOyITTmd6Ed1JCxmF9oAkfvdghH0Ks1-fSYL3tvu5kMuJe2sWbeKCimqHQ89JvhJ3hOfVvUBIv-QVdbGYXD9FOr8T5s~HYC5KkDrFqRorDidH04y67P175sBXMtYIwt04KzG7m17X8kbJkjsjuVhD0sZ0ewACz1OBPnxO9qLdvGsRqVtW1FmuKSnDULieqdsQGfuH1YkkVCr7H4t0B5SF77vvxYkvcr4uGRjKMPVdggg3BYQKCWHn~pEEP2~P6oJZdfwbu9wnKJnIvimXVleHYW-hPk0OWBD5JAg__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18164.ts?Expires=1630841672&Signature=HItA9pW3RiIhf9pFFGm4Y8FmikCPXBfh8gxJVNSLsJ9cuDONLX3n26ZjYO2NaROwsID9YjxwlDuS9jqqe62A7vLPsAjVmL6WvCZ8a22tAihPBPM-qOSWoHS7E~3bSurc9CzkQwlOBvg01~Mjl-E2kvP-hn0FxhTPk1FAE8BrL6DIeGKsBqIdvVgHsJyTi9osDNPG~OtKRKRskAK37QcXidkiLjFMcbX6uqwmcVHEpP30fDj13wBMwx2suuJ27~ICmSH44CHCuRcKujISKbrVjbnsUw4ivA7a72hyybSTDhwZBzjj753FFy0LqSVWVFOJJY1HXEnZ4mpvax9N1lth2Q__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18165.ts?Expires=1630841672&Signature=L4T1BtTtHVM7p2JqvXEXLcJDUNdm8IZ8LU-oPkKxYBwuZHXEdxOLTTrFSX-3N39c7JMWDljWNi2bLrjbjK2xa1yMB5eTjvZTjusJDPk91RW0cMB4qsTpuXR1ui~ybPe5ABoV6N4cUXj~bUQFfUURo66kH5UdC~SIKMzQx59mnATvKZfZwOizm2kEuc8qaXPi9yJmYdPGhr6qSN1~kl0NEWciOU3o-etMtFc29yrlGl~Fgj0bvCyAwLwtR4yQwKFHCJWZPiMfJky9GJB4LKcyKBFu7bkDjk2BzOveJklvIPF~tZKkd3ki~I5kfYhTL-~hEDT4i9hIfHJEF1JF1rf~bw__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18166.ts?Expires=1630841672&Signature=Kzf38iYJwebZG2nzkrPSVEvqWxSc959XcvUqiMhZC1lFwZefNTMw1a5EHcUfObujy~3XQ3Yxm-Ls8CziLLvO3Vi8wEg05GB1COnFT1hxasQHID1tmMaXrKrRBZp2XZApehhOpSroJdx46Zb8qlM4JMu3lf30eBIHsbPOIsdmW1o2E9USZUMUKiG-T3feO1kjT3scDsoKcaX2cQrqE8c1oAuEy57eASgFKQcy0OGtrxDujPHLNWYmRv~CFZxHf8LCuMKBrL9OtXE7py0g9x4d4BvwzQ5XOoQ5d5JsfnT8EeH5Lqbh8crtauJb5BrUk6j9uV1MWviZi7WQzGcds6eItg__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18167.ts?Expires=1630841672&Signature=Vc5mVh~J-WEG2eHhiXnsNFBI~kpCtTnwwgiihaP6Fvm1IeA7eJ0QzA5g2Tq1VADLI-B2Bl1Ss~CmSyyXQEiM~IxRVjiNs1~PpnIKm0gFD0iBgIZOS3GoS6bx4bkRiy1tEMn98~~1VGqZ4FxJxc59QOdjmwvAvUvGN01zojOHt0i61XDqjeLz~wFUR9MVh~QYskV4w5sR~THYpKqiMej6JAIVz3avhadVlE1p0P9Gel7LLo59WjFx3Da1huQzBNQ2B8l3-pQpepwbiI0vsrN09aZHLnVtu1NPeEbpG5lZMIhYLay5qQTg1d87ouDoZ8zWYl0buPu5ZL06DiBFIDDhrA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18168.ts?Expires=1630841672&Signature=QsdnxTFnRVml4yq~cbIMRDdESRoX6KH2AkCCm5J-MqW3QEr9RQU5Y7v41nKxIo~IgwI9FMoTRSk61whNyrLePlw2GXq38iK6UhlmpMkJYF3Tvj84GDckbpdqrIQLlZRJPngjx9n2eE3R8Sb7igXwIrr5dymYjEh2Hb0jkYs0~9Zfzr-pJAGoEdUr36hkGP2UXP4n~atb1cDW1hDbd8YJeUNYfKfTSPwq5~E9Te9P674pL2D~WutSM-Gk9xXMhVX7Z0VJWKQh5JWzSkrzDTc9rjTnotWJ7~kU1HqapqD2eVr3DOwI2b19Yv7FGWD3wrxtLA9A8AhkEbpaHLcuYyIS9w__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18169.ts?Expires=1630841672&Signature=e-uHBmY7DMqAkrpRbtfyiRlglUU9wwLY5d2Oar44~xgQerrV~5dAa7q~Nf3V2WNyi22Bg88f4bvjYMIPMjghT4aZol7JXv1Q7VH~1xjydJfaIEXunOZzqswi4PbljlXui7W0c2c59hj~6c96bc6Iyr79x3bvylA1nnxJo2Y6a1Zus0irS7u-45BjXym27NtXrhOwpcVc2GNXhI74yqjXA-vFr1XVuHBHMQVMLTryYlStwoAUXnn7K~U88skq0ursQqpDFCmlDkgoXED~rdm7THJht9wOhkFbf2T79xsENBhPoiS56DLT7qIemBFGDUxHVeoTgZdMLXE2SVsgp-LBmQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181610.ts?Expires=1630841672&Signature=KFxUkMZhteXsl3mSobA5Xg5~PQIztGtmgd~E1g2peja~oHMPNUWE6ihhcOEkO1M6CKXDycegq9~8xv6GqWSrRz5xntTYXNWyRT2-C0W2E79E0Fd1QLndb1~UP1uq~6z-8FbxXLIhHgCzSgaVtPxt8vFqQ1TI-Zd0j0ramKvfWu4iZiZTxEWn5d5Iaaf-LqTdgXWUKqWsr6F0czH7FZh6sI4NVmUAOOD1-sez5ALVr8GBruihB23W5E2yOWtk31KTC-M7TVf1AjwQTJurm~rWka4~~c2lCJ~~o-n~N5p38KdaReZWk2yCqHRYt7pdwpyqIAhosvsVs8Kf5AT2mQV-tQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181611.ts?Expires=1630841672&Signature=AZuneobcwantsOflRrRO4DJzmW0JzqOcDDrB8YKIh~YbL5AuhlZV2OyN6fgUJ0~EVAqRk4h2RpUmZiD4ov8muNu3U-SHp1ksHia3d8cct7Ns485ta87Lb6GqX9yvF3qTNCTT3f5FSQeoKPmGXWPpbzUsdC7TGxNVy8M5IcdqHeoJDrOUeYOqnyQtNDrhWzFsp14YL4RqWBoiz0llpN6w-8QfaeWzCYkT~KxM0UKlPFDzeijXcNJS-tjCxUrT9CnYZ3IfMDvufDCfztd20x37rK1xSln~fuF4PLsMdrfpayY1lSPMgmLP9-~k7SiYth4qSU4CsdgY~1HTZJpUHg2AXQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181612.ts?Expires=1630841672&Signature=Dcl1pJwVlfyN-Lqlq8RruR4t4c3l6Y~hSXPdZyLcspdg16gH-Jk78buQCD2LEniYF6xgXRVRgdLQj26lxiHJi2LiHXHV8~jKQVVrU2lnga9p48M35KdJZheJ~N6f91hsTpHEhYBBSR0TYhRcTMrh1WXstOMW5kHA01nVzq3mOpnHlDFpcHNuTslTAAouqeMXsdY6H4ta15puQcVnvqchOr-7c5dU4ZG14FtHF2WvjnMEWARWDvivOvoqQAqwPQgHm5SxJFw~qyZmIeRUG-TT9i-RXIAzSivg6vKiP2A-AomTOwGW3oFRXKLdMXSMlcd6lmQ7~b7jTi7uNX4Bhup-jQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
`

  const urlArr = urlString.split(",")
  let blobArr = [];
  for(let url of urlArr) {
    if(url) {
      try{
        const res = await fetch(url);
        const blob = await res.blob();
        blobArr.push(blob)
      } catch (err) {
        console.log(err)
      }
    }
  }

  const newBlob = new Blob(blobArr)
  const finalFile = new File([newBlob], "test-udemy");
  const a = document.createElement("a")
  const url = URL.createObjectURL(finalFile);
  a.href = url;
  a.download = "test-udemy";
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);  
  }, 0); 
})()


    


    Unfortunately links will expire soon but I think it is obvious what I am trying to do.

    


    So Is there any way to cancat blobs in JS and create the entire video smoothly like the ffmpeg does ?

    


    Thanks in advance.

    


  • node.js ffmpeg spawn child_process unexpected data output and not possible to kill or stop

    1er septembre 2021, par PLNR

    
I'm rather new to backend stuff, so please excuse, if my question is trivial.
    
For an Intranet project, I want to present a video element in a webpage (React, HLS.js Player) with the possibility reload the stream in case it hung.
    
The video sources are mpeg-ts streams delivered as udp multicast.
    
A small node.js / express server should handle the ffmpeg commands, to transcode the multicast to hls to display them in a browser.
    

    
My Problem is, that I am unable to stop the process...
    
I've tried to SIGINT, SIGTERM the process with it's pid, but the encoding is just going on.

    


    Here is the code I wrote for transcoding so far :

    


    const express = require("express");
const { spawn, exec } = require("child_process");
const cors = require("cors");
const process = require("process")

let ls;
let pid;

const app = express();

app.use(cors());

app.get('/cam/:source', (body) => {
    const cam = body.params.source;
    console.log(cam);

    let source = "udp://239.1.1.1:4444";
    let stream = "/var/www/html/streams/tmp/cam1.m3u8"


    stream = spawn("ffmpeg", ["-re", "-i", source, "-c:v", "libx264", "-crf", "21", "-preset", "veryfast", "-c:a", "aac", "-b:a", "128k", "-ac", "2", "-f", "hls", "-hls_list_size", "5", "-hls_flags", "delete_segments", stream], {detached: true});

    pid = stream.pid;

    stream.stdout.on("data", data => {
        console.log(`stdout: ${data}`);
    });

    stream.stderr.on("data", data => {
        console.log(`stderr: ${data}`);
        console.log("pid: ", pid);
    });

    stream.on("error", error => {
        console.log(`error: ${error.message}`);
    });

    stream.on("close", code => {
        console.log(`child process exited with code ${code}`);
    });
})

app.get('/cam/quit', () => {
    process.kill(pid, 'SIGINT')
})

app.listen(5000, ()=> {
    console.log('Listening');
})


    


    On requesting the /cam/quit i would expect the process to stop... but it doesn't.
    
I've tried :

    


    app.get('/cam/quit', () => {
    process.kill(pid, 'SIGINT')
})


    


    app.get('/cam/quit', () => {
    process.kill(stream.pid, 'SIGINT')
})


    


    app.get('/cam/quit', () => {
    stream.kill(pid, 'SIGINT')
})


    


    app.get('/cam/quit', () => {
    stream.kill(0, 'SIGINT')
})


    


    But none of this worked... do I miss something ? Is there something I need to change ?

    


    Problem 2 - Output :
    
The output is emitted on stderr... even the process is working as expected.
    
This is maybe only cosmetics, but it makes me wondering.
    
Here is the terminal output :

    


    [nodemon] starting `node server.js`
Listening
camera stream reloaded
stderr: ffmpeg version 4.3.2-0+deb11u1ubuntu1 Copyright (c) 2000-2021 the FFmpeg developers
  built with gcc 10 (Ubuntu 10.2.1-20ubuntu1)
  configuration: --prefix=/usr --extra-version=0+deb11u1ubuntu1 --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --arch=amd64 --enable-gpl --disable-stripping --enable-avresample --disable-filter=resample --enable-gnutls --enable-ladspa --enable-libaom --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libcodec2 --enable-libdav1d --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libjack --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librabbitmq --enable-librsvg --enable-librubberband --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libsrt --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzmq --enable-libzvbi --enable-lv2 --enable-omx --enable-openal --enable-opencl --enable-opengl --enable-sdl2 --enable-pocketsphinx --enable-libmfx --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-nvenc --enable-chromaprint --enable-frei0r --enable-libx264 --enable-shared
  libavutil      56. 51.100 / 56. 51.100
  libavcodec     58. 91.100 / 58. 91.100
  libavformat    58. 45.100 / 58. 45.100
  libavdevice    58. 10.100 / 58. 10.100
  libavfilter     7. 85.100 /  7. 85.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  7.100 /  5.  7.100
  libswresample   3.  7.100 /  3.  7.100
  libpostproc    55.  7.100 / 55.  7.100

pid:  4206
stderr: Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'udp://239.1.1.1':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    creation_time   : 
pid:  4206
stderr: 1970-01-01T00:00:00.000000Z
    encoder         : Lavf52.54.0
  Duration: 01:55:59.20, start: 0.000000, bitrate: 1436 kb/s
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 720x384 [SAR 1:1 DAR 15:8], 1272 kb/s, 25 fps, 25 tbr, 25 tbn, 50 tbc (default)
    Metadata:
      creation_time   : 1970-01-01T00:00:00.000000Z
      handler_name    : VideoHandler
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 159 kb/s (default)
    Metadata:
      creation_time   : 1970-01-01T00:00:00.000000Z
      handler_name    : SoundHandler

pid:  4206
stderr: Stream mapping:
  Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264))
  Stream #0:1 -> #0:1 (aac (native) -> aac (native))
Press [q] to stop, [?] for help

pid:  4206
stderr: [libx264 @ 0x5616b38b5440] using SAR=1/1

pid:  4206
stderr: [libx264 @ 0x5616b38b5440] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX FMA3 BMI2 AVX2

pid:  4206
stderr: [libx264 @ 0x5616b38b5440] profile High, level 3.0, 4:2:0, 8-bit

pid:  4206
stderr: [libx264 @ 0x5616b38b5440] 264 - core 160 r3011 cde9a93 - H.264/MPEG-4 AVC codec - Copyleft 2003-2020 - http://www.videolan.org/x264.html - options: cabac=1 ref=1 deblock=1:0:0 analyse=0x3:0x113 me=hex subme=2 psy=1 psy_rd=1.00:0.00 mixed_ref=0 me_range=16 chroma_me=1 trellis=0 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=0 threads=6 lookahead_threads=2 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=1 b_bias=0 direct=1 weightb=1 open_gop=0 weightp=1 keyint=250 keyint_min=25 scenecut=40 intra_refresh=0 rc_lookahead=10 rc=crf mbtree=1 crf=21.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
Output #0, hls, to '/var/www/html/streams/tmp/aft.m3u8':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.45.100
    Stream #0:0(und): Video: h264 (libx264), yuv420p, 720x384 [SAR 1:1 DAR 15:8], q=-1--1, 25 fps, 90k tbn, 25 tbc (default)
    Metadata:
      creation_time   : 1970-01-01T00:00:00.000000Z
      handler_name    : VideoHandler
      encoder         : Lavc58.91.100 libx264
    Side data:
      cpb: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: N/A
    Stream #0:1(und): Audio: aac (LC), 48000 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      creation_time   : 1970-01-01T00:00:00.000000Z
      handler_name    : SoundHandler
      encoder         : Lavc58.91.100 aac

pid:  4206
stderr: frame=    8 fps=0.0 q=0.0 size=N/A time=00:00:00.46 bitrate=N/A speed=0.931x    
pid:  4206
stderr: frame=   21 fps= 21 q=26.0 size=N/A time=00:00:00.96 bitrate=N/A speed=0.95x    
pid:  4206
stderr: frame=   33 fps= 22 q=26.0 size=N/A time=00:00:01.49 bitrate=N/A speed=0.982x    
pid:  4206
stderr: frame=   46 fps= 23 q=26.0 size=N/A time=00:00:02.00 bitrate=N/A speed=0.989x    
pid:  4206
stderr: frame=   58 fps= 23 q=26.0 size=N/A time=00:00:02.49 bitrate=N/A speed=0.986x    
pid:  4206


    


    and so on...
    

    
Any help would be highly appreciated !
    
Many thanks in advance