How to embed m3u8 from ffmpeg Raspberry in Network Webserver - apache

I have a Raspberry-Pi converting an RTSP-Stream to HLS-Segments via ffmpeg.
Now when I try to embed the Stream,
I use this:
<head>
<!-- CSS -->
<link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
</head>
<video id='hls-example' class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://192.168.2.45/files/hls/live.m3u8">
</video>
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
Working like a charm on the local raspberrypi apache2 Server.
Now the problem is, I cannot display this stream with the identical code on a seperate device.
What am I doing wrong?
Is there a Firewallport I need to open?
I dont think so?
I can access the files when opening: http://192.168.2.45/files/hls/ on the seperate device.

The issue was Server-To-Server communication restriction. You need to enable this setting in the Apache Server file.
This setting is called CORS.

Related

Not able to play aac audio files on IE11

I have a page with this html :
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/aac" />
</audio>
It works on Firefox and Edge but it doesn't on IE11. My windows version is up to date and I saw it should be supported. I tried to change my settings to be sure ActiveX is enabled and it is.
I also tried with :
<audio controls="controls" src="http://techslides.com/demos/samples/sample.aac">
It doesn't works too.
What can I do?
I tested the sample code with IE 11 browser and I am able to produce the issue.
I try to check the documentation and found this information.
Beginning with Windows Internet Explorer 9, any audio or video content
needs the correct mime type set on the server, or the files won't
play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video.
WebM audio and video files can be supported by installing the WebM
components from The WebM project. The following table shows the
required settings for your web server to host these files correctly.
Microsoft Edge updates introduced WAV support.
Reference:
audio element | audio object
you can see that .AAC format is not in the list but sites like MDN and CANIUSE shows that it is supported.
I also tried with audio type mp4 which also did not worked.
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mp4" />
</audio>
It also can be possible that it is some kind of bug with IE browser or issue is related with H.264 format.
As a work around, I suggest you to use mp3 file format which is working fine with IE 11.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<audio controls="controls">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg3" />
</audio>
</body>
</html>

How to play rtmp live stream using videojs?

I'm using OBS to push live stream to my local rtmp server(node-rtsp-rtmp-server),
and it works well with VLC media player.
I just want to put it into a webpage and i found videojs.
It didnt work and returns Specified “type”-attribute “rtmp/mp4” is not supported.
it seems my rtmp server didnt reveive any requests from this webpage.
So what i missed?
here is my code:
<head>
<meta charset="utf-8">
<link href="./video-js-6.0.0/video-js.css" rel="stylesheet">
<script src="./video-js-6.0.0/video.js"></script>
<script src="./video-js-6.0.0/videojs-flash.min.js"></script>
<script>
videojs.options.flash.swf = "./video-js-6.0.0/video-js.swf"
</script>
</head>
<body>
<video id='vid' class='video-js' controls height=300 width=600>
<source src="rtmp://127.0.0.1:1935/live/pokemon" type="rtmp/mp4"/>
</video>
<script>
var player = videojs('vid');
</script>
</body>
To publish a stream from a RTMP server to a web page, you have 2 options:
embed RTMP stream in a Flash player (Strobe, JwPlayer, FlowPlayer)
deliver stream in a HTML5 format (HLS or MPEG DASH) using a streaming server that supports that like Wowza Streaming Engine; this may also require transcoding if your stream is not already encoded with H264 and AAC
<html>
<head>
<title> Stream Player </title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>videojs.options.flash.swf = "video-js.swf";</script>
</head>
<body>
<center>
<video
id="livestream"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
preload="auto"
data-setup='{"techorder" : ["flash","html5] }'>
<source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
</video>
</center>
</body>
</html>
The data-setup techorder parameter seems to be necessary for videojs to use flash.
If that doesn't work then make sure that your javascript files are all good. As of version 6 of video.js it no longer supports flash by default. https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs
I am using nginx for my server.
https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/
https://github.com/arut/nginx-rtmp-module
If you would rather use a CDN for the video.js and video-js.css files replace the head with
<!--The latest versions of video.js no longer support flash or rtmp-->
<link href="https://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.19/video.js"></script>
Note: Your time is better spent learning HLS or DASH rather than flash
Browsers don't support RTMP. The only way to connect to RTMP streams in-browser is to use Flash.
Consider using a more compatible distribution protocol, such as DASH, which is supported with Media Source Extensions.
If it works when using vlc media player, it means your rtmp server is ok.
You have to check whether the browser support flash or not. Since we realized that latest versions of chrome and Firefox automatically block flash by default. We were able to fix the issue by simply allowing flash on website. There was nothing wrong with video.js and videojs-flash. Plz refer to the attached screenshot.

