MediaSPIP 0.1 beta is the first version of MediaSPIP proclaimed as "usable".
The zip file provided here only contains the sources of MediaSPIP in its standalone version.
To get a working installation, you must manually install all-software dependencies on the server.
If you want to use this archive for an installation in "farm mode", you will also need to proceed to other manual (...)
Comme 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 (...)
The following are all the steps that I took to render a RTSP stream in my web app :


How to display RTSP stream in browser using HLS


Situation and Problem
You have an RTSP stream that you want to display in a browser using HLS (HTTP Live Streaming). However, when you try to play the RTSP stream in the browser using hls.js, you encounter the error "Unsupported HEVC in M2TS found." This error indicates that the HLS stream uses the HEVC (H.265) codec, which is not widely supported by many browsers and HLS players, including hls.js.


The most reliable solution is to transcode the stream from H.265 to H.264 using FFmpeg, which is more broadly supported. Here's how to transcode the stream :


Step 1 : Transcode the Stream Using FFmpeg


Run the following FFmpeg command to transcode the RTSP stream from H.265 to H.264 and generate the HLS segments :
hls_time 10 sets the duration of each segment to 10 seconds.


hls_list_size 0 tells FFmpeg to include all segments in the playlist.


f hls specifies the output format as HLS.


C :\path\to\output\ is the directory where the HLS files will be saved. Ensure that C :\path\to\output\ is the directory where you want to save the HLS files.


Step 2 : Verify the HLS Files


After running the FFmpeg command, verify that the following files are generated in the output directory :
Navigate to the directory containing the HLS files and start the HTTP server :


cd C :\path\to\output
python -m http.server 8000
Step 4 : Update and Test the HTML File
Ensure that hls_test.html file is in the same directory as the HLS files and update it as needed :


hls_test.html :




 
 
 
 
 
 
 <h1>HLS Stream Test</h1>
 <button>Play Stream</button>
 <video controls="controls" style="width: 100%; height: auto;"></video>
 <code class="echappe-js"><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 <script>&#xA; document&#xA; .getElementById(&#x27;playButton&#x27;)&#xA; .addEventListener(&#x27;click&#x27;, () => {&#xA; const video = document.getElementById(&#x27;video&#x27;);&#xA; if (Hls.isSupported()) {&#xA; const hls = new Hls();&#xA; hls.loadSource(&#x27;http://localhost:8000/index.m3u8&#x27;);&#xA; hls.attachMedia(video);&#xA; hls.on(Hls.Events.MANIFEST_PARSED, function () {&#xA; video.play().catch((error) => {&#xA; console.error(&#xA; &#x27;Error attempting to play:&#x27;,&#xA; error,&#xA; );&#xA; });&#xA; });&#xA; hls.on(Hls.Events.ERROR, function (event, data) {&#xA; console.error(&#x27;HLS Error:&#x27;, data);&#xA; });&#xA; } else if (&#xA; video.canPlayType(&#x27;application/vnd.apple.mpegurl&#x27;)&#xA; ) {&#xA; video.src = &#x27;http://localhost:8000/index.m3u8&#x27;;&#xA; video.addEventListener(&#x27;canplay&#x27;, function () {&#xA; video.play().catch((error) => {&#xA; console.error(&#xA; &#x27;Error attempting to play:&#x27;,&#xA; error,&#xA; );&#xA; });&#xA; });&#xA; } else {&#xA; console.error(&#x27;HLS not supported in this browser.&#x27;);&#xA; }&#xA; });&#xA; </script>
 




Step 5 : Open the HTML File in Your Browser


Open your browser and navigate to :


http://localhost:8000/hls_test.html



Click the "Play Stream" button to start playing the HLS stream. If everything is set up correctly, you should see the video playing in the browser.


Conclusion


By transcoding the RTSP stream from H.265 to H.264 and serving it as an HLS stream, you can display the video in a browser using hls.js. This approach ensures broader compatibility with browsers and HLS players, allowing you to stream video content seamlessly.


PART 2 : Add this method to the react app


We are assuming that the ffmpeg command is running in the background and generating the HLS stream. Now, we will create a React component that plays the HLS stream in the browser using the video.js library.


If not, please refer to the previous steps to generate the HLS stream using FFmpeg. (steps 1-3 of the previous section)
Note : see we are pointing to the HLS stream URL generated by FFmpeg in the previous steps.


