Recherche avancée
Médias (1)
-
Publier une image simplement
13 avril 2011, par ,
Mis à jour : Février 2012
Langue : français
Type : Video
Autres articles (61)
-
Les vidéos
21 avril 2011, parComme les documents de type "audio", Mediaspip affiche dans la mesure du possible les vidéos grâce à la balise html5 .
Un des inconvénients de cette balise est qu’elle n’est pas reconnue correctement par certains navigateurs (Internet Explorer pour ne pas le nommer) et que chaque navigateur ne gère en natif que certains formats de vidéos.
Son avantage principal quant à lui est de bénéficier de la prise en charge native de vidéos dans les navigateur et donc de se passer de l’utilisation de Flash et (...) -
Les autorisations surchargées par les plugins
27 avril 2010, parMediaspip core
autoriser_auteur_modifier() afin que les visiteurs soient capables de modifier leurs informations sur la page d’auteurs -
Personnaliser l’affichage de mon Médiaspip
27 mai 2013Vous pouvez modifier la configuration du squelette afin de personnaliser votre Médiaspip Voir aussi plus d’informations en suivant ce lien
Comment supprimer le nombre de vues d’affichage d’un média ?
Administrer > Gestion du squelette > Pages des articles et médias Cocher dans "Informations non affichées sur les pages de médias" les paramètres que vous ne souhaitez pas afficher.
Comment supprimer le titre de mon Médiaspip dans le bandeau horizontal ?
Administrer > Gestion du squelette > (...)
Sur d’autres sites (8097)
-
How to Stream RTP (IP camera) Into React App setup
10 novembre 2024, par sharon2469I am trying to transfer a live broadcast from an IP camera or any other broadcast coming from an RTP/RTSP source to my REACT application. BUT MUST BE LIVE


My setup at the moment is :


IP Camera -> (RTP) -> FFmpeg -> (udp) -> Server(nodeJs) -> (WebRTC) -> React app


In the current situation, There is almost no delay, but there are some things here that I can't avoid and I can't understand why, and here is my question :


1) First, is the SETUP even correct and this is the only way to Stream RTP video in Web app ?


2) Is it possible to avoid re-encode the stream , RTP transmission necessarily comes in H.264, hence I don't really need to execute the following command :


return spawn('ffmpeg', [
 '-re', // Read input at its native frame rate Important for live-streaming
 '-probesize', '32', // Set probing size to 32 bytes (32 is minimum)
 '-analyzeduration', '1000000', // An input duration of 1 second
 '-c:v', 'h264', // Video codec of input video
 '-i', 'rtp://238.0.0.2:48888', // Input stream URL
 '-map', '0:v?', // Select video from input stream
 '-c:v', 'libx264', // Video codec of output stream
 '-preset', 'ultrafast', // Faster encoding for lower latency
 '-tune', 'zerolatency', // Optimize for zero latency
 // '-s', '768x480', // Adjust the resolution (experiment with values)
 '-f', 'rtp', `rtp://127.0.0.1:${udpPort}` // Output stream URL
]);


As you can se in this command I re-encode to libx264, But if I set FFMPEG a parameter '-c:v' :'copy' instead of '-c:v', 'libx264' then FFMPEG throw an error says : that it doesn't know how to encode h264 and only knows what is libx264-> Basically, I want to stop the re-encode because there is really no need for it, because the stream is already encoded to H264. Are there certain recommendations that can be made ?


3) I thought about giving up the FFMPEG completely, but the RTP packets arrive at a size of 1200+ BYTES when WEBRTC is limited to up to 1280 BYTE. Is there a way to manage these sabotages without damaging the video and is it to enter this world ? I guess there is the whole story with the JITTER BUFFER here


This is my server side code (THIS IS JUST A TEST CODE)


import {
 MediaStreamTrack,
 randomPort,
 RTCPeerConnection,
 RTCRtpCodecParameters,
 RtpPacket,
} from 'werift'
import {Server} from "ws";
import {createSocket} from "dgram";
import {spawn} from "child_process";
import LoggerFactory from "./logger/loggerFactory";

//

const log = LoggerFactory.getLogger('ServerMedia')

// Websocket server -> WebRTC
const serverPort = 8888
const server = new Server({port: serverPort});
log.info(`Server Media start om port: ${serverPort}`);

