I was setting up Raspberry Pi 4 to stream video to connected device. So, I used picamera2 for capturing and streaming the video on network. Internally Picamera2 uses ffmpeg to form m3u8 files for hls streaming. Along with picamera2, I used http.server to host static hls files.
I tested out the hls streaming using the following html code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your title</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script
src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls
preload="auto"
data-setup='{}'>
<source src="http://192.168.1.8:8000/live/stream.m3u8"
type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html>
It ran fine. Started streaming video onto other devices.
But I am not able to do the same using react frontend. I am using ReactPlayer in the following code. Tested out with online hls streaming link, it worked out well. But it is not streaming the following RPI stream on the browser. I have also checked out video.js, react-has-player and ReactPlayer worked best on online hls stream and multiple browser.
import * as React from 'react';
import { useContext } from "react";
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import Avatar from '@mui/material/Avatar';
import { red } from '@mui/material/colors';
import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack';
import ReactPlayer from 'react-player/lazy'
import { Typography } from '@mui/material';
// import { UserContext } from "./context/UserContext";
export default function VideoCard({ alerter }) {
var url = "http://192.168.1.8:8000/live/stream.m3u8"
return (
<Card sx={{ height: '820px' }} variant="outlined">
<CardHeader
avatar={
<Avatar sx={{ bgcolor: red[500] }} >
<VideoCameraBackIcon />
</Avatar>
}
title={<Typography component="div" variant="h6">
Video Stream
</Typography>}
subheader="from Camera"
/>
<CardContent>
<div >
<ReactPlayer
playing
url={url}
controls={true}
width="100%"
height="100%" />
</div>
</CardContent>
</Card>
);
}
In this react ui, it keeps on loading and then Please suggest the solution to make react code work!
I have tried multiple libraries related to hls in react and now asking for help. I think I may be doing silly mistake and that's what I am expecting as a solution to this problem.
