shootem v0.0.2
ShootEm Unofficial Instabug Web SDK
Instabug WEB SDK Clone with missing features.
Background
We have 4 main functionality:
- capture the page.
- annotating or drawing on the shot.
- capture user data and collect input.
- sending to instabug backend.
Issues
Whats wrong with current impelementation ]
- Promise dosn't polyfilled so screen capture dosn't work in IE http://caniuse.com/#feat=promises.
- Not giving back respose if page take long to capture (due speed of internet). And shall give a way to cancel.
- No code spliting, don't load all code at one for ex. capturer only needed when we starting the report.
- Scrolling Proplem: we shall prevent user scroll while bug reporting.
- No support for mobile (UI and touch drawing).
- In screen captcher html2canvas:
- some problems with css.
- many proplems with custom scrolling.
- Arabic text
- Video
- Iframes big problem
- SVG need sceond look up
Posable Solutions
- for polyfill, its simple just polyfill it.
- for feedback while capturing, give feedback; but giving way to cancel its problem with promises, we could cancel user interface and ignore the result or dig more and change html2canvas to implement cancellation token.
- for separate javascript screen capture, could we?
- for scrolling proplem, do it like every modal libraries do it; add class to body that hide the overflow.
- for mobile support, more work :).
- for screen capture, dig for gold.
Added Fueatures
- support mobile ui and touch drawing.
- pen color and size.
- detect shape drawing, for now just rectangels.
Things to imporove
- smooth drawing path.
- detect the rest of basic shapes.
- cptcure videos.
Deps
production
- domReady
- HTML2Canvas
- @TBD
Developments
- babel
- webpack 2
- postcss
- @TBD
Run & Build
install deps
$ yarn install
start in dev mode
$ yarn start
build and start preview server
$ yarn start:prod
just build
$ yarn build
build and start stats interactive mode
$ yarn build:stats
Exposed API
Instabug Web SDK API {ibgSDK} | current | suggestion | description | |--- |--- |---| | init | ok, may take setting not just token | | | reportBug | ok | | | resetAndClose | ok, change to: close/closeBugReport | | | instabugLog | ok, change to: log | | | userData | ok, Ummm! change the name | add user data | | getLogs | Ummm! not exposed | | | submitReport | not exposed | | | ViewSubmitView | not exposed | | | downloadExtension | not exposed | | | takeScreenShotFromJavaScript | not exposed | | | getLocalStorage | not exposed | undefined |
Embeding Script
// instabug sdk preview => c48e32c9888e063a107eb5d6ad75e70a
// mohamed.h.hegazy@gmail.com => 5f01963068b91474d92c6867ba46d952
// mohamed@mohamedhegazy.com => a5910f2df0ad8a695c0319bcee492993
// https://instabug.mohamedhegazy/static/sdk
// https://s3.amazonaws.com/instabug-pro/sdk_releases/instabugsdk-1.1.0.min.js?1489404010
// https://127.0.0.1:3000/static/js/bundle.js?
// put this wherever you like but before ibgSdk.init()
(function(i,n,s,t,a,b,u,g){
u=i.ibgSdk=g={};u.init=function(z){g=z};a=n.getElementsByTagName('head')[0];
b=n.createElement('script');b.async=1;b.onload=function(){u=i.ibgSdk;!!g
&&u.init(g);g.callback&&g.callback()};b.src=s+'-'+t+'.min.js';a.appendChild(b);
})(window,document,'https://instabug.mohamedhegazy.com/static/instabugsdk','1.1.8');
ibgSdk.init({
token: 'a5910f2df0ad8a695c0319bcee492993',
callback: function() {}
});
window._instabug = {
token: 'a5910f2df0ad8a695c0319bcee492993'
};
// {token:"a5910f2df0ad8a695c0319bcee492993",v:'1.1.0'};
(function(i,n,s,t,a,b,u,g){
g={token:"a5910f2df0ad8a695c0319bcee492993",v:'1.1.0'};a=n.getElementsByTagName('head')[0];
b=n.createElement('script');b.async=1;b.src=s+'-'+g.v+t;i._instabug=g;a.appendChild(b);
})(window,document,'https://127.0.0.1:3000/static/js/bundle.js?','.min.js?1486903903');
Notes
- Chrome Extension: gbhnbcggjeokebhgalmgkbhkabpjmnda
7 years ago