// UDP server -> ffmpeg
const udpPort = 48888
const udp = createSocket("udp4");
// udp.bind(udpPort, () => {
// udp.addMembership("238.0.0.2");
// })
udp.bind(udpPort)
log.info(`UDP port: ${udpPort}`)


const createFFmpegProcess = () => {
 log.info(`Start ffmpeg process`)
 return spawn('ffmpeg', [
 '-re', // Read input at its native frame rate Important for live-streaming
 '-probesize', '32', // Set probing size to 32 bytes (32 is minimum)
 '-analyzeduration', '1000000', // An input duration of 1 second
 '-c:v', 'h264', // Video codec of input video
 '-i', 'rtp://238.0.0.2:48888', // Input stream URL
 '-map', '0:v?', // Select video from input stream
 '-c:v', 'libx264', // Video codec of output stream
 '-preset', 'ultrafast', // Faster encoding for lower latency
 '-tune', 'zerolatency', // Optimize for zero latency
 // '-s', '768x480', // Adjust the resolution (experiment with values)
 '-f', 'rtp', `rtp://127.0.0.1:${udpPort}` // Output stream URL
 ]);

}

let ffmpegProcess = createFFmpegProcess();


const attachFFmpegListeners = () => {
 // Capture standard output and print it
 ffmpegProcess.stdout.on('data', (data) => {
 log.info(`FFMPEG process stdout: ${data}`);
 });

 // Capture standard error and print it
 ffmpegProcess.stderr.on('data', (data) => {
 console.error(`ffmpeg stderr: ${data}`);
 });

 // Listen for the exit event
 ffmpegProcess.on('exit', (code, signal) => {
 if (code !== null) {
 log.info(`ffmpeg process exited with code ${code}`);
 } else if (signal !== null) {
 log.info(`ffmpeg process killed with signal ${signal}`);
 }
 });
};


attachFFmpegListeners();


server.on("connection", async (socket) => {
 const payloadType = 96; // It is a numerical value that is assigned to each codec in the SDP offer/answer exchange -> for H264
 // Create a peer connection with the codec parameters set in advance.
 const pc = new RTCPeerConnection({
 codecs: {
 audio: [],
 video: [
 new RTCRtpCodecParameters({
 mimeType: "video/H264",
 clockRate: 90000, // 90000 is the default value for H264
 payloadType: payloadType,
 }),
 ],
 },
 });

 const track = new MediaStreamTrack({kind: "video"});


 udp.on("message", (data) => {
 console.log(data)
 const rtp = RtpPacket.deSerialize(data);
 rtp.header.payloadType = payloadType;
 track.writeRtp(rtp);
 });

 udp.on("error", (err) => {
 console.log(err)

 });

 udp.on("close", () => {
 console.log("close")
 });

 pc.addTransceiver(track, {direction: "sendonly"});

 await pc.setLocalDescription(await pc.createOffer());
 const sdp = JSON.stringify(pc.localDescription);
 socket.send(sdp);

 socket.on("message", (data: any) => {
 if (data.toString() === 'resetFFMPEG') {
 ffmpegProcess.kill('SIGINT');
 log.info(`FFMPEG process killed`)
 setTimeout(() => {
 ffmpegProcess = createFFmpegProcess();
 attachFFmpegListeners();
 }, 5000)
 } else {
 pc.setRemoteDescription(JSON.parse(data));
 }
 });
});


And this fronted :





 
 
 <code class="echappe-js"><script&#xA; crossorigin&#xA; src="https://unpkg.com/react@16/umd/react.development.js"&#xA; ></script>
<script&#xA; crossorigin&#xA; src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&#xA; ></script>
<script&#xA; crossorigin&#xA; src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"&#xA; ></script>
<script src="https://cdn.jsdelivr.net/npm/babel-regenerator-runtime@6.5.0/runtime.min.js"></script>







