CODEWITHSUNDEEP
javascriptraspberry-pihtml5-videovlcvideo.js
nicholfd
nicholfd

Reputation: 41

Raspberry Pi, raspivid -> VLC -> video.js parameters to view Pi video in browser

I have a Raspberry Pi & it's camera running with the following command:

/opt/vc/bin/raspivid -t 0 -w 1920 -h 1080 -fps 25 -b 2000000 --exposure auto -awb auto -hf -vf -n -o - | /usr/bin/cvlc -I dummy --live-caching=500 'stream:///dev/stdin' --sout '#standard{access=http,mux=ts,dst=:8080}' :demux=h264 --sout-keep

I can view this with VLC by opening a network stream: http://gr_rpi:8080. The video plays fine. VLC codec details indicates the following:

Stream 0 Type Video Original ID 68 Codec H264 - MPEG-4 AVC (part 10) (h264) Resolution 1920 x 1080 Decoded format Planar 4:2:0 YUV

I would like to have this viewable in a browser using video.js. I'm using nginx as the web server. Nginx is working Ok. Here is my HTML code (index.html):

<html>
<head>
<link href="http://martin/node_modules/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>

<video id=Game_Room width=960 height=540 class="video-js vjs-default-skin" controls preload="none" data-setup="{}">
    <source src="http://gr_rpi:8080" type="video/mp4">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<script src="http://martin/node_modules/video.js/dist/alt/video.novtt.js"></script>
<script>
    var player = videojs('example-video');
    player.play();
</script>

</body>
</html>

I open "http://martin" in my browser (Safari on OS X). Video.js is working - it shows the player window with the play button. When I click the play button, it attempts to buffer/play and then says, "The media could not be loaded, either because the server or network failed or because the format is not supported."

I have tried the following MIME types in video.js, with the same failed playback:

<source src="http://gr_rpi:8080" type='video/mp4'> <source src="http://gr_rpi:8080" type='application/x-mpegurl'> <source src="http://gr_rpi:8080" type='video/h264'> <source src="http://gr_rpi:8080" type='video/mpeg4-generec'>

From the video.js source code, it appears it supports the following MIME types:

application/x-mpegurl

application/vnd.apple.mpegurl

video/mp4

// HTML5 Feature detection...
var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
var mp4RE = /^video\/mp4/i;

I've looked at the reference documentation for for VLC (https://wiki.videolan.org/VLC_command-line_help/), and nothing jumps out at me.

I'm looking for suggestions for either the MIME type I should be telling video.js, and/or the parameters I should change in VLC or video.js, to make video.js happy.

Thanks in advance!

Upvotes: 4

Views: 1477

Answers (1)

user6357357
user6357357

Reputation: 1

I think you are doing exactly what I'm trying to do.

I found this

The type needs to be type="rtmp/mp4"

here: VideoJs with live stream

Upvotes: 0

Related Questions