![]() ![]() One of the first things you need to do is segment the user from the background. (Speaking of Kranky Geek, make sure you sign up for our next live stream broadcast on November 18 here). In my examples below I intentionally made my environment a bit difficult – I turned off my forward-facing lighting, used my usual high-back chair, and wore my green Kranky Geek t-shirt to confuse any poorly tuned green screen effects. Play with the playground yourself at playground.html (note there is a streamlined example covered further down too). I started out with some proof of concept code and ended up expanding that into a more comprehensive playground as I experimented with different things. I walk through methods and findings below or jump here to see the demos.ĭemonstration of the webrtcHacks virtual background transparency playground on a classic video call Proof of Concept WebRTC does make this as easy as it could be, but fortunately new APIs like WebRTC Insertable Streams / Breakout box help to make this a lot more performant. ![]() I wanted to not only show the user’s self-view as transparent but also have the user’s background removed for anyone they send their image to over a WebRTC peer connection. I decided to figure out how to do this in the browser. Virtual green screens or newscaster mode are other names. There doesn’t seem to be a universal name for this feature. Rather than inserting a new background behind user(s), transparency removes the background altogether, allowing the app to place users over a screen share or together in a shared environment. Virtual backgrounds have been around for a while. There is a cool new feature everyone has been trying to implement – background transparency. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |