Working with binary data in JavaScript - Tech Hangout #12 - 2013.02.06
Upcoming SlideShare
Loading in...5
×
 

Working with binary data in JavaScript - Tech Hangout #12 - 2013.02.06

on

  • 701 views

В формате Tech Hangout Алексей Мирошко поделился знаниями и прочел доклад о текущем состоянии и перспективах в ...

В формате Tech Hangout Алексей Мирошко поделился знаниями и прочел доклад о текущем состоянии и перспективах в области создания браузерных приложений, работающих с двоичными файлами при помощи JavaScript и File API полностью на стороне клиента.

* Tech Hangout – мероприятие, организованное разработчиками для разработчиков с целью обмена знаниями и опытом. Подобные встречи проводятся еженедельно по средам с 12:00 до 13:00 и охватывают исключительно инженерные темы. Формат данного ивента подразумевает под собой 30 минутный доклад на ранее определенную тему, и такую же по продолжительности дискуссию в формате круглого стола.
Если у вас есть неутомимое рвение к новым знаниям, профессиональному росту, или же вы хотите поделиться своим опытом - добро пожаловать в Hangout Club!

Присоединяйтесь к обсуждению - https://www.facebook.com/groups/techhangout/
Читайте нас на - http://hangout.innovecs.com/

Statistics

Views

Total Views
701
Views on SlideShare
700
Embed Views
1

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 1

http://blog.innovecs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Working with binary data in JavaScript - Tech Hangout #12 - 2013.02.06 Working with binary data in JavaScript - Tech Hangout #12 - 2013.02.06 Presentation Transcript

  • Working with binary data in JavaScriptby Oleksii Miroshko ~ ^ >>Feb 06 2013
  • Is it really necessary?BROWSERSimagine browser as a frameworkfor your favorite applicationsJS-BASED SERVERSprocessing binary data insidenode.js server appsWINDOWS 8provides API for building metroFIREFOX OSsmartphone OS which requires from
  • Browser APIFileReader ArrayBufferBlobFileArrayFloat32ArrayUint8MediaStreamMediaStreamSourceObjectURLBufferSourceStreamSourceDataViewWhen you decide to start working with binarydata it will definitely be quite confusingFileListDataTransfer
  • Sort things out at firstFileListholds file inputDataTransferholds draggedfilesFileblob withmetadataBlobraw binarydataArrayBufferholds chunk ofbinary dataInt8ArrayUint8ArrayInt16ArrayUint16ArrayInt32ArrayUint32ArrayFloat32ArrayFloat64ArrayFileReaderread the contentsof files/buffersDataViewreads andwrites from/toArrayBufferArrayBufferViewprovides interfacefor getting datafrom ArrayBuffer
  • Recipes? Scenarios?var fr = new FileReader()var ab; // ArrayBufferfr.readAsArrayBuffer(fileorblob) // asyncfr.onload = function(e) {ab = e.target.resultvar dv = new DataView(ab)var x = dv.getInt8(24) // assume 11110000var b = parseInt(01000000, 2)x = x^b // x.toString(2) writes 10110000dv.setInt8(24, x) )}var fileorblob = fl.files[0]var fl = $(input[type=file])[0]var fltarget.addEventListener("drop",function () {fl = e.dataTransfer});var xhr = new XMLHttpRequest();xhr.open("POST", "/rcv", true);var data = new FormData();var blob = new Blob([ab],{/*mime*/})data.append(file,blob);xhr.send(data);var url = URL.createObjectURL(blob);location.href = urlany external binary sourcevar fileorblob = newBlob([chunk], {})
  • Probe itTask: show graphic spectrogram for uploadedaudio during playbackTools:FileReader APIdsp.js for FFT implementationDevice APIAudio API
  • WAV formatclass Waveformconstructor: (array_buffer)->@data = data = array_buffer@samplerate = data.getInt32(24, true)@bitrate = data.getInt16(34, true)@numchannels = data.getInt16(22, true)@datasize = data.getInt32(40, true)@numsamples = @datasize * 8 / @bitrate /@numchannels@seconds = @numsamples / @samplerateWaveform:bitrate: 16data: DataViewdatasize: 970214numchannels: 1numsamples: 485107samplerate: 44100seconds: 11.00015873015873
  • WAV formatsamplesbitsWaveform:bitrate: 16data: DataViewdatasize: 970214numchannels: 1numsamples: 485107samplerate: 44100seconds: 11.00015873015873getAvg: (from, to)->getInt = if @bitrate == 8 then getInt8 elsegetInt16sum = 0for i in [from..to]pos = 44 + i * @bitrate / 8trysum += Math.abs( @data[getInt](pos) )catch ebreakavg = sum / (to-from)avg / Math.pow(2, @bitrate-1) * 100
  • Demohttp://3.14.kiev.ua/jswave
  • Conclusion• basic features for accessing binary data areimplemented in Browsers and can bealready used• however API is in the middle of thestandardisation process and should be usedwith caution• API is rather not ready for processingstreaming data in realtime