Walkthrough Archives - webrtcHacks

webrtcH4cKS: ~ Computer Vision on the Web with WebRTC and TensorFlow

Posted by Chad Hart on December 3, 2017

Posted in: Guide.

Tagged: computer vision, TensorFlow, Walkthrough.

TensorFlow is one of the most popular Machine Learning frameworks out there – probably THE most popular one. One of the great things about TensorFlow is that many libraries are actively maintained and updated. One of my favorites is the TensorFlow Object Detection API. The Tensorflow Object Detection API classifies and provides the location of multiple objects in an image. It comes pre-trained on nearly 1000 object classes with a wide variety of pre-trained models that let you trade off speed vs. accuracy.

webrtcH4cKS: ~ Debugging VP8 is more fun than it used to be

Posted by Philipp Hancke on March 28, 2017

Posted in: Guide.

Tagged: debug, Firefox, vp8, Walkthrough, wireshark.

2 comments

Editor Note: Fippo uses a lot of advanced WebRTC terms below – if you are a regular reader of this blog then don’t let that scare you. Wireshark is a great tool for diagnosing media issues and inspecting signaling packets even if you’re not building a media server. {“editor”, “chad hart“}

Stuff breaks all the time and then you need to debug it. My favorite tool for this remains Wireshark as we have seen previously. Its fairly useful for debugging all the ICE and DTLS stuff but recently I’ve had to debug the media traffic itself.

webrtcH4cKS: ~ How to limit WebRTC bandwidth by modifying the SDP

Posted by Nick Gauthier on October 26, 2016

Posted in: Guide.

Tagged: bandwidth, code, SDP, Walkthrough.

12 comments

WebRTC 1.0 uses SDP for negotiating capabilities between parties. While there are a growing number of objects coming to WebRTC to avoid this protocol from the 90’s , the reality is SDP will be with us for some time. If you want to do things like change codecs or adjust bandwidth limits, then you’re going to need to “munge” SDP for the time being.

At a recent WebRTC Boston, Nick Gauthier of MeetSpace described how he used SDP modification and other techniques to jam up to 10 video callers into a single conference without a media server. Not everyone has a good reason to do this, but there are certainly plenty of applications where having more precise control of your bandwidth consumption would be useful. You can see his video here or check out his technique and thorough explanation on how to munge SDP to adjust individual bandwidth usage below.

webrtcH4cKS: ~ Let’s Encrypt – how get to free SSL for WebRTC

Posted by Chad Hart on August 1, 2016

Posted in: Guide.

Tagged: Digital Ocean, encryption, HTTPS, Let's Encrypt, nginx, SSL, TLS, ubuntu, Walkthrough.

7 comments

Way back in 47 (version that is), Chrome started to mandate the use of HTTPS in conjunction with getUserMedia. To use HTTPS you need a SSL/TLS certificate. Xander Dumaine covered this a bit for us before, but I still see a lot of people out there struggle with it. As it so happens, the certificate for my own personal website is about to expire and I’m not too excited about paying $70/year to renew it. Fortunately, there is a new way to get certificates for free through Let’s Encrypt. Let’s Encrypt is a non-profit certificate authority that formed with the backing of many major industry players like Mozilla, Akamai, Cisco, and many others to simplify and automate the process of setting up encryption for your website. Oh, and its completely free.

webrtcH4cKS: ~ Your Browser as a Audio Conference Server with WebRTC & Web Audio (Alexey Aylarov)

Posted by Chad Hart on May 20, 2016

Posted in: Guide.

Tagged: conferencing, MCU, Walkthrough, Web Audio.

3 comments

Conference calling is a multi-billion dollar industry that is mostly powered by expensive, high-powered conferencing servers. Now you can replicate much of this functionality for free with a modern browser using the combination of WebRTC and WebAudio.

Like with video, multi-party audio can utilize a few architectures:

Full mesh – each client sends their audio to every other client; the individual streams are then combined locally before they come out of your speaker
Mixed with a conferencing server acting as a Multipoint Control Unit (MCU) – the MCU combines each stream and sends a single set to each client
Routed with a conferencing server in a Selective Forwarding Unit (SFU) mode – each client sends a single stream to the server where it is replicated and sent to the others

This architecture represents a fourth type: client-mixed type where one of the clients acts like the server. This provides the server-less benefits of mesh conferencing without the excessive bandwidth usage and stream management challenges.

webrtcH4cKS: ~ Update: Anatomy of a WebRTC SDP (Antón Román)

Posted by Chad Hart on May 5, 2016

Posted in: Guide.

Tagged: Antón Román, SDP, Walkthrough.

1 comment

Session Description Protocol (SDP) is a fundamental, but very unintuitive concept behind how WebRTC works today. Its no wonder that the Anatomy of a WebRTC SDP post and the interactive SDP guide by Quobis CTO, Antón Román has been so popular here on webrtcHacks. With all things WebRTC, things have changed and we were due for an update.

We also had some rendering issues on the interactive guide. After failing to figure out how to fix it, I decided to completely rewrite it. It is still has some issues, so please make your pull requests to fix and update it on our github repo here.

webrtcH4cKS: ~ Surviving Mandatory HTTPS in Chrome (Xander Dumaine)

Posted by Xander Dumaine on December 17, 2015

Posted in: Guide.

Tagged: Chrome, code, getUserMedia, HTTPS, Walkthrough, xander dumaine.

