JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<p id="log"></p>
<video style="width:300px;height:300px" width=300 height=400 id="video"></video>

JavaScript

var deferredAPI = {};

deferredAPI.geoLocation = function() {
    var deferred = $.Deferred();
    navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject);
    return deferred.promise();
};


deferredAPI.webkitNotification = function() {
    var deferred = $.Deferred();
  
    webkitNotifications.requestPermission(deferred.resolve, deferred.reject);
    return deferred.promise();
};

deferredAPI.getUserMedia = function() {
    var deferred = $.Deferred();
    var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    getUserMedia.call( navigator, "video, audio", deferred.resolve, deferred.reject);
    return deferred.promise();
};


//TEST
deferredAPI.geoLocation().done(function(pos) {
    $("#log").append("Got coordinates: " + JSON.stringify(pos) + "<br />");
}).fail(function() {
    $("#log").append("failed to get geolocation<br />");
}).always(function() {
    $("#log").append("after geolocation<br />");
});

deferredAPI.webkitNotification()
    .done(function() {
        $("#log").append("showing notification<br />");
    webkitNotifications.createNotification("", "title", "content").show();
}).fail(function() {
    $("#log").append("failed to get notification permission<br />");
}).always(function() {
    $("#log").append("after notification permission<br />");
});
if ( !! (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)) {
    deferredAPI.getUserMedia().done(function(localMediaStream) {
        console.log( localMediaStream, this ,arguments );
        var video = document.querySelector('video');
        video.src = window.webkitURL.createObjectURL(localMediaStream);
    }).fail(function() {
        $("#log").append("failed to get usermedia<br />");
    }).always(function() {
        $("#log").append("after getusermedia<br />");
    });
} else {
    $("#log").append("no support for get...