Step 3 : Create the Cors Proxy Server and place it where the HLS files are being stored.


from http.server import HTTPServer, SimpleHTTPRequestHandler
import socketserver
import os

class CORSRequestHandler(SimpleHTTPRequestHandler):
 def end_headers(self):
 if self.path.endswith('.m3u8'):
 self.send_header('Content-Type', 'application/vnd.apple.mpegurl')
 elif self.path.endswith('.ts'):
 self.send_header('Content-Type', 'video/MP2T')
 super().end_headers()

if __name__ == '__main__':
 port = 8000
 handler = CORSRequestHandler
 web_dir = r'C:\Video_cam_usv'
 os.chdir(web_dir)
 httpd = socketserver.TCPServer(('', port), handler)
 print(f"Serving HTTP on port {port}")
 httpd.serve_forever()



Note : Change the web_dir to the directory where the HLS files are stored.


Also, note that the server is sending the correct MIME types for .m3u8 and .ts files. For example :


.m3u8 should be application/vnd.apple.mpegurl or application/x-mpegURL.
.ts should be video/MP2T.



Step 4 : Start the CORS Proxy Server


Open a terminal, navigate to the directory where the CORS proxy server script is located (same as the HLS files are being saved), and run the following command :


python cors_proxy_server.py



This will start the CORS proxy server on port 8000 and serve the HLS files with the correct MIME types.


Step 5 : Start the React App
Start your React app using the following command :


npm run dev


