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.
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.
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.
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.
Download Open Broadcaster Software (or any other video streaming software that handles RTMP) and configure it to point at your streaming server.
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.
We use the minimum configuration for Video.js. Feel free to make the player as fancy as you like.
Place that HTML file in your nginx “html” directory (will probably be /usr/local/nginx/html)
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!
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?
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!
That’s correct. We use .loc for our internal DNS (for better or for worse).
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).
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.
`
`
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
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.
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>
