Found 598 Articles for Front End Scripts

Websocket for binary transfer of data & decode with HTML5

Nitya Raut
Updated on 30-Jul-2019 22:30:22

819 Views

Use base64 encode/ decode on client and server. All the web browsers with WebSockets have window.atob (base64 decode) and window.btoa (base64 encode). The WebSockets server has base64 libraries.To transfer binary data, you would be working with wsproxy included with no VNC that is a web based VNC client.The wsproxy is a WebSockets to generic TCP sockets proxy. The base64 encodes/decodes all traffic to/from the browser. Use it to connect from a WebSockets capable browser to any type of TCP port.

HTML5 and Amazon S3 Multi-Part uploads

Chandu yadav
Updated on 30-Jul-2019 22:30:22

216 Views

Yes, it is possible to use the HTML 5 File API with the Amazon S3 multi-part upload feature. You would need a server backup as well as Amazon API keys.Amazon S3, a web service offered by Amazon Web Services provides storage through web services interfaces. Amazon launched S3 in 2007.Create multipart upload with Amazon API and send "key"(filename) and "upload id" back to the web page. For the multi-part, you need to send part data directly to Amazon S3 via the "part upload URL" using "date" and "auth header".

How to take a snapshot of HTML5-JavaScript based video player?

Ankith Reddy
Updated on 25-Jun-2020 07:42:59

798 Views

You can try to run the following code to take a snapshot of HTML5-JavaScript-based video player −Example                                       Snapshot                var video = document.querySelector('video');          var canvas = document.querySelector('canvas');          var context = canvas.getContext('2d');          var myWidth, myHeight, ratio;                    video.addEventListener('loadedmetadata', function() {             ratio = video.videoWidth/video.videoHeight;             myWidth = video.videoWidth-100;             myHeight = parseInt(w/ratio,10);             canvas.width = myWidth;             canvas.height = myHeight;          },false);          function snap() {             context.fillRect(0,0,myWidth,myHeight);             context.drawImage(video,0,0,myWidth,myHeight);          }          

Can a user disable HTML5 sessionStorage?

Vrundesha Joshi
Updated on 25-Jun-2020 07:43:47

2K+ Views

Yes, a user can disable HTML5 sessionStorage.It is easy to prevent browsers from accepting localStorage and sessionStorage. Let us see the settings for web browsers −Firefox Type “about config” in the address bar and press. This would show the internal browser settings. Move to dom.storage.enabled“, you need to right-click and Toggle to disable the DOM Storage.In Internet Explorer, You need to select “Extras”, “Internet Options”, “Advanced” Tab. Now go to “Security” and uncheck “Enable DOM-Storage”Google Chrome In Google Chrome, you need to open “Options”, then select “Under the Hood” Tab.Click “Content settings…”, then select “Cookies” and you need to set ... Read More

Alternatives to HTML5 iframe srcdoc?

George John
Updated on 25-Jun-2020 07:44:29

569 Views

The HTML tag is used to create an inline frame.Example           HTML iframe Tag                   The srcdoc attribute specifies the HTML content of the page to show in the iframeAn alternative of the srcdoc attribute will be −var doc = document.querySelector('#demo').contentWindow.document; var content = ''; doc.open('text/html', 'replace'); doc.write(content); doc.close();

Drawing lines with continuously varying line width on HTML canvas

Arjun Thakur
Updated on 25-Jun-2020 07:45:56

567 Views

To draw lines with continuously varying line width, you can try to run the following code −Examplevar context = document.getElementById('canvas1').getContext('2d'); var pts = [null, null, null, null]; for(var i=-1; i

How to listen to Keydown-Events in a KineticJS-managed HTML5-Canvas?

Rishi Rathor
Updated on 25-Jun-2020 07:45:02

132 Views

To listen to KeyDown events, use −if(keyIsPressed && keycode == somenumber) {    doSomething(); }To capture KeyDown −var canvas1 = layer.getCanvas()._canvas; $(canvas1).attr('tabindex', 1); canvas1.focus(); $(canvas1).keydown(function (event) {    console.log(event); });

How to choose between `window.URL.createObjectURL()` and `window.webkitURL.createObjectURL()` based on browser?

Chandu yadav
Updated on 25-Jun-2020 07:46:32

700 Views

To choose, you need to define a wrapper function −function display ( file ) {    if ( window.webkitURL ) {       return window.webkitURL.createObjectURL( file );    } else if ( window.URL && window.URL.createObjectURL ) {       return window.URL.display( file );    } else {    return null;    } }After that set it for cross-browser −var url = display( file );

How to play HTML

Nancy Den
Updated on 25-Jun-2020 07:48:32

86 Views

To play HTML blocks one by one, use the following HTML first −         The following is what you need to do to play audio one by one −var one = document.getElementById('one'); one.onended = function() {    document.getElementById('two').play(); } one.play();

Geolocation HTML5 enableHighAccuracy True, False or What?

Ankith Reddy
Updated on 25-Jun-2020 07:35:34

310 Views

For Geolocation enableHighAccuracy, you need to set it to true −enableHighAccuracy: trueIf you still fail in getting the result i.e. handling the timeout error, then again try it withenableHighAccuracy: falseThe above would work on Android, Chrome, and Firefox as well.

Advertisements