Streaming live video to Xibo .NET client


#1

Caveats/Warnings
The method I’m using currently hasn’t been tested at scale, so I can’t speak to how things will behave for you. As with many things like this, your mileage may vary. FWIW, our setup powers four displays so far with more to be installed soon. I’d be happy to address any major discrepancies, though, so let me know if you see something.

Overview

We’ve recently begun using Xibo at Zenoss to promote employee achievements & announcements on a series of screens throughout our corporate headquarters. The powers that be requested the ability to stream live video from a news network to some of the displays. Using a combination of Nginx, Open Broadcast Software, and Video.js, we’re now able to stream said video content to each of our displays.

Note: I have the Nginx streaming server running on the same box as Xibo CMS. If your streaming load is significant, might want to use a separate box for streaming.

Setup

Systems/hardware needed:

  • Streaming source capable of running Open Broadcaster Software
  • We have a small computer connected to our video source)
  • Streaming server
  • We use a virtual machine that runs Ubuntu Server 14.04 LTS, Nginx from source, and Video.js)
  • We run our Xibo CMS on this same server using Nginx & PHP-FPM. I won’t go into this configuration in this guide, but I just wanted to let you know it was a possiblity.
  1. Install nginx & nginx-rtmp from source (https://github.com/arut/nginx-rtmp-module).
  2. Configure nginx-rtmp according to instructions at above link. You should be able to now stream to this server using the information you configure in the afforementioned instructions.
  3. Figure out a way to stream your cable box to a computer. I’ll leave this up to you to determine what works best for your setup. We ended up getting a StarTech.com USB3 video capture device & used RCA outputs to capture the video. HDMI (and other digital connections) would fail due to the cable box’s DRM.
  4. Download Open Broadcaster Software (or any other video streaming software that handles RTMP) and configure it to point at your streaming server.
  5. Create a video source in OBS based on your cable box’s feed. If everything is set up correctly, you should now be able to click the “Start Streaming” button.
  6. Create an HTML file that will run a Video.js player. Have it use your RTMP stream as the source. https://github.com/videojs/video.js/blob/stable/docs/guides/tech.md
  • We use the minimum configuration for Video.js. Feel free to make the player as fancy as you like.
  1. Place that HTML file in your nginx “html” directory (will probably be /usr/local/nginx/html)
  2. In your Xibo layout, embed an HTML widget in the content region & use an iframe to embed your video page

Assuming all the moving parts are in place, this should put a video feed in your Xibo layout. You may need to tinker with the HTML page to ensure it runs in IE or Chrome, depending on how your Xibo CMS is configured).

Let me know if you have any questions, comments, or concerns!


Live stream from TV to an Windows Xibo Client
Video streaming through rtsp
RTSP IPTV to Layout Region - Windows Client Not Woking
Xibo Android Client unable to display more rtsp streams at the same time
How can i import Moi streams into Xibo?
IP camera video stream display
IP camera stream xibo player
RTSP Feed (Live TV) Windows Player won't display
#2

First of all, great post, saved me a lot of time and effort trying to identify and then put together all of these pieces!

Now the question - I’ve done all of this and am able to stream video from OBS to a video.js web client that’s pulled from a local/on-site webserver, great! But, when I put the embed code into Xibo and try to display it on clients I get the player window on the Xibo display but with the message “Error: Unsupported video type or invalid file path”. All of the posts I can find online talk about IE10/11 (IE on my Xibo client is v11) needing to have video/mp4 included in .htaccess but NGINX has this in mimetypes already and this isn’t really video/mp4 anyways, I believe it’s rtmp/mp4 so I don’t think those solutions are relevant to Xibo and the problem I’m having. Can you share some details about your embed code and what specifically you’re putting into the layout’s design?


#3

Disregard, my iframe wasn’t set up appropriately. Fixed that and it’s working across 34 screens in 3 different sites. Great solution, thanks for sharing!


#4

Glad to hear you got the iframe issue debugged. I’ll pull up the HTML I use for our video player and post a gist link later.


#5

Can I see your HTML that uses Video.js?

My configuration:

  • AVerMedia C985 capture Card installed on a Windows OS Box
  • VirtualBox running Ubuntu server 16.04
  • Nginx Installed on Ubuntu Server with RTMP module

I am able to view the stream in VLC using the following network URL “rtmp://10.10.2.1/live/streamkey”

I am struggling to understand how to write mine HTML file. In the link you gave…

https://github.com/videojs/video.js/blob/stable/docs/guides/tech.md

it says that you need to add a source that points to your RTMP stream as shown below

`

`

I selected the first source suggestion.

<source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">

and changed it to the following based on this link

<source src="rtmp://10.10.2.1/flv:live/streamkey" type="rtmp/flv">

I have yet to be able to view the steam in a browser.

Below is my html

`

to view this video please enable Javascript, and consider upgrading to a web browser that supports HTML5 video

`

#6

Can I see your HTML that uses Video.js?

Certainly. See below. I’ve edited a couple of server hostnames for “privacy” reasons, but you should be able to figure things out.

It’s pretty barebones, but has worked for our needs (e.g. it works in IE, and thus on the Xibo .NET client). Let me know if you have any questions.

EDIT: After looking back at your snippet, it looks like the main difference is that my source is of type video/ogg instead of rtmp/flv.

<!DOCTYPE html>
<html>
<head>
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
</head>
<body>
<script type="text/javascript">
document.createElement('video');document.createElement('audio');document.createElement('track');
</script>

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="1024" height="576"
data-setup='{"autoplay":true, "controls": true}'>

<source src="rtmp://xibo.myserver.loc/live/streamkey" type='video/ogg' />
<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>


</body>
</html>

#7

When you say “xibo.server.log” is that the IP address of your server?


#8

That’s correct. We use .loc for our internal DNS (for better or for worse). :slight_smile:

EDIT: To clarify, it’s the address of your streaming server and not necessarily the Xibo server (though the two may be one in the same depending on how you set things up).


#9

I don’t understand, why would you need .loc for an ip address?


#10

I now am able to play the stream in Internet Explorer (Version 11.0.10240.16431) using the following code. It will not play in Chrome or Firefox.

`

Video Not Working

`

If anyone is struggling with setting something like this up I can help. I have spent the last three weeks trying to get the setup to work and have succeeded thanks to jbirdkerr


#11

Glad things are working now. I used the hostname on my setup as a personal choice. Given how we cycle IP addresses on some VM’s at my company, I figured it more prudent to use the hostname. As you noted, the IP works just as well.

I’m also certainly glad to help where I can. Advanced apologies if my responses are a bit sporadic, though.


#12

This is a great howto! I am for sure going to try this in the future! Thanks!


#13

use the usb capture device video, use this script for capture usb video device and play in embemed ( script flahs capture web cam or outer device video )

<!doctype html>

WebcamJS Test Page - Large Capture body { font-family: Helvetica, sans-serif; background-color: #062036; } h2, h3 { margin-top:0; } form { margin-top: 15px; } form > input { margin-right: 15px; } #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
<div id="my_camera"></div>

<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="../webcam.js"></script>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
	Webcam.set({
		width: 539,
		height: 365,
		dest_width: 640,
		dest_height: 480,
		image_format: 'jpeg',
		jpeg_quality: 90
	});
	Webcam.attach( '#my_camera' );
</script>

#14

hello bro you can help me for the striming video ,?


#15

Unfortunately since this post something changed, probably a HTML update, which has prevented my setup from working.