Recherche avancée

Médias (1)

Mot : - Tags -/embed

Autres articles (55)

  • Librairies et logiciels spécifiques aux médias

    10 décembre 2010, par

    Pour un fonctionnement correct et optimal, plusieurs choses sont à prendre en considération.
    Il est important, après avoir installé apache2, mysql et php5, d’installer d’autres logiciels nécessaires dont les installations sont décrites dans les liens afférants. Un ensemble de librairies multimedias (x264, libtheora, libvpx) utilisées pour l’encodage et le décodage des vidéos et sons afin de supporter le plus grand nombre de fichiers possibles. Cf. : ce tutoriel ; FFMpeg avec le maximum de décodeurs et (...)

  • Les autorisations surchargées par les plugins

    27 avril 2010, par

    Mediaspip core
    autoriser_auteur_modifier() afin que les visiteurs soient capables de modifier leurs informations sur la page d’auteurs

  • HTML5 audio and video support

    13 avril 2011, par

    MediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
    The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
    For older browsers the Flowplayer flash fallback is used.
    MediaSPIP allows for media playback on major mobile platforms with the above (...)

Sur d’autres sites (9366)

  • How to Use Analytics & Reports for Marketing, Sales & More

    28 septembre 2023, par Erin — Analytics Tips

    By now, most professionals know they should be using analytics and reports to make better business decisions. Blogs and thought leaders talk about it all the time. But most sources don’t tell you how to use analytics and reports. So marketers, salespeople and others either skim whatever reports they come across or give up on making data-driven decisions entirely. 

    But it doesn’t have to be this way.

    In this article, we’ll cover what analytics and reports are, how they differ and give you examples of each. Then, we’ll explain how clean data comes into play and how marketing, sales, and user experience teams can use reports and analytics to uncover actionable insights.

    What’s the difference between analytics & reports ? 

    Many people speak of reports and analytics as if the terms are interchangeable, but they have two distinct meanings.

    A report is a collection of data presented in one place. By tracking key metrics and providing numbers, reports tell you what is happening in your business. Analytics is the study of data and the process of generating insights from data. Both rely on data and are essential for understanding and improving your business results.

    https://docs.google.com/document/d/1teSgciAq0vi2oXtq_I2_n6Cv89kPi0gBF1l0zve1L2Q/edit

    A science experiment is a helpful analogy for how reporting and analytics work together. To conduct an experiment, scientists collect data and results and compile a report of what happened. But the process doesn’t stop there. After generating a data report, scientists analyse the data and try to understand the why behind the results.

    In a business context, you collect and organise data in reports. With analytics, you then use those reports and their data to draw conclusions about what works and what doesn’t.

    Reports examples 

    Reports are a valuable tool for just about any part of your business, from sales to finance to human resources. For example, your finance team might collect data about spending and use it to create a report. It might show how much you spend on employee compensation, real estate, raw materials and shipping.

    On the other hand, your marketing team might benefit from a report on lead sources. This would mean collecting data on where your sales leads come from (social media, email, organic search, etc.). You could collect and present lead source data over time for a more in-depth report. This shows which sources are becoming more effective over time. With advanced tools, you can create detailed, custom reports that include multiple factors, such as time, geographical location and device type.

    Analytics examples 

    Because analytics requires looking at and drawing insights from data and reports to collect and present data, analytics often begins by studying reports. 

    In our example of a report on lead sources, an analytics professional might study the report and notice that webinars are an important source of leads. To better understand this, they might look closely at the number of leads acquired compared to how often webinars occur. If they notice that the number of webinar leads has been growing, they might conclude that the business should invest in more webinars to generate more leads. This is just one kind of insight analytics can provide.

    For another example, your human resources team might study a report on employee retention. After analysing the data, they could discover valuable insights, such as which teams have the highest turnover rate. Further analysis might help them uncover why certain teams fail to keep employees and what they can do to solve the problem.

    The importance of clean data 

    Both analytics and reporting rely on data, so it’s essential your data is clean. Clean data means you’ve audited your data, removed inaccuracies and duplicate entries, and corrected mislabelled data or errors. Basically, you want to ensure that each piece of information you’re using for reports and analytics is accurate and organised correctly.

    If your data isn’t clean and accurate, neither will your reports be. And making business decisions based on bad data can come at a considerable cost. Inaccurate data might lead you to invest in a channel that appears more valuable than it actually is. Or it could cause you to overlook opportunities for growth. Moreover, poor data maintenance and the poor insight it provides will lead your team to have less trust in your reports and analytics team.

    The simplest way to maintain clean data is to be meticulous when inputting or transferring data. This can be as simple as ensuring that your sales team fills in every field of an account record. When you need to import or transfer data from other sources, you need to perform quality assurance (QA) checks to make sure data is appropriately labelled and organised. 

    Another way to maintain clean data is by avoiding cookies. Most web visitors reject cookie consent banners. When this happens, analysts and marketers don’t get data on these visitors and only see the percentage of users who accept tracking. This means they decide on a smaller sample size, leading to poor or inaccurate data. These banners also create a poor user experience and annoy web visitors.

    Matomo can be configured to run cookieless — which, in most countries, means you don’t need to have an annoying cookie consent screen on your site. This way, you can get more accurate data and create a better user experience.

    Marketing analytics and reports 

    Analytics and reporting help you measure and improve the effectiveness of your marketing efforts. They help you learn what’s working and what you should invest more time and money into. And bolstering the effectiveness of your marketing will create more opportunities for sales.

    One common area where marketing teams use analytics and reports is to understand and improve their keyword rankings and search engine optimization. They use web analytics platforms like Matomo to report on how their website performs for specific keywords. Insights from these reports are then used to inform changes to the website and the development of new content.

    As we mentioned above, marketing teams often use reports on lead sources to understand how their prospects and customers are learning about the brand. They might analyse their lead sources to better understand their audience. 

    For example, if your company finds that you receive a lot of leads from LinkedIn, you might decide to study the content you post there and how it differs from other platforms. You could apply a similar content approach to other channels to see if it increases lead generation. You can then study reporting on how lead source data changes after you change content strategies. This is one example of how analysing a report can lead to marketing experimentation. 

    Email and paid advertising are also marketing channels that can be optimised with reports and analysis. By studying the data around what emails and ads your audience clicks on, you can draw insights into what topics and messaging resonate with your customers.

    Marketing teams often use A/B testing to learn about audience preferences. In an A/B test, you can test two landing page versions, such as two different types of call-to-action (CTA) buttons. Matomo will generate a report showing how many people clicked each version. From those results, you may draw an insight into the design your audience prefers.

    Sales analytics and reports 

    Sales analytics and reports are used to help teams close more deals and sell more efficiently. They also help businesses understand their revenue, set goals, and optimise sales processes. And understanding your sales and revenue allows you to plan for the future.

    One of the keys to building a successful sales strategy and team is understanding your sales cycle. That’s why it’s so important for companies to analyse their lead and sales data. For business-to-business (B2B) companies in particular, the sales cycle can be a long process. But you can use reporting and analytics to learn about the stages of the buying cycle, including how long they take and how many leads proceed to the next step.

    Analysing lead and customer data also allows you to gain insights into who your customers are. With detailed account records, you can track where your customers are, what industries they come from, what their role is and how much they spend. While you can use reports to gather customer data, you also have to use analysis and qualitative information in order to build buyer personas. 

    Many sales teams use past individual and business performance to understand revenue trends. For instance, you might study historical data reports to learn how seasonality affects your revenue. If you dive deeper, you might find that seasonal trends may depend on the country where your customers live. 

    Sales rep, money and clock

    Conversely, it’s also important to analyse what internal variables are affecting revenue. You can use revenue reports to identify your top-performing sales associates. You can then try to expand and replicate that success. While sales is a field often driven by personal relationships and conversations, many types of reports allow you to learn about and improve the process.

    Website and user behaviour analytics and reports 

    More and more, businesses view their websites as an experience and user behaviour as an important part of their business. And just like sales and marketing, reporting and analytics help you better understand and optimise your web experience. 

    Many web and user behaviour metrics, like traffic source, have important implications for marketing. For example, page traffic and user flows can provide valuable insights into what your customers are interested in. This can then drive future content development and marketing campaigns.

    You can also learn about how your users navigate and use your website. A robust web analytics tool, like Matomo, can supply user session recordings and visitor tracking. For example, you could study which pages a particular user visits. But Matomo also has a feature called Transitions that provides visual reports showing where a particular page’s traffic comes from and where visitors tend to go afterward. 

    As you consider why people might be leaving your website, site performance is another important area for reporting. Most users are accustomed to near-instantaneous web experiences, so it’s worth monitoring your page load time and looking out for backend delays. In today’s world, your website experience is part of what you’re selling to customers. Don’t miss out on opportunities to impress and delight them.

    Dive into your data

    Reporting and analytics can seem like mysterious buzzwords we’re all supposed to understand already. But, like anything else, they require definitions and meaningful examples. When you dig into the topic, though, the applications for reporting and analytics are endless.

    Use these examples to identify how you can use analytics and reports in your role and department to achieve better results, whether that means higher quality leads, bigger deal size or a better user experience.

    To see how Matomo can collect accurate and reliable data and turn it into in-depth analytics and reports, start a free 21-day trial. No credit card required.

  • Conversion Rate Optimisation Statistics for 2024 and Beyond

    21 novembre 2023, par Erin — Analytics Tips

    Driving traffic to your website is only half the battle. The real challenge — once you’ve used a web analytics solution to understand how users behave — is turning more of those visitors into customers.

    That doesn’t happen by accident. You need to employ conversion rate optimisation strategies and tools to see even a small lift in conversion rates. The good news is that it doesn’t take much to see massive results. Raising your conversion rate from 1% to 3% can triple your revenue. 

    In even better news, you don’t have to guess at the best ways to improve your conversion rate. We’ve done the hard work and collected the most recent and relevant conversion rate optimisation statistics to help you. 

    General conversion rate optimisation statistics

    It appears the popularity of conversion rate optimisation is soaring. According to data collected by Google Trends, there were more people searching for the term “conversion rate optimization” in September 2023 than ever before. 

    As you can see from the chart below, the term’s popularity is on a clear upward trajectory, meaning even more people could be searching for it in the near future. (Source)

    More people searching for conversion rate optimization than ever before according to Google Trends data

    Do you want to know what the average landing page conversion rate is ? According to research by WordStream, the average website conversion rate across all industries is 2.35%

    That doesn’t paint the whole picture, however. Better-performing websites have significantly higher conversion rates. The top 25% of websites across all industries convert at a rate of 5.31% or higher. (Source)

    Let’s break things down by industry now. The Unbounce Conversion Benchmark Report offers a detailed analysis of how landing pages convert across various industries.

    First, we have the Finance and Insurance industry, which boasts a conversion rate of 15.6%. 

    On the other end, agencies appears to be one of the worst-performing. Agencies’ landing pages convert at a rate of 8.8%. (Source)

    The average landing page conversion rates across industries

    What about the size of the conversion rate optimisation industry ? Given the growth in popularity of the term in Google, surely the industry is experiencing growth, right ?

    You’d be correct in that assumption. The conversion rate optimisation software market was valued at $771.2 million in 2018 and is projected to reach $1.932 billion by 2026 — a compound annual growth rate (CAGR) of 9.6%.

    Statistics on the importance of conversion rate optimisation

    If you’re reading this article, you probably think conversion rate optimisation is pretty important. But do you know its importance and where it ranks in your competitors’ priorities ? Read on to find out. 

    Bounce rate — the number of people who leave your website without visiting another page or taking action — is the scourge of conversion rate optimisation efforts. Every time someone bounces from your site, you lose the chance to convert them.

    The questions, then, are : how often do people bounce on average and how does your bounce rate compare ? 

    Siege Media analysed over 1.3 billion sessions from a range of traffic sources, including 700 million bounces, to calculate an average bounce rate of 50.9%. (Source)

    The average bounce rate is 50.9%

    Bounce rates vary massively from website to website and industry to industry, however. Siege Media’s study unveils an array of average bounce rates across industries :

    • Travel – 82.58%
    • B2B – 65.17%
    • Lifestyle – 64.26%
    • Business and Finance – 63.51%
    • Healthcare – 59.50%
    • eCommerce – 54.54%
    • Insurance – 45.96%
    • Real Estate – 40.78%

    It won’t come as much of a surprise to learn that marketers are determined to reduce bounce rates and improve lead conversion. Today’s marketers are highly performance-based. When asked about their priorities for the coming year, 79% of marketers said their priority was generating quality qualified leads — the most popular answer in the survey. (Source)

    Just because it is a priority for marketers doesn’t mean that everyone has their stuff together. If you have a conversion rate optimisation process in place, you’re in the minority. According to research by HubSpot, less than one in five marketers (17%) use landing page A/B tests to improve their conversion rates. (Source)

    When it comes to personalisation strategies – a common and effective tool to increase conversion rates — the picture isn’t any rosier. Research by Salesforce found just over one-quarter of markets are confident their organisation has a successful strategy for personalisation. (Source)

    Conversion rate optimisation tactics statistics

    There are hundreds of ways to improve your website’s conversion rates. From changing the color of buttons to the structure of your landing page to your entire conversion funnel, in this section, we’ll look at the most important statistics you need to know when choosing tactics and building your own CRO experiments. 

    If you are looking for the best method to convert visitors, then email lead generation forms are the way to go, according to HubSpot. This inoffensive and low-barrier data collection method boasts a 15% conversion rate, according to the marketing automation company’s research. (Source)

    Where possible, make your call-to-actions personalised. Marketing personalisation, whether through behavioral segmentation or another strategy, is an incredibly powerful way of showing users that you care about their specific needs. It’s no great surprise, then, that HubSpot found personalised calls-to-actions perform a whopping 202% better than basic CTAs. (Source)

    If you want to boost conversion rates, then it’s just as important to focus on quantity as well as quality. Yes, a great-looking, well-written landing page will go a long way to improving your conversion rate, but having a dozen of these pages will do even more. 

    Research by HubSpot found companies see a 55% increase in leads when they increase the number of landing pages from 10 to 15. What’s more, companies with over 40 landing pages increase conversion by more than 500%. (Source)

    Companies with more than 40 landing pages increase conversions by over 500%

    User-generated content (UGC) should also be high on your priority list to boost conversion rates. Several statistics show how powerful, impactful and persuasive social proof like user reviews can be. 

    Research shows that visitors who scroll to the point where they encounter user-generated content increase the likelihood they convert by a staggering 102.4%. (Source)

    Other trust signs can be just as impactful. Research by Trustpilot found that the following four trust signals make consumers more likely to make a purchase when shown on a product page :

    • Positive star rating and reviews (85% more likely to make a purchase)
    • Positive star rating (78%)
    • Positive customer testimonials (82%)
    • Approved or authorised seller badge (76%)

    (Source)

    Showing ratings and reviews has also increased conversion rates by 38% on home appliances and electronics stores. (Source)

    And no wonder, given that consumers are more likely to buy from brands they trust than brands they love, according to the 2021 Edelman Trust Barometer Special Report. (Source

    A lack of trust is also one of the top four reasons consumers abandon their shopping cart at checkout. (Source

    Traffic source conversion rate statistics

    What type of traffic works the best when it comes to conversions, or how often you should be signing up users to your mailing list ? Let’s look at the stats to find out. 

    Email opt-ins are one of the most popular methods for collecting customer information — and an area where digital marketers spend a lot of time and effort when it comes to conversion rate optimisation. So, what is the average conversion rate of an email opt-in box ?

    According to research by Sumo — based on 3.2 billion users who have seen their opt-in boxes — the average email opt-in rate is 1.95%. (Source)

    Search advertising is an effective way of driving website traffic, but how often do those users click on these ads ?

    WordStream’s research puts the average conversion of search advertising for all industries at 6.11%. (Source)

    The arts and entertainment industry enjoys the highest clickthrough rates (11.78%), followed by sports and recreation (10.53%) and travel (10.03%). Legal services and the home improvement industry have the lowest clickthrough rates at 4.76% and 4.8%, respectively.

    The average clickthrough rate of search advertising for each industry
    (Source)

    If you’re spending money on Google ads, then you’d better hope a significant amount of users convert after clicking them. 

    Unfortunately, conversion rates from Google ads decreased year-on-year for most industries in 2023, according to research by WordStream — in some cases, those decreases were significant. The only two industries that didn’t see a decrease in conversion rates were beauty and personal care and education and instruction. (Source)

    The average conversion rate for search ads across all industries is 7.04%. The animal and pet niche has the highest conversion rate (13.41%), while apparel, fashion and jewelry have the lowest conversion rate (1.57%). (Source)

    What about other forms of traffic ? Well, there’s good reason to try running interstitial ads on smartphone apps if you aren’t already. Ads on the iOS app see a 14.3 percent conversion rate on average. (Source)

    E-commerce conversion rate optimisation statistics (400 words)

    Conversion rate optimisation can be the difference between a store that sets new annual sales records and one struggling to get by. 

    The good news is that the conversion rate among US shoppers was the highest it’s ever been in 2021, with users converting at 2.6%. (Source)

    If you have a Shopify store, then you may find conversion rates a little lower. A survey by Littledata found the average conversion rate for Shopify was 1.4% in September 2022. (Source)

    What about specific e-commerce categories ? According to data provided by Dynamic Yield, the consumer goods category converted at the highest rate in September 2023 (4.22%), a spike of 0.34% from August. 

    Generally, the food and beverage niche boasts the highest conversion rate (4.87%), and the home and furniture niche has the lowest conversion rate (1.44%). (Source)

    If you’re serious about driving sales, don’t focus on mobile devices at the expense of consumers who shop on desktop devices. The conversion rate among US shoppers tends to be higher for desktop users than for mobile users. 

    The conversion rate among US online shoppers is generally higher for desktop than

    In the second quarter of 2022, for instance, desktop shoppers converted at a rate of 3% on average compared to smartphone users who converted at an average rate of 2%. (Source)

    Increase your conversions with Matomo

    Conversion rate optimisation can help you grow your subscriber list, build your customer base and increase your revenue. Now, it’s time to put what you’ve learned into practice.

    Use the advice above to guide your experiments and track everything with Matomo. Achieve unparalleled data accuracy while harnessing an all-in-one solution packed with essential conversion optimisation features, including Heatmaps, Session Recordings and A/B Testing. Matomo makes it easier than ever to analyse conversion-focused experiments.

    Get more from your conversion rate optimisations by trying Matomo free for 21 days. No credit card required.

  • How to Stream RTP (IP camera) Into React App setup

    10 novembre 2024, par sharon2469

    I 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 :

    


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

    &#xA;

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

    &#xA;