I have tried everything above (it´s my own doc to keep with the steps Ive taken so far) and I get the stream to render on my web app but the latency is very high, at least of 5-10 secs, how can i make it be real time or close to that ?
Your data is everywhere. Every time you sign up for an email list, log in to Facebook or download a free app onto your smartphone, your data is being taken.
This can scare customers and users who fear their data will be misused.
While data can be a powerful asset for your business, it’s important you manage it well, or you could be in over your head.
In this guide, we break down what data misuse is, what the different types are, some examples of major data misuse and how you can prevent it so you can grow your brand sustainably.
What is data misuse ?
Data is a good thing.
It helps analysts and marketers understand their customers better so they can serve them relevant information, products and services to improve their lives.
But it can quickly become a bad thing for both the customers and business owners when it’s mishandled and misused.
Data misuse is when a business uses data outside of the agreed-upon terms. When companies collect data, they need to legally communicate how that data is being used.
Who or what determines when data is being misused ?
Several bodies :
User agreements
Data privacy laws
Corporate policies
Industry regulations
There are certain laws and regulations around how you can collect and use data. Failure to comply with these guidelines and rules can result in several consequences, including legal action.
Keep reading to discover the different types of data misuse and how to prevent it.
3 types of data misuse
There are a few different types of data misuse.
If you fail to understand them, you could face penalties, legal trouble and a poor brand reputation.
1. Commingling
When you collect data, you need to ensure you’re using it for the right purpose. Commingling is when an organisation collects data from a specific audience for a specific reason but then uses the data for another purpose.
One example of commingling is if a company shares sensitive customer data with another company. In many cases, sister companies will share data even if the terms of the data collection didn’t include that clause.
Another example is if someone collects data for academic purposes like research but then uses the data later on for marketing purposes to drive business growth in a for-profit company.
In either case, the company went wrong by not being clear on what the data would be used for. You must communicate with your audience exactly how the data will be used.
2. Personal benefit
The second common way data is misused in the workplace is through “personal benefit.” This is when someone with access to data abuses it for their own gain.
The most common example of personal benefit data muse is when an employee misuses internal data.
While this may sound like each instance of data misuse is caused by malicious intent, that’s not always the case. Data misuse can still exist even if an employee didn’t have any harmful intent behind their actions.
One of the most common examples is when an employee mistakenly moves data from a company device to personal devices for easier access.
3. Ambiguity
As mentioned above, when discussing commingling, a company must only use data how they say they will use it when they collect it.
A company can misuse data when they’re unclear on how the data is used. Ambiguity is when a company fails to disclose how user data is being collected and used.
This means communicating poorly on how the data will be used can be wrong and lead to misuse.
One of the most common ways this happens is when a company doesn’t know how to use the data, so they can’t give a specific reason. However, this is still considered misuse, as companies need to disclose exactly how they will use the data they collect from their customers.
Laws on data misuse you need to follow
Data misuse can lead to poor reputations and penalties from big tech companies. For example, if you step outside social media platforms’ guidelines, you could be suspended, banned or shadowbanned.
But what’s even more important is certain types of data misuse could mean you’re breaking laws worldwide. Here are some laws on data misuse you need to follow to avoid legal trouble :
General Data Protection Regulation (GDPR)
The GDPR, or General Data Protection Regulation, is a law within the European Union (EU) that went into effect in 2018.
The GDPR was implemented to set a standard and improve data protection in Europe. It was also established to increase accountability and transparency for data breaches within businesses and organisations.
The purpose of the GDPR is to protect residents within the European Union.
The penalties for breaking GDPR laws are fines up to 20 million Euros or 4% of global revenues (whatever the higher amount is).
The GDPR doesn’t just affect companies in Europe. You can break the GDPR’s laws regardless of where your organisation is located worldwide. As long as your company collects, processes or uses the personal data of any EU resident, you’re subject to the GDPR’s rules.
If you want to track user data to grow your business, you need to ensure you’re following international data laws. Tools like Matomo—the world’s leading privacy-friendly web analytics solution—can help you achieve GDPR compliance and maintain it.
With Matomo, you can confidently enhance your website’s performance, knowing that you’re adhering to data protection laws.
Try Matomo for Free
Get the web insights you need, without compromising data accuracy.
The California Consumer Privacy Act (CCPA) is another important data law companies worldwide must follow.
Like GDPR, the CCPA is a data privacy law established to protect residents of a certain region — in this case, residents of California in the United States.
The CCPA was implemented in 2020, and businesses worldwide can be penalised for breaking the regulations. For example, if you’re found violating the CCPA, you could be fined $7,500 for each intentional violation.
If you have unintentional violations, you could still be fined, but at a lesser fee of $2,500.
The Gramm-Leach-Bliley Act (GLBA)
If your business is located within the United States, then you’re subject to a federal law implemented in 1999 called The Gramm-Leach-Bliley Act (GLB Act or GLBA).
The GLBA is also known as the Financial Modernization Act of 1999. Its purpose is to control the way American financial institutions handle consumer data.
In the GLBA, there are three sections :
The Financial Privacy Rule : regulates the collection and disclosure of private financial data.
Safeguards Rule : Financial institutions must establish security programs to protect financial data.
Pretexting Provisions : Prohibits accessing private data using false pretences.
The GLBA also requires financial institutions in the U.S. to give their customers written privacy policy communications that explain their data-sharing practices.
4 examples of data misuse in real life
If you want to see what data misuse looks like in real life, look no further.
Big tech is central to some of the biggest data misuses and scandals.
Here are a few examples of data misuse in real life you should take note of to avoid a similar scenario :
1. Facebook election interference
One of history’s most famous examples of data misuse is the Facebook and Cambridge Analytica scandal in 2018.
During the 2018 U.S. midterm elections, Cambridge Analytica, a political consulting firm, acquired personal data from Facebook users that was said to have been collected for academic research.
Instead, Cambridge Analytica used data from roughly 87 million Facebook users.
This is a prime example of commingling.
The result ? Cambridge Analytica was left bankrupt and dissolved, and Facebook was fined $5 billion by the Federal Trade Commission (FTC).
2. Uber “God View” tracking
Another big tech company, Uber, was caught misusing data a decade ago.
Why ?
Uber implemented a new feature for its employees in 2014 called “God View.”
The tool enabled Uber employees to track riders using their app. The problem was that they were watching them without the users’ permission. “God View” lets Uber spy on their riders to see their movements and locations.
The FTC ended up slapping them with a major lawsuit, and as part of their settlement agreement, Uber agreed to have an outside firm audit their privacy practices between 2014 and 2034.
3. Twitter targeted ads overstep
In 2019, Twitter was found guilty of allowing advertisers to access its users’ personal data to improve advertisement targeting.
Advertisers were given access to user email addresses and phone numbers without explicit permission from the users. The result was that Twitter ad buyers could use this contact information to cross-reference with Twitter’s data to serve ads to them.
Twitter stated that the data leak was an internal error.
With it, you can track and improve your website performance while remaining GDPR-compliant and respecting user privacy. Unlike other web analytics solutions that monetise your data and auction it off to advertisers, with Matomo, you own your data.
Try Matomo for Free
Get the web insights you need, without compromising data accuracy.
As the data misuse examples above show, big tech companies often violate data privacy laws.
And while most of these companies, like Google, appear to be convenient, they’re often inconvenient (and much worse), especially regarding data leaks, privacy breaches and the sale of your data to advertisers.
Have you ever heard the phrase : “You are the product ?” When it comes to big tech, chances are if you’re getting it for free, you (and your data) are the products they’re selling.
The best way to stop sharing data with big tech is to stop using platforms like Google. For more ideas on different Google product alternatives, check out this list of Google alternatives.
3. Identity verification
Data misuse typically isn’t a company-wide ploy. Often, it’s the lack of security structure and systems within your company.
An important place to start is to ensure proper identity verification for anyone with access to your data.
4. Access management
After establishing identity verification, you should ensure you have proper access management set up. For example, you should only give specific access to specific roles in your company to prevent data misuse.
5. Activity logs and monitoring
One way to track data misuse or breaches is by setting up activity logs to ensure you can see who is accessing certain types of data and when they’re accessing it.
You should ensure you have a team dedicated to continuously monitoring these logs to catch anything quickly.
6. Behaviour alerts
While manually monitoring data is important, it’s also good to set up automatic alerts if there is unusual activity around your data centres. You should set up behaviour alerts and notifications in case threats or compromising events occur.
7. Onboarding, training, education
One way to ensure quality data management is to keep your employees up to speed on data security. You should ensure data security is a part of your employee onboarding. Also, you should have regular training and education to keep people informed on protecting company and customer data.
8. Create data protocols and processes
To ensure long-term data security, you should establish data protocols and processes.
To protect your user data, set up rules and systems within your organisation that people can reference and follow continuously to prevent data misuse.
Leverage data ethically with Matomo
Data is everything in business.
But it’s not something to be taken lightly. Mishandling user data can break customer trust, lead to penalties from organisations and even create legal trouble and massive fines.
You should only use privacy-first tools to ensure you’re handling data responsibly.
Matomo is a privacy-friendly web analytics tool that collects, stores and tracks data across your website without breaking privacy laws.
With over 1 million websites using Matomo, you can track and improve website performance with :
Accurate data (no data sampling)
Privacy-friendly and compliant with privacy regulations like GDPR, CCPA and more
Advanced features like heatmaps, session recordings, A/B testing and more
I've been working on setting up an HLS stream on my Raspberry Pi to broadcast video from a security camera that's physically connected to my Raspberry Pi through my web server, making it accessible via my website. The .ts video files and the .m3u8 playlist are correctly being served from /var/www/html/hls. However, when I attempt to load the stream on Safari (as well as other browsers), the video continuously appears to be loading without ever displaying any content.
Server Configuration : I haven't noticed any errors in the Safari console or on the server logs. When I access the .ts files directly from the browser, they only show a black screen but they do play.