<script type="text/babel">&#xA; let rtc;&#xA;&#xA; const App = () => {&#xA; const [log, setLog] = React.useState([]);&#xA; const videoRef = React.useRef();&#xA; const socket = new WebSocket("ws://localhost:8888");&#xA; const [peer, setPeer] = React.useState(null); // Add state to keep track of the peer connection&#xA;&#xA; React.useEffect(() => {&#xA; (async () => {&#xA; await new Promise((r) => (socket.onopen = r));&#xA; console.log("open websocket");&#xA;&#xA; const handleOffer = async (offer) => {&#xA; console.log("new offer", offer.sdp);&#xA;&#xA; const updatedPeer = new RTCPeerConnection({&#xA; iceServers: [],&#xA; sdpSemantics: "unified-plan",&#xA; });&#xA;&#xA; updatedPeer.onicecandidate = ({ candidate }) => {&#xA; if (!candidate) {&#xA; const sdp = JSON.stringify(updatedPeer.localDescription);&#xA; console.log(sdp);&#xA; socket.send(sdp);&#xA; }&#xA; };&#xA;&#xA; updatedPeer.oniceconnectionstatechange = () => {&#xA; console.log(&#xA; "oniceconnectionstatechange",&#xA; updatedPeer.iceConnectionState&#xA; );&#xA; };&#xA;&#xA; updatedPeer.ontrack = (e) => {&#xA; console.log("ontrack", e);&#xA; videoRef.current.srcObject = e.streams[0];&#xA; };&#xA;&#xA; await updatedPeer.setRemoteDescription(offer);&#xA; const answer = await updatedPeer.createAnswer();&#xA; await updatedPeer.setLocalDescription(answer);&#xA;&#xA; setPeer(updatedPeer);&#xA; };&#xA;&#xA; socket.onmessage = (ev) => {&#xA; const data = JSON.parse(ev.data);&#xA; if (data.type === "offer") {&#xA; handleOffer(data);&#xA; } else if (data.type === "resetFFMPEG") {&#xA; // Handle the resetFFMPEG message&#xA; console.log("FFmpeg reset requested");&#xA; }&#xA; };&#xA; })();&#xA; }, []); // Added socket as a dependency to the useEffect hook&#xA;&#xA; const sendRequestToResetFFmpeg = () => {&#xA; socket.send("resetFFMPEG");&#xA; };&#xA;&#xA; return (&#xA; <div>&#xA; Video: &#xA; <video ref={videoRef} autoPlay muted />&#xA; <button onClick={() => sendRequestToResetFFmpeg()}>Reset FFMPEG</button>&#xA; </div>&#xA; );&#xA; };&#xA;&#xA; ReactDOM.render(<App />, document.getElementById("app1"));&#xA;</script>




