Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
243 lines (218 sloc) 12.2 KB

OpenVidu Tutorials


    <div class="col-md-12 text-center wow fadeInUp">
        <h3 id="hello-world" class="section-title">Hello World</h3>
        <p class="subheading">Make your first video-call with just a few lines of code</p>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-4 team-member"></div>
        <div class="col-md-4 col-sm-4 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <div class="img-responsive img-tutorials" alt="" style="text-align: center; border: 2px solid #0088aa"><h3 style="line-height: 100px; border-top: none; margin: 0; color: #0088aa">Hello World!</h3></div>
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-hello-world" class="cbp-singlePage"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-4 team-member"></div>
    </div>

    <hr>

    <div class="col-md-12 text-center wow fadeInUp">
        <h3 id="client-side-only" class="section-title">Client Side only </h3>
        <p class="subheading">Get quickly started without worrying about a server-side</p>
    </div>

    <div class="row">

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/javascript.png" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-insecure-js" class="cbp-singlePage"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>JavaScript</h4>
                <p>Vanilla JavaScript app: good old JS code for a traditional approach</p>
            </div>
        </div>

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/angular.png" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-insecure-angular"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>Angular</h4>
                <p>Try this fantastic tutorial using the last version of Angular framework</p>
            </div>
        </div>

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/react.png" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-insecure-react/"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>React</h4>
                <p>Have a look to this nice tutorial based on React </p>
            </div>
        </div>

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/ionic.png" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-ionic/"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>Ionic</h4>
                <p>This Ionic project will get your mobile app going in the blink of an eye</p>
            </div>
        </div>

    </div>
    <!-- End Row -->

    <div class="row no-margin row-more-info">
        <a class="btn btn-xs" data-toggle="collapse" data-target="#info-client-only"></a>
        <div id="info-client-only" class="collapse more-info-tutorials">
            <div class="row no-margin more-info-tutorials-int">
                <div class="col-lg-12 col-md-12 col-img-more-info">
                    <img class="img-responsive img-more-info" src="/img/docs/home/openvidu-new-architecture-client.png">
                </div>
                <div class="col-lg-12 col-md-12 more-info-desc">
                    <p><strong>OpenVidu</strong> is present on both client-side and server-side, but the <strong>application</strong> is only present on client-side.</p>
                    <p>Since these are client-side-only applications, you will be dealing only with <strong>frontend technologies</strong>: HTML, CSS, Javascript / Typescript ...</p>
                    <p>The main difference compared to Client Side + Server Side tutorials is that here you don't have real control over your users: your
                        <strong>video-calls won't be secure</strong> beacuse you cannot identify them and cannot determine if allow or deny their access.</p>
                </div>
            </div>
        </div>
    </div>

    <hr>

    <div class="col-md-12 text-center wow fadeInUp">
        <h3 id="client-side-server-side" class="section-title">Client Side + Server Side </h3>
        <p class="subheading">Try any of our ready-for-production web apps to see OpenVidu in action with a real example</p>
    </div>

    <div class="row row-secure-tutorials">

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/js_java.jpg" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-js-java"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>JavaScript + Java SPA</h4>
                <p>Vanilla JavasCript frontend and a SPA Java Backend: forget building HTML templates, just feed your
                    front with HTTP requests</p>
            </div>
        </div>

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/js_java.jpg" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-mvc-java"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>JavaScript + Java MVC</h4>
                <p>Vanilla JavasCript frontend and a traditional Java MVC Backend: serve HTML pages from your server</p>
            </div>
        </div>

    </div>
    <!-- End Row -->

    <div class="row row-secure-tutorials">

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/js_node.jpg" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-js-node"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>JavaScript + Node SPA</h4>
                <p>Vanilla JavasCript frontend and a SPA Node Backend: forget building HTML templates, just feed your
                    front with HTTP requests</p>
            </div>
        </div>

        <div class="col-md-6 col-sm-6 team-member">
            <div class="effect effects wow fadeInUp">
                <div class="img">
                    <img src="/img/assets/js_node.jpg" class="img-responsive img-tutorials" alt="" />
                    <div class="overlay">
                        <ul class="expand">
                            <li class="social-icon"><a href="/docs/tutorials/openvidu-mvc-node"><i class="icon ion-edit"></i></a></li>
                        </ul>
                        <a class="close-overlay hidden">x</a>
                    </div>
                </div>
            </div>
            <div class="member-info wow fadeInUp">
                <h4>JavaScript + Node MVC</h4>
                <p>Vanilla JavasCript frontend and a traditional Node MVC backend: serve HTML pages from your server</p>
            </div>
        </div>

    </div>

    <div class="row no-margin row-more-info">
        <a class="btn btn-xs" data-toggle="collapse" href="#info-client-server"></a>
        <div id="info-client-server" class="collapse more-info-tutorials">
            <div class="row no-margin more-info-tutorials-int">
                <div class="col-lg-12 col-md-12 col-img-more-info">
                    <img class="img-responsive img-more-info" src="/img/docs/home/openvidu-new-architecture.png">
                </div>
                <div class="col-lg-12 col-md-12 more-info-desc">
                    <p><strong>OpenVidu</strong> and the <strong>application</strong> are present on both client-side and server-side.</p>
                    <p>Since these are full web applications, you will be dealing with <strong>frontend technologies</strong> (HTML, CSS, Javascript / Typescript ...) 
                        but also with <strong>backend technologies</strong> (Java / Node)</p>
                    <p>The main difference compared to Client Side Only tutorials is that here you have total control over your users: your 
                        <strong>video-calls are secure</strong> beacuse you can identify them and allow or deny their access.</p>                             
                </div>
            </div>
        </div>
    </div>

</div>