videojs in WeChat doesn't work for rtmp

I want to play rtmp in WeChat and it can play on my PC browser, but in WeChat browser on Android, it returns:
"No compatible source was found for this video"
But on iPhone it just shows an infinite loading screen.
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://www.pageresource.com/wallpapers/wallpaper/bleach-ichigo-mugetsu-here-size-original_215405.jpg"
data-setup="{}">
<source src="rtmp://hsn.mpl.miisolutions.net/hsn-live01/mp4:420p500kB31" type='rtmp/mp4'>
<!--source src="rtmp://219.232.161.204/livestream/mtzysunq" type='rtmp/mp4' / -->
<!--<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>--><!-- Tracks need an ending tag thanks to IE9 -->
<!--<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>--><!-- Tracks need an ending tag thanks to IE9 -->
</video>
No browser supports rtmp without flash. videojs uses a flash fallback for rtmp (video-js.swf). Mobile devices do not support flash, hence no flash fall back, hence no video. You need to use a format other than rtmp. Like mp4, hls or dash.

embed AWS S3 video using video.js in html site

I am in new territory for me here. I am trying to embed AWS S3 hosted video into a html website authored with Netobjects Fusion.
I tried putting in the code from the getting started page and successfully got my website to play the video.js promo video, however, when I try to alter that to play my videos I get an invalid file path error. Below is the altered code. Can anyone direct me as to what I am missing or messing up? Do I need to define the video id somewhere else? Also, I am not sure what to do with the data-setup='{"example_option":true}'> line. Thanks.
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="6915MLD" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="https://s3-us-west-2.amazonaws.com/premiervideotours/PVTx320.jpg"
data-setup='{"example_option":true}'>
<source src="https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.mpg" type='video/mp4' />
<source src="https://https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.webm" type='video/webm' />
</video>
Even after correcting your URLs to the below, I get access denied when visiting them in a browser.
https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.mp4 (mpg to mp4)
https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.webm (removed duplicate https://)
S3 will respond with access denied not only when the permissions of the file don't allow access, but also when the file is not found. So check both whether the files are in the location the URLs point to, and whether they are 'public'.
Re data-setup='{"example_option":true} - there are a couple of options to set up video.js after including the script and css. One is to include a data-setup attribute. The value of the attribute is a json string which can include setup options or be empty, e.g. data-setup='{}. The "example_option" is just that, an example of how it would look if you need to pass setup options.

Cannot load custom dojo module

I'm trying to follow the custom module tutorial at http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/modules-and-namespaces/creating-your-own-modul
I've got a local deployment of dojo at http://localhost:8081/dojo-1.3.2/dojo/dojo.js
For my custom module I've created the following javascript file at http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js:
dojo.provide("explosive.space.Modulator");
dojo.declare("explosive.space.Modulator",null,{
bob:1
});
In my html page I have the following:
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
</script>
And when I pull up my site in firefox I get the error:
Error: Could not load
'explosive.space.Modulator'; last
tried
'../explosive/space/Modulator.js'
Any ideas on what I'm doing wrong?
EDIT: After more testing it appears the code works on IE8 and IE8 compatibility mode but not in Firefox, Chrome, or Opera.
EDIT2: My html file was on a different domain but I didn't think that should make any difference. After reading Seth's comment (thanks Seth!) I tried it both ways.
I have two tomcat instances, one on port 8080 and one on port 8081. I've placed index.htm in both instances and started them both up.
http://localhost:8081/test/index.htm works in both FF and IE. http://localhost:8080/test/index.htm does not work as expected in FF, but does work in IE.
Show XmlHTTPRequests shows that FF is making a call to "GET http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js" which is coming back with an empty response for some reason.
Here's the entirety of my code for index.htm if it's any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Create Map</title>
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
function init(){
var eludiumFuel36 = new explosive.space.Modulator();
alert(eludiumFuel36.bob);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<h1>Hello World!</h1>
</body>
</html>
It looks ok from what you have here. When you bring up the page, are you going to http://localhost:8081/testpage.html (or somesuch)? Or are you going to a different domain?
Do you have firebug installed? If not, install it and turn on 'Show XMLHttpRequests'. That will show what URL it's trying to access in the console (and any other possibly relevant errors).
Otherwise, there might be something else on the page outside of what you posted messing with dojo's load path.
Edit
When dojo does an dojo.require, it does a XHR call for the file. The includes the host and port in it. So, it's violating cross domain security when the html page is on localhost:8081 but the javascript is on localhost:8080. You can get around this by using a cross-domain build version of the file (or make sure all requests come on the same port and host). Truth be told, I'm not quite sure why IE works with the different ports though.