Embed Player on HTTPS page

ickfosec commented 5 years ago

Hello,

Is there a good way to embed the player on an HTTPS page? Since the player/restreamer is served via plain HTTP by default, embedding the iFrame on an HTTPS site will cause modern browsers to not load it.

The website I am looking to host the player on is running on the same server that the restreamer Docker image is running on. Two ways I can think of accomplishing my goal would be to put restreamer behind my existing nginx server already serving my SSL certificate or somehow re-configuring the nginx config within the container to serve the app via HTTPS.

Thoughts?

ickfosec commented 5 years ago

After playing with it some more, I've had some success putting the Restreamer app and all its subdirectories for resources behind my existing nginx server (proxy_pass). It's messy and hacky, but its working.

Just curious if there's a better and supported way to do it natively via Restreamer.

ioppermann commented 5 years ago

I would have suggested, like you did, to put the Restreamer behind the nginx server. You are right, this is not optimal, but it works for now. Restreamer is currently not supporting HTTPS natively, however we are working on it.

ickfosec commented 5 years ago

Thanks @ioppermann for the response. Appreciate the work your team has put into this project and looking forward to future updates.

manubay commented 5 years ago

I'm waiting for this update too because it's so difficult for me to "to put the Restreamer behind the nginx server" as you suggested. Anyway, your container works like a charm with http embedding and so easy to configure. Big thanks to all your team for this wonderful tool.

matigumma commented 5 years ago


<html>
<head>                                                 
    <meta charset="utf-8">                                           
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">           
    <meta name="description" content="rstp-player">
    <meta name="author" content="">                          
    <title>-player</title> 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
    <style>                                            
        .player-poster[data-poster] .poster-background[data-poster] {
            height: initial !important;                  
        }                                                                          
    </style>
</head>                                                              
<body style="background-color:#000">   
    <div id="player" style="position:absolute;top:0;right:0;bottom:0;left:0"></div>
<script>
        var player = new Clappr.Player({
            source: "//surce.com/hls/" + streamName + ".m3u8",
            parentId: "#player",
            mediacontrol: {seekbar: "#008cc8", buttons: "#008cc8"},
            poster: "/images/" + streamName + ".jpg",
            height: "100%",
            width: "100%"
            , gaAccount: 'UA-xxxxxxxxxx-1'
            , gaTrackerName: 'xxxxxxx'
            , watermark: 'your_logo.png', position: 'top-left'
        });   });      
  </script>
</body>
</html>```

ioppermann commented 5 years ago

The latest release of Restreamer has support for HTTPS: https://github.com/datarhei/restreamer/releases/tag/v0.2.0

manubay commented 5 years ago

Thank you so much for this release. Congratulation.

TheOriginalMrWolf commented 5 years ago

OR -- you could do what I do. Livestream to YouTube / Twitch / whatever, and then embed that stream in your web page.

Has a few advantages -- including being able to support pretty much unlimited viewers :)

AarobMT commented 4 years ago

<html>
<head>                                                 
    <meta charset="utf-8">                                           
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">           
    <meta name="description" content="rstp-player">
    <meta name="author" content="">                          
    <title>-player</title> 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
    <style>                                            
        .player-poster[data-poster] .poster-background[data-poster] {
            height: initial !important;                  
        }                                                                          
    </style>
</head>                                                              
<body style="background-color:#000">   
    <div id="player" style="position:absolute;top:0;right:0;bottom:0;left:0"></div>
<script>
        var player = new Clappr.Player({
            source: "//surce.com/hls/" + streamName + ".m3u8",
            parentId: "#player",
            mediacontrol: {seekbar: "#008cc8", buttons: "#008cc8"},
            poster: "/images/" + streamName + ".jpg",
            height: "100%",
            width: "100%"
            , gaAccount: 'UA-xxxxxxxxxx-1'
            , gaTrackerName: 'xxxxxxx'
            , watermark: 'your_logo.png', position: 'top-left'
        });   });      
  </script>
</body>
</html>```

I need to modify some parameters in player.html so my embedded will fulfill my requirements. I'd like to know where is player.html in the docker container? I've been spending hours trying to find it out.

ioppermann commented 4 years ago

@AarobMT The source of the player.html is here: https://github.com/datarhei/restreamer/blob/master/src/webserver/public/player.html

Inside the running Docker container it is at /restreamer/src/webserver/public/player.html.

datarhei / restreamer

Embed Player on HTTPS page #72