streamium/app/provider/create.html

Decentralized trustless video streaming using bitcoin payment channels.

<div style="background: url(/assets/img/background-images/1.jpg) no-repeat center top fixed;" class="text-center">
  <!-- =========================
  SECTION: HOME / HEADER
  ============================== -->
  <header>
    <div class="overlay-layer content-pg">
      <!-- STICKY NAVIGATION -->
      <div class="navbar navbar-inverse bs-docs-nav navbar-fixed-top sticky-navigation appear-on-scroll" role="navigation">
          <div class="container">
              <div class="navbar-header">

                  <!-- LOGO ON STICKY NAV BAR -->
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#stamp-navigation">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-grid-2x2"></span>
                  </button>

                  <!-- LOGO -->
                  <a class="navbar-brand" href="/">
                      <img src="/assets/img/logo-nav.png" alt="">
                  </a>
              </div>

          </div>
          <!-- /END CONTAINER -->

        <div class="row">
          <div class="bg-warning" ng-show="requiresApproval">
            Please allow Streamium to use the camera.
          </div>
          <div class="col-md-12">
            
          </div>
        </div>
      </div>
      <!-- /END STICKY NAVIGATION -->
      <!-- CONTAINER -->
      <div class="container">

        <!-- ONLY LOGO ON HEADER -->
        <div class="only-logo">
            <div class="navbar">
                <div class="navbar-header">
                    <img src="/assets/img/logo-2.png" alt="">
                </div>
            </div>
        </div>

        <div class="row">
          <div class="col-md-12">

            <!-- HEADING AND BUTTONS -->
            <div class="intro-section">

              <!-- WELCOME MESSAGE -->
              <h1 class="intro white-text">Stream Live Video And Get Paid</h1>
              <h5 class="white-text">Set how much you want to charge your viewers, start broadcasting and earn bitcoins on a per-second basis.</h5>

              <div class="row" ng-show="nowebrtc">
                <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">
                  <div class="nowebrtc-frontpage">
                    <div class="text-center">
                          <p>
                            You are using a web browser we don't support.
                            </p><p>Mind trying again using <a href="https://www.google.com/chrome/">Chrome</a> or
                            <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>?
                          </p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- CREATE CHANNEL FORM -->
              <div class="row" ng-hide="nowebrtc">
                <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">
                  <div class="horizontal-subscribe-form">

                      <form name="form" ng-submit="submit()" class="form-horizontal" role="form" no-validate>
                        <div class="bg-danger">{{ stream.error }}</div>

                        <div class="form-group has-feedback">
                          <div class="input-group">
                            <div class="input-group-addon" style="padding-right: 38px;">Stream name</div>
                            <input  id="streamname"
                              class="form-control"
                              name="name" required
                              ng-model="stream.name"
                              placeholder="What's happening?"
                              ng-change="normalizeName()">
                            <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.name.$valid"></span>
                          </div>
                        </div>

                        <div class="form-group" ng-show="castType === 'static'">
                          <div class="input-group">
                            <div class="input-group-addon" style="padding-right: 38px;">File to Broadcast</div>
                            <input  id="file"
                              type="file"
                              class="form-control"
                              name="filename"
                              ng-model="filename"
                            >
                            <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.filename.$valid"></span>
                          </div>
                        </div>

                        <div id="createstream">
                          <div class="form-group has-feedback">
                            <div class="input-group">
                              <div class="input-group-addon">Cashout address</div>
                              <input
                                class="form-control"
                                name="address" required
                                data-toggle="tooltip"
                                data-placement="right"
                                data-trigger="focus hover"
                                data-delay='{ "hide": 3000 }'
                                data-html="true"
                                title="Need help getting your own bitcoin address?
                                <a target='_blank' href='../tutorial-address'>Check this out.</a>"
                                ng-model="stream.address" valid-address
                                placeholder="Bitcoin address to receive your earnings" style="padding-right:20px">
                              <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.address.$valid"></span>
                              <span class="glyphicon glyphicon-question-sign form-control-feedback"
                                ng-show="!form.address.$valid"></span>
                            </div>
                          </div>

                          <div id="createstream">
                            <div class="form-group has-feedback col-lg-9 col-xs-12" style="margin-left: -30px;">
                              <div class="input-group">
                                <div class="input-group-addon" style="padding-right: 63px;">Price rate</div>
                                <input
                                  name="rate" required
                                  ng-model="stream.rate"
                                  class="form-control"></input>
                                  <div class="input-group-addon">USD/hour</div>
                              </div>
                            </div>
                            <div class="col-lg-4 col-xs-12" style="color: gray; font-size:14px">
                              {{ usdHourToBtcSec(stream.rate) }} BTC/sec
                            </div>
                          </div>

                        </div>
                        <div style="clear: both;"></div>
                        <div class="form-group">
                            <button
                              type="submit"
                              class="btn btn-primary standard-button"
                              ng-disabled="form.$invalid || stream.loading">{{stream.loading ? 'Loading' : 'Start broadcasting'}}</button>
                        </div>

                        <script>
                            $(document).ready(function(){
                                $("#streamname").focusin(function() {
                                    $("#createstream").show();
                                });
                            });
                        </script>

                      </form>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- =========================
  SECTION: Container
  ============================== -->

    <!-- =========================
     SECTION: CLIENTS LOGOs
    ============================== -->
    <div class="clients white-bg">
        <ul class="client-logos" style="padding-top:17px;">
            <li>
                <a href="http://techcrunch.com/2015/05/23/the-bitcoin-blocksize-blackjack-mining-blues/"><img src="/assets/img/companies/techcrunch.png"></a>
            </li>
            <li>
                <img src="/assets/img/companies/1.png" alt="" style="margin-bottom:20px">
                <h2 style="display:inline"><a href="https://medium.com/@demibre/a-decentralized-pay-as-you-go-streaming-service-b71ef89cd714">Why we built Streamium</a></h2>
            </li>
            <li>
                <a href="https://bitcoinmagazine.com/20517/5-freelancers-may-use-bitcoin-powered-streamium-cut-middlemen/"><img id="bitmag" src="/assets/img/companies/bitcoinmag.png"></a>
            </li>
        </ul>
    </div>

    <!-- =========================
     SECTION: SERVICES
    ============================== -->
    <section class="services grey-bg" id="section1">
        <div class="container">

            <!-- SECTION HEADER -->
            <div class="section-header">

                <div class="small-text-medium uppercase colored-text">

                </div>
                    <h2 class="dark-text">Stream live video directly to your viewers and <strong>get paid instantly</strong>. No middlemen.</h2>
                    <div class="colored-line">
                </div>
                <div class="sub-heading">
                    
                </div>
            </div>

            <div class="row">

                <!-- SINGLE SERVICE -->
                <div class="col-md-3 " >
                    <div class="single-service border-bottom-hover">
                        <div class="service-icon colored-text">
                            <span class="icon-arrows-circle-plus"></span>
                        </div>
                        <h3 class="colored-text">1. Create</h3>
                        <p>
                            Create a live video stream tied to your bitcoin address for free.
                        </p>
                    </div>
                </div>

                <!-- SINGLE SERVICE -->
                <div class="col-md-3 " >
                    <div class="single-service border-bottom-hover">
                        <div class="service-icon colored-text">
                            <span class="icon-camera-alt"></span>
                        </div>
                        <h3 class="colored-text">2. Start</h3>
                        <p>
                            Start live streaming and charge your viewers on a per minute basis.
                        </p>
                    </div>
                </div>

                <!-- SINGLE SERVICE -->
                <div class="col-md-3 " >
                    <div class="single-service border-bottom-hover">
                        <div class="service-icon colored-text">
                            <span class="icon-social-share"></span>
                        </div>
                        <h3 class="colored-text">3. Share</h3>
                        <p>
                            Share and distribute the link to your stream with anyone.
                        </p>
                    </div>
                </div>

                <!-- SINGLE SERVICE -->
                <div class="col-md-3 " >
                    <div class="single-service border-bottom-hover">
                        <div class="service-icon colored-text">
                            <span class="icon-ecommerce-money"></span>
                        </div>
                        <h3 class="colored-text">4. Withdraw</h3>
                        <p>
                            Cash out your earned funds, without any service fees.
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>

