How I built a WebRTC enabled website in 20 minutes!
-
Upload
paul-richards -
Category
Technology
-
view
792 -
download
0
description
Transcript of How I built a WebRTC enabled website in 20 minutes!
![Page 1: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/1.jpg)
Working with WebRTC
How to set up your own video
conferencing service
![Page 2: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/2.jpg)
WebRTC.Org provides FAQ for this process…
![Page 3: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/3.jpg)
Do I need to be a programmer to use WebRTC?
• Yes, to built WebRTC into a software application programming skills are required
• However, JavaScript API’s that Call WebRTC in the browser will only require typical web development skills!
![Page 4: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/4.jpg)
What you need…
• Your own Web Server (GoDaddy, Host Gator...)
• Basic HTML Experience
• JavaScript Experience
• A internet connection
• A webcam for testing
![Page 5: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/5.jpg)
Step 1: Get the Source Codefrom the Google Chrome GitHub
![Page 6: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/6.jpg)
Here is the link
https://github.com/GoogleChrome/webrtc/tree/master/samples/web/co
ntent/apprtc
![Page 7: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/7.jpg)
Let’s look inside
HTML
![Page 8: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/8.jpg)
HTML
HTML
![Page 9: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/9.jpg)
CSS
CSS
![Page 10: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/10.jpg)
JavaScript
JavaScript
![Page 11: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/11.jpg)
Step 2: Check out what you just got..For an example of what you get to play
with• Basic User Demo
• WebRTC SnapShots
• Choose Camera Resolution
• Choose Camera and Microphone
• Face Tracking
• A Google Hangout Video Chat Client!
![Page 12: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/12.jpg)
Step 3: Customize your SetUp
• The Demo JavaScript available from WebRTC.Org will allow you connect multiple web browsers using “Real Time Communications”
• It’s all open source so you can customize in any way you like
![Page 13: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/13.jpg)
See what we did here?
![Page 14: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/14.jpg)
Step 4: Upload/Host
• Upload your customized version of the WebRTC Demo System to your web server
• Make sure you webserver support php5 or later
![Page 15: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/15.jpg)
Step 5: Launch a Video Call
• You should be able to put together the WebRTC Demo source code and make a video conferencing call using WebRTC
![Page 17: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/17.jpg)
Reduce your Carbon Footprint with Online Video Conferencing
![Page 18: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/18.jpg)
![Page 19: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/19.jpg)
Ready to get started?
Click here to learn more about Conference Room Systems
![Page 20: How I built a WebRTC enabled website in 20 minutes!](https://reader034.fdocuments.us/reader034/viewer/2022042715/559c3cb01a28abea7f8b4725/html5/thumbnails/20.jpg)
Still have questions?
Contact us:800-486-5276
Our sales team is here to help before and after the sale.