How To Create YouTube like website.

Hi Guys,

I recently used OpenTok API for my website to record videos and play videos. My requirement was met where users were able to record a video and play the same video in future without storing it on my server. This way i saved server space and bandwidth utilization of my server.

Here is the code



<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://static.opentok.com/v1.1/js/TB.min.js"></script>
<script src="https://raw.github.com/carlo/jquery-base64/master/jquery.base64.min.js" type="text/javascript"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/hmac-sha1.js"></script>
<div id="recorderContainer"></div>
<div id="playerContainer"></div>


<input type="button" value="Record Again" onclick="initrecordVideo()" />
<!--Thanks To
    https://tokbox.com/opentok/v1/tutorials/basic-tutorial/js/
    http://www.tokbox.com/blog/generating-tokens-without-server-side-sdk/
    http://www.tokbox.com/blog/how-i-built-minute-grams-3-minute-tutorial/
    https://tokbox.com/opentok/v1/libraries/client/js/reference/Recorder.html
    https://tokbox.com/opentok/v1/libraries/client/js/reference/RecorderManager.html#example
    -->
<script type="text/javascript">
    var recorderManager;
    var recorder;
    var player;

    var API_KEY = "YOUR_OPENTOK_API_KEY";  // Replace with your API key. See https://dashboard.tokbox.com/projects
    var SECRET = "YOUR_OPENTOK_SECRET";

    var TOKEN = generateToken(); // Replace with a generated token that has been assigned the role of moderator.
    // See https://dashboard.tokbox.com/projects

    recorderManager = TB.initRecorderManager(API_KEY);

    var subscriberProps = {
        width: 640,
        height: 640,
        subscribeToAudio: true
    };

    var recDiv = document.createElement("div");
    var recDivId = "recorder" + new Date().getTime().toString();
    var archiveId = null;

    initrecordVideo();

    function initrecordVideo() {
        $('#recorderContainer').html('');
        $('#playerContainer').html('');
        recDiv.setAttribute("id", recDivId);
        document.getElementById("recorderContainer").appendChild(recDiv); // Replace with the ID of the container DOM element.
        recorder = recorderManager.displayRecorder(TOKEN, recDivId);
        recorder.addEventListener("archiveSaved", archiveSavedHandler);
    }

    function archiveSavedHandler(event) {
        recorderManager.removeRecorder(recorder);
        loadArchive(event.archives[0].archiveId); // You will want to save the archive ID on your server, for future playback.
        archiveId = event.archives[0].archiveId;
        //alert(archiveId);
    }





    function loadArchive(archiveId) {
        $('#recorderContainer').html('');
        $('#playerContainer').html('');
        playerDiv = document.createElement("div");
        var playerDivId = "player" + archiveId;
        playerDiv.setAttribute("id", playerDivId);
        document.getElementById("playerContainer").appendChild(playerDiv)
        player = recorderManager.displayPlayer(archiveId, TOKEN, playerDivId);
    }

    function generateToken() {
        var secondsInDay = 86400;
        // Credentials
        var sessionId = '1_MX4xMTMzMTg5Mn4xMjcuMC4wLjF-U3VuIERlYyAwMiAwNjo0NTozMSBQU1QgMjAxMn4wLjQwMjY2OH4';
        // Token Params
        var timeNow = Math.floor(Date.now() / 1000);
        var expire = timeNow + secondsInDay;
        var role = "moderator";
        var data = "bob";

        TB.setLogLevel(TB.DEBUG);

        // Calculation
        data = escape(data);
        var rand = Math.floor(Math.random() * 999999);
        var dataString = "session_id=" + sessionId + "&create_time=" + timeNow + "&expire_time=" + expire + "&role=" + role + "&connection_data=" + data + "&nonce=" + rand;

        // Encryption
        var hmac = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA1, SECRET);
        hmac.update(dataString);
        hash = hmac.finalize();

        preCoded = "partner_id=" + API_KEY + "&sig=" + hash + ":" + dataString;
        token = "T1==" + $.base64.encode(preCoded)
        return token;
        // Token Achieved. The End
    }
</script>

Try this code, Don't forget to add your opentok api and secret in the code. You can also generate a session from opentok dashboard and use the same session in this code.