<!-- =========================
     SECTION: BENEFITS
    ============================== -->
    <section class="unique-features white-bg" id="section5">
        <div class="container">

            <!-- SECTION HEADER -->
            <div class="section-header">
                <div class="small-text-medium uppercase colored-text">
                    
                </div>
                    <h2 class="dark-text">Just like Meerkat and Periscope, <strong>but with Bitcoin.</strong></h2>
                    <div class="colored-line">
                </div>
                <div class="sub-heading">
                   
                </div>
            </div>

            <!-- FIRST ROW OF FEATURES -->
            <div class="row">
                <div class="col-md-4 "  >

                    <!-- SINGLE FEATURE -->
                    <div class="feature">
                        <div class="icon-container">
                            <span class="icon-basic-book-pencil colored-text"></span>
                        </div>
                        <div class="description text-left">
                            <h4 class="dark-text">Private lessons</h4>
                            <div class="grey-line-short pull-left">
                            </div>
                            <p class="text-left">
                                Language, music instruments, tutoring.
                            </p>
                        </div>
                    </div>

                    <!-- SINGLE FEATURE -->
                    <div class="feature">
                        <div class="icon-container">
                            <span class="icon-basic-world colored-text"></span>
                        </div>
                        <div class="description text-left">
                            <h4 class="dark-text">Online gaming</h4>
                            <div class="grey-line-short pull-left">
                            </div>
                            <p class="text-left">
                                Competitions, showcasing, challenges.
                            </p>
                        </div>
                    </div>

                    <!-- SINGLE FEATURE -->
                    <div class="feature">
                        <div class="icon-container">
                            <span class="icon-laptop colored-text"></span>
                        </div>
                        <div class="description text-left">
                            <h4 class="dark-text">Movies on Demand</h4>
                            <div class="grey-line-short pull-left">
                            </div>
                            <p class="text-left">
                                Web series, reality shows, independent films.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- IPAD IMAGE -->
                <div class="col-md-4">
                    <div class="ipad-image "  >
                        <img src="/assets/img/ipad-air.png" alt="">
                    </div>
                </div>

                <div class="col-md-4 "  >

                    <!-- SINGLE FEATURE -->
                    <div class="feature">
                        <div class="icon-container">
                            <span class="icon-ribbon-alt colored-text"></span>
                        </div>
                        <div class="description text-left">
                            <h4 class="dark-text">Massive Open Online Courses</h4>
                            <div class="grey-line-short pull-left">
                            </div>
                            <p class="text-left">
                                Private education, college courses.
                            </p>
                        </div>
                    </div>

                    <!-- SINGLE FEATURE -->
                    <div class="feature">
                        <div class="icon-container">
                            <span class="icon-easel colored-text"></span>
                        </div>
                        <div class="description text-left">
                            <h4 class="dark-text">Consulting</h4>
                            <div class="grey-line-short pull-left">
                            </div>
                            <p class="text-left">
                                One-on-one mentoring, troubleshooting, therapy.
                            </p>
                        </div>
                    </div>

                    <!-- SINGLE FEATURE -->
                    <div class="feature">
                        <div class="icon-container">
                            <span class="icon-chat-alt colored-text"></span>
                        </div>
                        <div class="description text-left">
                            <h4 class="dark-text">Podcasts</h4>
                            <div class="grey-line-short pull-left">
                            </div>
                            <p class="text-left">
                                Live podcasting, music, audiobooks.
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>


    <!-- =========================
     SECTION: BRIEF RIGHT
    ============================== -->
    <section class="brief grey-bg text-left" id="section3">
        <div class="container">
            <div class="row">

                <!-- BRIEF IMAGE -->
                <div class="col-md-6">
                    <div class="brief-image-left">
                        <img src="/assets/img/imac-ipad.png" alt="">
                    </div>
                </div>

                <!-- BRIEF HEADING -->
                <div class="col-md-6 content-section">
                    <div class="small-text-medium uppercase colored-text">

                    </div>
                    <h2 class="text-left dark-text">For<strong> Free</strong>. No Risks.</h2>
                    <div class="colored-line-left">
                    </div>
                    <p class="text-left">
                    </p>

                    <!-- FEATUR ACCORDION WITH ICON -->
                    <div class="panel-group" id="accordion">

                        <!-- SINGLE ACORDIION -->
                        <div class="panel panel-default">

                            <!-- ACORDIION HEADING / TITLE -->
                            <div class="panel-heading" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                <h4 class="panel-title">
                                    <span class="icon-container color-bg"><span class="icon-ecommerce-dollar white-text"></span></span><span class="title-text">$0 Service Fees</span>
                                </h4>
                            </div>

                            <!-- ACORDIION DESCRIPTION / TEXT -->
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body">
                                    All the bitcoins you earned are yours to keep. There are no middlemen to charge fees or withholding payment.
                                </div>
                            </div>
                        </div>

                        <!-- SINGLE ACORDIION -->
                        <div class="panel panel-default">

                            <!-- ACORDIION HEADING / TITLE -->
                            <div class="panel-heading" id="headingTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                <h4 class="panel-title">
                                    <span class="icon-container color-bg"><span class="icon-basic-lock white-text"></span></span><span class="title-text">Completely Private</span>
                                </h4>
                            </div>

                            <!-- ACORDIION DESCRIPTION / TEXT -->
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div class="panel-body">
                                    Stream directly to your viewers using a private connection. Your stream is not hosted by Streamium nor any other third party.
                                </div>
                            </div>
                        </div>

                        <!-- SINGLE ACORDIION -->
                        <div class="panel panel-default">

                            <!-- ACORDIION HEADING / TITLE -->
                            <div class="panel-heading" id="headingThree" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                <h4 class="panel-title">
                                    <span class="icon-container color-bg"><span class="icon-lightbulb-alt white-text"></span></span><span class="title-text">Get paid as you Stream</span>
                                </h4>
                            </div>

                            <!-- ACORDIION DESCRIPTION / TEXT -->
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                <div class="panel-body">
                                    Payments are made using bitcoin payment channels, allowing you to charge per second for content streamed. Trustless payment and communication.
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    
    <!-- =========================
     SECTION: SOME STATS
    ============================== -->
    <!-- =========================
    <section class="stats" id="section4" data-stellar-background-ratio="0.5">
        <div class="overlay-layer-2">
            <div class="container">
                <div class="row no-gutters">

                    
                    <div class="col-md-4 col-sm-4 col-xs-4 single-stats border-left-colored border-right-colored " >
                        <div class="icon-container">
                            <span class="colored-text icon-basic-message-multiple"></span>
                        </div>
                        <h4 class="white-text">1250+</h4>
                        <p class="uppercase transparent-text small-text">
                            Streams
                        </p>
                    </div>

                    
                    <div class="col-md-4 col-sm-4 col-xs-4 single-stats " >
                        <div class="icon-container">
                            <span class="colored-text icon-ecommerce-money"></span>
                        </div>
                        <h4 class="white-text">78+</h4>
                        <p class="uppercase transparent-text small-text">
                            bitcoins earned
                        </p>
                    </div>

                    
                    <div class="col-md-4 col-sm-4 col-xs-4 single-stats " >
                        <div class="icon-container">
                            <span class="colored-text icon-ecommerce-graph-increase"></span>
                        </div>
                        <h4 class="white-text">235%</h4>
                        <p class="uppercase transparent-text small-text">
                            Weekly Growth
                        </p>
                    </div>
                </div>

                
                <div class="stats-footer">
                    <div class="long-transparent-line">
                    </div>
                    <p class="white-text">
                        We are ready to help you - <a href="#section11" class="strong inpage-scroll">Get Started Now »</a>
                    </p>
                </div>

            </div>
        </div>
    </section>
    ============================== -->


    <!-- =========================
     SECTION: TESTIMONIALS
    ============================== -->


    <!-- =========================
     SECTION: SCREENSHOTS
    ============================== -->