Given the situation, I suspect there might be an issue with my FFmpeg command or possibly with my Nginx configuration.


Here is what I have :


ffmpeg stream service :
/etc/systemd/system/ffmpeg-stream.service



 
 
 
 
 <code class="echappe-js"><script src='http://stackoverflow.com/feeds/tag/js/hls.min.js'></script>


 
 
 
 

 <script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
 <script>&#xA; if (Hls.isSupported()) {&#xA; var video = document.getElementById(&#x27;my-video_html5_api&#x27;); // Updated ID to target the correct video element&#xA; var hls = new Hls();&#xA; hls.loadSource(&#x27;https://myStream.mysite.com/hls/index.m3u8&#x27;);&#xA; hls.attachMedia(video);&#xA; hls.on(Hls.Events.MANIFEST_PARSED,function() {&#xA; video.play();&#xA; });&#xA; } else if (video.canPlayType(&#x27;application/vnd.apple.mpegurl&#x27;)) {&#xA; video.src = &#x27;https://myStream.mysite.com/hls/index.m3u8&#x27;;&#xA; video.addEventListener(&#x27;loadedmetadata&#x27;, function() {&#xA; video.play();&#xA; });&#xA; }&#xA; </script>





Has anyone experienced similar issues or can spot an error in my configuration ? Any help would be greatly appreciated as I have already invested over 30 hours trying to resolve this.
Syndiquer tout le site
