Interview WebRTC Professor: Elliot Eichen, Mentor: Aishwarya Srinivasan, srinivasan.a@husky.neu.edu Project Staff: Fu Yufei, Li Wenzhao, Lu Mingren, Ma Huan, Pang Mo, eeichen@coe.neu.edu fu.yuf@husky.neu.edu li.wenz@husky.neu.edu sunnylmr@gmail.com ma.hu@husky.neu.edu pang.mo@husky.neu.edu Agenda What is WebRTC • Use case • Advantages of WebRTC • Why is WebRTC superior to Skype Our project: Interview WebRTC • • • • Project Output Design idea and working flow Key functions Live Demo Conclusion Beauty of Interview WebRTC A startup company plans to recruit Interns x Flights x Customized Skype x Phone interview Solution with WebRTC: Interview WebRTC Free No third party plugins All you need is Internet and a Browser !! High quality Different signaling protocols can be chosen for handshake. Check with this cool product! For Interviewer • • • • For Interviewee • • • Open the webpage we provide Click the URL he received Ping! Enter our webpage Create a unique URL Send the URL via email Ping! Forget Skype! With Skype, you cannot image: Light & convenient − No installation − Use the URL! Record the video − Share with your boss Group interview How is this powerful app realized Firebase Offerer SDP Answerer SDP Media Flow Caller’s Browser ICE Callee’s Browser ICE ICE STUN Server ICE .html .html .js .js Lab Server .html URL Key function n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia; n.getMedia(options.constraints { audio: true, video: true } Get User Media function createOffer() function createAnswer() function sendsdp(sdp) { sdp = JSON.stringify(sdp)}; Signaling & Exchange SDP Peer to Peer Connection peerConnection.onicecandidate =onicecandidate; var peerConnection = new PeerConne ction(location.search.indexOf('turn=tr ue') !== -1 ? TURN : STUN, optional); Media Flow Ready to Rock?! Conclusion • Introduction and advantages of WebRTC • Use Case: Interview WebRTC • Our project achievements • The logic & function of Interview WebRTC • Live demo Thank you.