-
8 Best Tools to Analyse Website Traffic
12 septembre 2023, par Erin — Analytics Tips, MarketingDo you want to analyse your website traffic ?
Maybe you want to know how well you’re converting your traffic. Or maybe you’re looking to track the performance and ROI of your marketing campaigns. Regardless, you won’t get far without relying on a dependable web traffic analysis platform.
In this article, we’ve compiled a list of the top web analytics tools available (including the pricing for each one).
Let’s dive in.
What is website traffic analysis ?
Curious about what it means to analyse website traffic ?
Simply put, it involves collecting and examining data about your website visitors and the actions they take. Marketers, analysts and website owners can then take this data and use it to optimise their strategy to improve site traffic, conversion rates and ROI.
A website analytics tool is software that tracks and measures various visitor activities and behaviours on your website. Common metrics include pageviews, traffic source, bounce rate and average time on page. Using a web analytics solution can give you insights into what’s working (and what’s not working) so you can optimise your website, campaigns or marketing strategy.
Advantages of using a website traffic analysis tool
1. Performance measurement and optimisation
Tracking the success of your marketing efforts is a challenging task. The primary benefit of using a web analytics tool is implementing effective performance measurement. If you don’t know how to measure your efforts, you won’t know what’s working and what’s not with your campaigns and content.
A web analysis tool can give you the insights you need to understand whether your marketing initiatives have been successful or if they need to be improved.
For instance, your new web design facelift may seem beautiful, but if visitors aren’t staying on your site as long and it is resulting in lower conversions, then it’s time to go back to the drawing board.
2. Audience insights to improve the user experience
Web traffic analysis platforms don’t just show you what your visitors are doing. It shows you who your audience is. A powerful website analytics tool will give you in-depth audience data, including demographics like geographical location (e.g., city, state or country), to help you better understand your audience.
Additionally, you can learn more about your audience by seeing how they interact with different content on your site. You’ll start to see that certain content performs better than others, giving you a greater understanding of your audience’s needs and wants. This means you’ll be able to tailor your website content and marketing efforts to your audience to improve the overall user experience.
3. Improve SEO
In the first two advantages, we touched on how insights can help you craft better content for the visitors already coming to your site to improve the user experience and improve conversions. But did you know that using a website analytics tool can also help improve how much traffic you’re getting to your site ?
Since a web analytics tool can help you craft better content, one side effect is an increase in traffic from organic search through SEO. Additionally, your platform will likely show you other traffic sources that your visitors are coming from (i.e., another website is referring traffic to you) so you can tap into those high-performing sources and optimise your incoming traffic over time.
Top 8 Tools to Analyse Website Traffic
Here’s a breakdown of the top eight web analytics platforms to help you analyse each tool’s unique features, price, advantages and disadvantages so you can make the best decision.
1. Matomo
Matomo is an open-source website analytics tool that’s focused on protecting user privacy and data while offering robust insights into your web traffic. It’s one of the most powerful tools to track the entire customer journey on your site.
Why Matomo : As the leader in open-source, privacy-friendly and ethical web analytics, Matomo is trusted by more than 1 million websites, including NASA, the United Nations and the European Commission.
Matomo plays well with Google Analytics to track your websites by filling in the gaps where Google Analytics has limitations (i.e., cookie consent banner requirement). Matomo combines traditional and behavioural web analytics for deeper insights while ensuring compliance with the strictest privacy regulations like GDPR, LGPD and HIPAA.
Matomo Standout Features and Integrations :
Standout features include comprehensive visitor tracking, multi-attribution, goal tracking, event tracking, custom dimensions, custom reports, automated email reports, session recordings, tag manager, roll-up reporting to pull data from multiple sites, Google Analytics importer, heatmaps and more.
Integrations include WordPress, Google Ads, Wix, Drupal, Joomla, Cloudflare, Magento, Vue, SharePoint, WooCommerce and more.
Pricing starts free for Matomo On-Premise (but requires technical skills and servers to set up) and $23/month for Matomo Cloud, which includes a 21-day free trial (no credit card required).
Pros
- Best for respecting visitor privacy
- You own your data — ensuring that it’s not shared with third parties for purposes like advertising
- Compliant with the strictest privacy laws
- Greater flexibility with open-source advantages, as well as the option to either self-host or cloud host
- Can run cookieless — providing 100% accurate data and a better user experience without the need for an annoying cookie consent banner
- Exceptional customisability — from white labeling, alerts and custom dimensions to dashboards and reports, tailor your insights for faster decisions, deeper insights and superior outcomes
Cons
- On-Premise is free, but there are additional costs for advanced features
- On-Premise requires servers and technical expertise to manage
2. Google Analytics
Google Analytics is the most well-known and used web analytics platform in the world, with nearly 30 million active websites.
Why Google Analytics : It’s one of the leading web traffic analysis tools backed by the Alphabet group of companies. For anyone getting started, it’s a great free option to understand your web traffic and your audience.
Google Analytics Standout Features and Integrations :
Standout features include in-depth visitor tracking, event tracking with Google Analytics 4 (GA4), easy integration with Google marketing tools (i.e., Google Search Console and Google Ads), custom reports and easy data importing from third-party sources.
Integrations include Google Ads, Google Webmaster Tools, AdSense, WordPress, Wix, Shopify, Zendesk, Facebook, Marketo, WordPress, Hotjar, SEMrush, Salesforce, Hootsuite and more.
Pricing is free.
Pros
- Detailed audience insights
- Customisable reports
- Seamless integration with other Google products
- Easy to set up
Cons
- Not privacy-friendly — you don’t own your data (data is shared with third parties for advertising purposes)
- Complex interface
- Requires cookie consent banner for GDPR compliance, which negatively impacts data accuracy and user experience
3. Fathom Analytics
Founded in 2018, Fathom Analytics is a privacy-friendly and lightweight web analytics tool. The platform offers a simple, minimalistic dashboard.
Why Fathom Analytics : Fathom Analytics is a minimalistic tool to help website owners gain insights into customer behaviour without compromising on privacy. It’s an easy-to-use tool that offers a simplified breakdown of the most popular data points. For newcomers to web analytics seeking essential metrics like visitor counts and traffic sources, Fathom Analytics provides a straightforward, cost-effective solution.
Fathom Analytics Standout Features and Integrations :
Standout features include easy, automated GA4 importing with lifetime data retention, a single-page dashboard for a quick overview of metrics, traffic summaries for chosen timeframes, visually striking graphs for better data digestion and privacy protection covering major compliance regulations.
Integrations include Google Analytics, Squarespace, Drupal, WordPress, Discourse, Bloggi, ConvertKit, Webflow, Transistor, Remix, Gatsby and Carrd.
Pricing starts at $14/month for up to 100k pageviews (with a 30-day free trial).
Pros
- Doesn’t use cookies
- Out-of-the-box GDPR, ePrivacy, PECR and CCPA compliance
- Great for visual data insights
- Lightweight tracking script for fast loading
Cons
- Can’t easily see traffic trends on specific pages
- Metrics may be too simple for those wanting advanced analytics
4. Mixpanel
Mixpanel is a web analytics platform that helps you track visitors as well as improve customer retention. The software has 8,000 customers worldwide, including Netflix, Yelp, BuzzFeed and CNN.
Why Mixpanel : Mixpanel is great for websites with e-commerce functionality. The tool helps you understand both your site visitors and your customers so you can optimise your customer experience and improve conversions.
Mixpanel Standout Features and Integrations :
Standout features include deep insights into how your products are being used, including your most popular features, user cohorts that let you segment users based on specific actions, and visual analysis showing where users drop off.
Integrations include Google Cloud, Figma, Mailchimp, Zoho CRM, Databox, Marketo, Hotjar, Slack, Zapier, Amazon Web Services, Google Ads and HubSpot.
Pricing starts free for up to 20 million events per month and $20/month for Growth.
Pros
- Interface is easy for beginners
- Exhaustive reporting options
- Custom event tracking options
- Predict user actions based on data science models
- Send targeted messages to specific users to encourage action
Cons
- User-based pricing isn’t the most ideal for everyone
- Alert management can be confusing
5. Kissmetrics
Kissmetrics is a marketing and product analytics tool that helps e-commerce and SaaS companies grow through qualitative data insights. The web analytics tool is trusted by 10,000 users, including Microsoft, Unbounce, AWeber, Dropbox DocSend and SendGrid.
Why Kissmetrics : As an e-commerce-driven analytics platform, the platform is best suited for Enterprise businesses, but it also offers flexible pricing plans that make it easy for someone to get their feet wet with website analytics.
Kissmetrics Standout Features and Integrations :
Standout features include a customisable dashboard to see key metrics at a glance, comprehensive visitor tracking, cohort analysis including power user tracking to understand your most active visitors and customers and insights into customer lifetime value and churn rate.
Integrations include Chargify, HubSpot, Slack, Live Chat, Marketo, Optimizely, Mailchimp, Recurly, Wufoo Forms, Facebook Ads, WordPress, Shopify and WooCommerce.
Pricing starts at $0.0025/event for the Pay As You Go Plan, $25.99/month for Build Your Plan and $199/month for Small Teams, which includes a 7-day free trial.
Pros
- Flexible pricing options
- Easy to install
- Several analytics viewing options
- Visual checkout funnel insights
- Track sessions by desktop or mobile
Cons
- Despite more pricing options, it’s still quite expensive overall
- Difficult to use for beginners
6. Adobe Analytics
Adobe Analytics is a web and marketing analytics platform within the Adobe Experience Platform. Used by over 170,000 businesses, it’s one of the most popular analytics solutions available.
Why Adobe Analytics : Adobe Analytics was created for large organisations. It’s essentially the enterprise version of Google Analytics. The tool does a great job of offering a customised analytics solution that’s capable of delivering personalised user experiences at scale.
Adobe Analytics Standout Features and Integrations :
Standout features include attribution, AI-driven predictive analytics, robust customer segmentation and automation based on customer behaviour.
Integrations include all Adobe products, Salesforce, Hootsuite, Contentsquare, Sisense, Mouseflow, Google Ads, Google Search Console, HubSpot and Microsoft Teams.
Pricing is custom and available upon request, but users can expect to pay at least $2,000 per month, and there is no free trial.
Pros
- Built for enterprise businesses
- Seamless workflow integration for Adobe Experience Cloud users
- Incredible customisation options
- Integration process is flexible
- Capable of accurately tracking large volumes of traffic
Cons
- Very expensive
- Not suitable for small businesses
- The setup is challenging for beginners
7. SimilarWeb
SimilarWeb is a robust analytics platform used to track your website data and compare it to other websites. Backed by a team of experienced data scientists and mathematicians for in-depth website traffic and search engine analysis. Founded in 2007, the platform is trusted by major brands like Adidas, DHL, PepsiCo and Walmart.
Why SimilarWeb : The tool relies on multiple scientific methodologies and approaches to data analysis to help provide a better understanding of visitors and customers. The platform is great for crafting prediction models for customer acquisitions by using machine learning to offer SEO insights and competitive analysis.
SimilarWeb Standout Features and Integrations :
Standout features include competition traffic and engagement analysis, in-depth visitor tracking, keyword analysis to optimise your SEO and search ads, affiliate traffic analysis, search traffic analysis and funnel insights.
Integrations include Salesforce, HubSpot, Google Analytics, Google Search Console, Shift, AT Internet, Adverity, SimilarTech, Biscience and more.
Pricing starts at $125/month for the Starter plan, which includes a 7-day free trial.
Pros
- Has a user-friendly dashboard for simple insights
- Highly customisable platform to meet your specific needs
- Easy competition analysis
- Funnel insights to improve your conversion rates
- Great customer support
Cons
- Expensive pricing
- Doesn’t include a code snippet to pull data directly from websites
- Doesn’t show sub-domains of your site
8. Hotjar
Hotjar is a behavioural website analytics tool with a focus on providing insights into individual user sessions with features like heatmaps and session recordings. Founded in 2014, Hotjar is used by 900,000 sites around the world.
Why Hotjar : Unlike traditional web analytics tools like Google Analytics, Hotjar is a behavioural analytics tool that provides in-depth behaviour insights session by session. The tool offers a variety of features that give you a sneak peek into your users’ behaviours by watching how they interact with your site action by action.
Hotjar Standout Features and Integrations :
Standout features include comprehensive heat mapping, visitor session recordings to see what visitors did moment by moment, feedback polls to gain insights from site visitors and conversion funnels to help you analyse leaks in your funnel at each conversion stage.
Integrations include HubSpot, Slack, Jira, WordPress, Shopify, Google Analytics, Mixpanel, Microsoft Teams, Zapier and ClickFunnels.
Pricing starts at free for the Basic plan and $80/month for Business, which includes a 15-day free trial.
Pros
- You can see exactly where visitors click, move and scroll
- Watch session replays to see what visitors did step-by-step
- See what percentage of visitors take certain actions
- Data segmentation features to help you understand KPIs in-depth
- There are no user limits with the platform, making it easy to scale
Cons
- While it offers behavioural analytics, Hotjar doesn’t provide insights into traditional web analytics like Matomo does, including traffic sources and bounce rate
- History data monitoring is complex
Elevate your website performance today
Understanding your visitors’ behaviour and needs is essential when you’re looking to improve your website performance.
By leveraging a website analytics platform, you’ll be able to gain new insights into your visitors and use insights from your content and campaign performance to improve your user experience.
If you’re looking to start using a web traffic analysis tool today, then Matomo is an excellent choice.
Matomo is a powerful, privacy-friendly and compliant tool that gives in-depth insights into your audience, your content and your marketing efforts to help you improve your site’s performance.
The platform also includes a variety of robust behavioural analytics features like heatmaps, session recording and more, which are included in your Cloud subscription.
Start your 21-day free trial of Matomo today (no credit card required).
-
is it possible to use obs overlay on ffmpeg ?
3 septembre 2023, par sazer kplai know thats ffmpeg dosnt support obs overlay from an url but is there any workaround to do that , i can do that with puppeter but thats will increase the usage of resource ,and i have very limited plan free one XD with only 512mb of ram


what is the best way to integrate animation from url (OBS overlay) in ffmpeg live stream


Syndiquer tout le site