<div class="row">
  <div class="" > 

<!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    #mc_embed_signup{background:#fff; clear:center; font:14px Helvetica,Arial,sans-serif;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
      We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

      @media (max-width: 992px) {
        #mc-embedded-subscribe {
          margin-top: 10px !important;
        }
      }
      div.mce_inline_error{
        display: none !important;
        opacity: 0;
      }
</style>
<div id="mc_embed_signup" style="margin-bottom:-10px; padding-top:40px;">
<form action="//streamium.us10.list-manage.com/subscribe/post?u=3ca28a4c930c8ccb0748ffd6b&amp;id=b38712ae43" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  <div id="mc_embed_signup_scroll">


<div class="mc-field-group" style="max-width: 500px; margin: 0 auto;">
  <h2 class="dark-text" style="text-align: center; font-size:32px;">Let's keep in touch...</h2>
  <div class="col-md-7 form-group" > 
    <input type="email" value="" name="EMAIL" placeholder="Enter your email address" class="required email form-control" style="padding-top:20px; padding-bottom:20px; padding-left:5px;" id="mce-EMAIL">
  </div>
  <div class="col-md-5" > 
    <input type="submit" value="Alright!" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary btn-lg" style="margin: 0 auto; max-width: 200px">
  </div>
</div>

  <div id="mce-responses">
    <div class="response" id="mce-error-response" class="clear hidden" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none;width: 100%;text-align: center;" ></div>
  </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->



    <div style="position: absolute; left: -5000px;"><input type="text" name="b_3ca28a4c930c8ccb0748ffd6b_b38712ae43" tabindex="-1" value=""></div>


  </div> 
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>


    <!-- =========================
     SECTION: CONTACT INFO
    ============================== -->
    <div class="contact-info white-bg">
        <div class="container">

            <!-- CONTACT INFO -->
            <div class="row contact-links">

                <div class="col-sm-12">
                    <div class="icon-container">
                        <span class="icon-basic-mail colored-text"></span>
                    </div>
                    <a href="mailto:hello@streamium.io" class="strong">hello@streamium.io</a>
                </div>
            </div>

        </div>
    </div>
    <!-- FOOTER -->
    <footer class="footer grey-bg">
        Streamium. Source code <a href="https://github.com/streamium/paystream/">on GitHub</a>

        <!-- SOCIAL ICONS -->
        <ul class="social-icons">
            <li><a href="https://www.facebook.com/streamiumio"><span class="icon-social-facebook transparent-text-dark"></span></a>
            </li>
            <li><a href="https://twitter.com/streamium_io"><span class="icon-social-twitter transparent-text-dark"></span></a>
            </li>
        </ul>

    </footer>
  </div>
</div>

  <footer id="global-footer">
      <strong>Disclaimer:</strong> Streamium is in beta and there are known
      security issues. You may lose money, use at your own risk. Content is
      generated by users and is not stored nor controlled by Streamium in any
      way. Streamium does not offer anonymity nor privacy from law enforcement
      nor malicious actors. Obey all local and federal laws in your location
      when using Streamium.
  </footer>