6 comments

“Only Secure Origins Are Allowed”

– Chrome 47

Chrome 47 now forces secure origins (mostly) with HTTPS. This can be a pain to deal with, but Xander Dumaine is here to help with some guidance. Xander is a Senior Software Engineer who deals with the good and bad of WebRTC for Interactive Intelligence in Raleigh, NC. He is helping maintain simpleWebRTC and organises the Triangle WebRTC Meetup group in that area.

{“editor”: “chad hart“}

Want to keep up on our latest posts? Please click here to subscribe to our mailing list if you have not already. We only email post updates. You can also follow us on twitter at @webrtcHacks for blog updates.

webrtcH4cKS: ~ Shut up! Monitoring audio volume in getUserMedia

Posted by Philipp Hancke on December 10, 2015

Posted in: Guide.

Tagged: audio level, FFT, getUserMedia, RMS, VAD, volume, Walkthrough, Web Audio.

1 comment

A few days back my old friend Chris Koehncke, better known as “Kranky” asked me how hard it would be to implement a wild idea he had to monitor what percentage of the time you spent talking instead of listening on a call when using WebRTC. When I said “one day” that made him wonder whether he could offshore it to save money. Well… good luck!

A week later Kranky showed me some code. Wait, he is writing code? It was not bad – it was using the WebAudio API so going in the right direction. It was enough to prod me to finish writing the app for him.

webrtcH4cKS: ~ First steps with ORTC

Posted by Philipp Hancke on September 18, 2015

Posted in: Guide.

Tagged: ORTC, Philipp Hancke, Walkthrough.

2 comments

ORTC support in Edge has been announced today. A while back, we saw this on twitter:

Windows Insider Preview build 10525 is now available for PCs: http://t.co/zeXQJocgLs This release lays groundwork for ORTC in Microsoft Edge

— Microsoft Edge Dev (@MSEdgeDev) August 18, 2015

“This release [build 10525] lays the groundwork for ORTC” was quite an understatement. It was considered experimental and while the implementation still differs from the specification (which is still work in progress) slightly, it already worked and as a developer you can get familiar with how ORTC works and how it is different from the RTCPeerConnection API.
If you want to test this, please use builds newer than 10547. Join the Windows Insider Program to get them and make sure you’re on the fast ring.

webrtcH4cKS: ~ Reacting to React Native for native WebRTC apps (Alexey Aylarov)

Posted by Chad Hart on September 15, 2015

Posted in: Guide.

Tagged: Alexey Aylarov, mobile, native, React, react native, VoxImplant, Walkthrough.

4 comments

It turns out people like their smartphone apps, so that native mobile is pretty important. For WebRTC that usually leads to venturing outside of JavaScript into the world of C++/Swift for iOS and Java for Android. You can try hybrid applications (see our post on this), but many modern web apps applications often use JavaScript frameworks like AngularJS, Backbone.js, Ember.js, or others and those don’t always mesh well with these hybrid app environments.

Can you have it all? Facebook is trying with React which includes the ReactJS framework and React Native for iOS and now Android too. There has been a lot of positive fanfare with this new framework, but will it help WebRTC developers? To find out I asked VoxImplant’s Alexey Aylarov to give us a walkthrough of using React Native for a native iOS app with WebRTC.

Walkthrough

All posts tagged Walkthrough

webrtcH4cKS: ~ Computer Vision on the Web with WebRTC and TensorFlow

webrtcH4cKS: ~ Debugging VP8 is more fun than it used to be

webrtcH4cKS: ~ How to limit WebRTC bandwidth by modifying the SDP

webrtcH4cKS: ~ Let’s Encrypt – how get to free SSL for WebRTC

webrtcH4cKS: ~ Your Browser as a Audio Conference Server with WebRTC & Web Audio (Alexey Aylarov)

webrtcH4cKS: ~ Update: Anatomy of a WebRTC SDP (Antón Román)

webrtcH4cKS: ~ Surviving Mandatory HTTPS in Chrome (Xander Dumaine)

webrtcH4cKS: ~ Shut up! Monitoring audio volume in getUserMedia

webrtcH4cKS: ~ First steps with ORTC

webrtcH4cKS: ~ Reacting to React Native for native WebRTC apps (Alexey Aylarov)

Search

Categories

Recent Comments

Twittering

New post notifications

RSS Feed

webrtcH4cKS: ~ Computer Vision on the Web with WebRTC and TensorFlow

webrtcH4cKS: ~ Debugging VP8 is more fun than it used to be

webrtcH4cKS: ~ How to limit WebRTC bandwidth by modifying the SDP

webrtcH4cKS: ~ Let’s Encrypt – how get to free SSL for WebRTC

webrtcH4cKS: ~ Your Browser as a Audio Conference Server with WebRTC & Web Audio (Alexey Aylarov)

webrtcH4cKS: ~ Update: Anatomy of a WebRTC SDP (Antón Román)

webrtcH4cKS: ~ Surviving Mandatory HTTPS in Chrome (Xander Dumaine)

webrtcH4cKS: ~ Shut up! Monitoring audio volume in getUserMedia

webrtcH4cKS: ~ First steps with ORTC

webrtcH4cKS: ~ Reacting to React Native for native WebRTC apps (Alexey Aylarov)

Search

Tags

Categories

Recent Comments

Twittering

New post notifications

RSS Feed