--- title: Javascript Emotion SDK for YouTube, Facebook, and Twitch API description: The new JavaScript SDK from Affectiva makes it easier than ever for developers to integrate emotion-sensing technology via your browser. image: https://go.smarteye.se/hubfs/MM%20(1).jpg --- ![](https://go.smarteye.se/hubfs/Affectiva%20March%202017%20Theme/Images/trigger.png) # BLOG [Emotion Technology](https://go.smarteye.se/topic/emotion-technology) [SDK](https://go.smarteye.se/topic/sdk) [Internship](https://go.smarteye.se/topic/internship) [EMPATH](https://go.smarteye.se/topic/empath) # Javascript Emotion SDK for YouTube, Facebook, and Twitch API ![](https://go.smarteye.se/hubfs/Screen%20Shot%202017-03-07%20at%201.45.15%20PM.png) [Affectiva](https://go.smarteye.se/author/affectiva) 08.08.16 - Share - [** ](https://www.facebook.com/sharer/sharer.php?u=https://go.smarteye.se/javascript-emotion-sdk-for-youtube-facebook-and-twitch-api) - [** ](https://twitter.com/intent/tweet?text=Javascript+Emotion+SDK+for+YouTube%2C+Facebook%2C+and+Twitch+API&url=https://go.smarteye.se/javascript-emotion-sdk-for-youtube-facebook-and-twitch-api&via=) - [** ](https://www.linkedin.com/shareArticle?url=https://go.smarteye.se/javascript-emotion-sdk-for-youtube-facebook-and-twitch-api&title=Javascript+Emotion+SDK+for+YouTube%2C+Facebook%2C+and+Twitch+API&summary=The+new+JavaScript+SDK+from+Affectiva+makes+it+easier+than+ever+for+developers+to+integrate+emotion-sensing+technology+via+your+browser.) - [mailto:?body=https://go.smarteye.se/javascript-emotion-sdk-for-youtube-facebook-and-twitch-api](mailto:?body=https://go.smarteye.se/javascript-emotion-sdk-for-youtube-facebook-and-twitch-api) --- *By: Jeffrey Lu, Software Engineer Intern* The new JavaScript SDK from Affectiva makes it easier than ever for developers to integrate emotion-sensing technology via your browser! As an intern at Affectiva this summer, I was initially tasked with the job of updating a previous demo that was written using the SDK. This demo involved capturing your emotional reaction while playing a [game](http://codeincomplete.com/projects/tower-platformer/) for a short amount of time, and the code itself was unwieldy, consisting of logic to start the webcam, set up a web worker, and send and receive frames for processing. Using the SDK, however, I was pleasantly surprised to find all this logic wrapped up in several lines of code: | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | `// get the div where the face video will appear` `var` `face_video = document.getElementById(``"face-video-div"``);`   `// initialize the CameraDetector` `var` `detector =``new` `affdex.CameraDetector(face_video);`   `// choose emotions to detect` `detector.detectAllEmotions();`   `// start the detector` `detector.start();`   `// add callback for when the detector is initialized` `detector.addEventListener(``"onInitializeSuccess"``,``function``() {...});`   `// add callback for when a frame finishes processing` `detector.addEventListener(``"onImageResultsSuccess"``,``function``(faces, image, timestamp) {...});` | | --- | --- | I came to see the “emotions detector” as a black box: pass in a frame for processing and get back emotion data for that frame. Armed with the SDK, I started looking for cool ways to integrate it. After hearing about the application of Affectiva’s software to ad testing, I became interested in YouTube. **Why not track your emotional reaction to any video you watch, not just ads?** YouTube seemed like the closest thing to a universal video repository, so I started looking into their player and data APIs. Soon, I was able to implement a search feature and dynamically control a YouTube player, even in the face of poor Internet connection and buffering issues. I borrowed the UI from the game demo, rendering the emotions chart using [d3](https://d3js.org/).  ![Screen-Shot-2016-08-08-at-10.34.24-AM-300x144.png](https://go.smarteye.se/hs-fs/hubfs/Screen-Shot-2016-08-08-at-10.34.24-AM-300x144.png?width=640&name=Screen-Shot-2016-08-08-at-10.34.24-AM-300x144.png) **Screenshot of YouTube demo with all emotions displayed on graph.** Naturally, the next step was to use the SDK with a live video or stream such as Twitch or YouTube Live. For both of these platforms, I found endpoints to read the top current streams, and for each stream I was able to get both the corresponding video and a chat embed. I searched around for examples of dynamic charts and found that [CanvasJS](http://canvasjs.com/) worked quite nicely. By discarding a fraction of the data once the emotion lines reached the end of the chart, I achieved a scrolling effect that matched the real-time nature of the media itself. ![Screen-Shot-2016-08-08-at-10.34.33-AM-300x144.png](https://go.smarteye.se/hs-fs/hubfs/Screen-Shot-2016-08-08-at-10.34.33-AM-300x144.png?width=640&name=Screen-Shot-2016-08-08-at-10.34.33-AM-300x144.png) **Screenshot of Twitch demo with all emotions displayed on graph.** Beyond its emotion-analysis capabilities, Affectiva’s SDK can also match your facial expression with an emoji. I recreated Facebook’s [floating emojis for Live Videos](http://img.theepochtimes.com/n3/eet-content/uploads/2016/04/06/Live-Reactions-Android-crop.png), but instead of taps or clicks, your facial expressions generate different emojis. Using [Paper.js](http://paperjs.org/) and an[awesome library of emojis](http://emojione.com/developers/) I found online, I was able to overlay a stream of happy, smirking, sad, surprised, and angry emojis on a video. However, because there was no convenient endpoint to pull current Live Videos, I resorted to a previously recorded Live Video for my demo.   ![Screen-Shot-2016-08-08-at-10.34.43-AM-300x170.png](https://go.smarteye.se/hs-fs/hubfs/Screen-Shot-2016-08-08-at-10.34.43-AM-300x170.png?width=640&name=Screen-Shot-2016-08-08-at-10.34.43-AM-300x170.png) **Screenshot of Facebook demo with joy and surprise emojis firing.** In addition to the APIs and demos I mentioned above, I created a fun way to search Giphy by emotion and tried filtering photos from my Facebook profile by emotion. I again used CanvasJS to render the “emoji wheel” in the Giphy demo. So far I’ve only listed a handful of individual use cases, but there are endless possibilities of emotion-enabling applications in the web browser. One can imagine thousands of viewers watching the same stream and a server that aggregates and calculates the average sentiment of everyone watching. Emotions can enhance social media, social networking, games, and many other web-based activities. So what are you waiting for? Give the [Javascript SDK](http://developer.affectiva.com/v3_1/javascript/) a try and start developing your own emotion-enabled applications today! [![Careers in emotion recognition technology](https://no-cache.hubspot.com/cta/default/2372627/5da6119d-3321-4875-8093-685b96daf89f.png)](https://cta-redirect.hubspot.com/cta/redirect/2372627/5da6119d-3321-4875-8093-685b96daf89f) [Emotion Technology](https://go.smarteye.se/topic/emotion-technology) [SDK](https://go.smarteye.se/topic/sdk) [Internship](https://go.smarteye.se/topic/internship) [EMPATH](https://go.smarteye.se/topic/empath) ### Related Content [![From Boston to Cairo: Fostering Cross-Cultural Collaboration at Affectiva](https://lh3.googleusercontent.com/QNl71TvLuwFKkPT1QAhIqedttUEtr8AtEvQuE7mCWMiTj9OozpBECDImyHODmbIeq-oZu73tTxdvF6dlY5zYj1j4pgx7V-wUNmE5AksypOcAiQw55GiDfW-BVgQTUeft3Ej214up) From Boston to Cairo: Fostering Cross-Cultural Collaboration at Affectiva ](https://go.smarteye.se/from-boston-to-cairo-fostering-cross-cultural-collaboration-at-affectiva) [![YGLs Partner to Advance the Next Generation of AI Leaders](https://go.smarteye.se/hubfs/shutterstock_1492319738.jpeg) YGLs Partner to Advance the Next Generation of AI Leaders ](https://go.smarteye.se/ygls-partner-to-advance-the-next-generation-of-ai-leaders) [![Balancing Long-Term Brand Effects and Short-Term Activation with Unruly](https://go.smarteye.se/hubfs/Blog_Images/shutterstock_714872176%20(1)%20(1).jpg) Balancing Long-Term Brand Effects and Short-Term Activation with Unruly ](https://go.smarteye.se/balancing-long-term-brand-effects-and-short-term-activation-with-unruly) [![Leadership at Affectiva: Company Culture and Pioneering Emotion AI](https://go.smarteye.se/hubfs/_DSC2176.jpeg) Leadership at Affectiva: Company Culture and Pioneering Emotion AI ](https://go.smarteye.se/leadership-at-affectiva-keeping-company-culture-strong-during-pandemic) [Contact Us](http://www.affectiva.com/contact-us/) [Client Login](https://labs-portal.affectiva.com) [Emotion AI](http://www.affectiva.com/emotion-ai/) [Solutions](http://www.affectiva.com/what/products/) © 2018 Affectiva. All Rights Reserved. [Terms](http://www.affectiva.com/terms-of-service/) & [Privacy Policy](http://www.affectiva.com/privacy-policy/) androidemailfacebookinstagramlinkedintwitterfacebookinstagramioslinkedinmacMenu icontwitterunitywindows