Okay, so hello, I'm Aurelius Bonales, software developer from the Twainia company called NFQ and today I'm going to talk about webcam-based games. There will be three parts. First part will be from the user perspective.  What's the main difference compared to another? Second part will be technical parts for developers. What do you need to know to make one game and how to debug it? And the last part will be from the business perspective or just some practical tips where webcam-based games could be used the most or what added value it can bring them. So let's start from the first part. What webcam-based games are? Basically, if we compare webcam-based games to other types of games, the main difference I see is that instead of using traditional input devices such as keyboard or mouse, we use movement and enough of here. Let's go to the demo. So one of the simplest example of a game is just that you can shoot the bubbles and it should work. That's all the demos. Okay, so I will just let you also play because it will be not fun. Okay, so yeah, just okay. So basically, yeah. Yeah. No, the person in front should not click let's have us to also to play it. So basically, as you can see, if it will be a traditional game, I will have to give everybody a keyboard or a mouse or some mobile phone. So those two play, but now I can just use one single webcam and all audience, well, at least not the widescreen webcam, but most of the audience can play the game. So that's the main difference what they see about webcam-based games. And here is one of the example how you can input data. It's like you see moving couches and you just try to try to hit them. Another way to do is have some here. And yeah. Well, you know, it's a demo. Okay, so I will just switch to the there will be a slide about the precision and all the stuff. Okay, so the bugging on the stage as usual. Yeah. Yeah. Basically, can you turn on the light? Yeah. Well, basically, what is this example? So yeah, well, basically, I will show what went wrong in the next slide. But basically, what you can do is not only get the movie and culture, but to have some controllers, fixed controllers and to on and have them like virtual buttons. So one, one can, for example, show that you are in this building and one that you have a good party at Friday. And basically, I made this kind application, not not like a game, but more like a VJ tool. VJing is like DJing, but with visual graphics. And so one of the most common thing in VJ tools is that you can have this four square effect. So basically, this is the second demo I wanted to show and the third demo to show the what are capabilities of basic games is to include some 3D graphics and some more complex, some more complex input methods like this. And what I wanted to do is you see the FOSDOM signed. And if you like the FOSDOM, the idea is you need to move it in direction. So it could be funny for them. I'm not there unhappy because you can see that, well, because of the issues with the first demo, basically, there is a sad face when you rotate the 3D model. So basically, just to sum up what I showed or wanted to show during the demos, there was three ways how you can input the data into game. First was just moving objects and you tried to get them. Another was an example when there were some virtual buttons, statically attached to some positions. And the third was when you have something like screw boss on the scene and you can just have different direction to the left or the right. And those input methods made three different interactions. One was you could just draw things on the view from the webcam. Secondly, you can manipulate the view or add some effects like the quadra view or quadra representation. And the third was just you can separate the controlling webcam and the output. And the last one, for example, can be used in advertising when there is a wall and people just come through and the paper is flipping inside the screen. So you don't need to see the controlling or the webcam is used to just make, concentrate the people to the advertising, not how it is implemented. So to sum up the first part, webcam based games are those who use motion, not the traditional input devices. Okay, so next part is for developers. And this game will be not possible without the open source computer vision library called OpenCV. And it gives two main things. One is that it gives you access to webcam devices. You don't need to worry about hardware, about operating system. And another thing is it gives a lot of utilities to make the work with visual graphics very easily. For example, one liner to just fetch the frame from the webcam, a lot of filters. And you can see the code here. Example is basically except from the real script. And it shows how the first example of bubble shooting was implemented, just comparing pixel by pixels to frames. But just reading the code is not fun. And in practice, if you're building something related to a webcam based games, you will enjoy the debugging when you have a webcam view enabled. So the last demo hopefully it will work. So you can see the input, the traditional what you can get from the webcam. But open computer vision is popular for many filters. And one of the filters is edge detection or camera filter. So it is mostly used to better recognize different elements and work with low light conditions. But the most important filter, what I want to show is using differences.  It means that there are low values. And when I move something, there are difference between previous frame and current frame. So I can know which, when I try to hit the bubble and when I try to, where I have some motion and interact with that. On top of it, I can put different more complex input logic. For example, that logic where I try to move the object to the left or to the right. Basically, the idea is that you need to distinguish the direction if I'm moving it to the left or moving to the right. Because it is not enough to just know the moving if it is pixels changed or not. So what I do in this example, you see the white color shows how intensive the differences are between the frames. And the blue ones shows the historical data of that differences. Basically, to save resources, I don't store all 20 or 30 frames. I just subtract the value. And over time, those blue values just decreases, decreases. And I can, for example, if I move from right to left, I can compare the right pixel with the left pixel and see which is higher and know in which direction was the movement. So basically, that is how we can debug computer vision. So just to sum up what I showed, you can analyze current frame. You can analyze two frames. And you can store historical data and make decisions based on that. But as you saw from the first and the second demo, there was some problems with recognition. And the first thing you will hit when you are doing something with computer vision or webcam is the noise and precision. So basically, what happened when I was doing like, if you see here, you can see that I was standing in front of the screen. And the screen was just showing what I was doing. And I was moving and the screen was moving also. So the background was, differences in the background was causing the error input. And the same goes if we have clouds, some mirrors, people coming from the street or somebody turns on the light or just there are cheap cameras that automatically adjust the white balance and the value is just differences. So it is one of the drawbacks of computer vision. So you need to have it always in your mind. So basically, it is the second part for the developers. And to sum up that, basically, the suggestion is to use OpenCV Library and just compare the differences between frames and between values and current and the older frames. Okay, so for those who think, so yeah, we think webcam based games is fun, but can it give some added value or even how can I sell it, etc. So basically, when I started learning computer vision and webcam based stuff and creating some games, I saw that, well, it's not used, it's not mainstream and there's some problem about it. And compared to other competitors such as PlayStation Move or V or Xbox Kinect, those are very similar in technology, but those are more popular than more popular than webcam based games. And the main reason as you saw it during the presentation during the demo is the precision and all the dependence of the environment.  So there is a problem why webcam based games are not mainstream, but I see one area where those can have good to use cases and those are advertising and in particular advertising in IT conferences or other related resources. But for example, when I was trying to present my own project, I faced the issue that when people are coming from one auditorium never, they basically don't look at anything except the shortest path to the next room and the old ontogenetic modules such as paper or people just standing so they don't attack. Well, except to enforce the Microsoft freebie, but that's the exception. And I see more and more games in the conferences that can attract people. So if you have two or three people standing near you, so there are more people can come by. And the second thing is you can solve a problem I had during this presentation is the environment. In the conferences or other static or other control environments, you can put your webcam only in places where you know it will work. You can test it before so the accuracy could be much better. And what's important for open source that can base games, you can basically release them openly because you will be happy if competitors will use your brand and advertise your company in other conferences. So I see many advantages of using webcam based games particularly in advertising and conferences such as Faust and even. Okay, so as first presenter today talked about it's not easy to make games. So I realized it by trial and error. And one suggestion is even if you are making webcam based game, you still need to make it a game meaning that you need some sort of challenge even at least a score level or whatever. Also, there's webcam based games are quite unique and uncommon thing. So if you just put webcam and say, hey, it's a game nobody would understand. So just making some intro videos or some explanations is very valuable. At least when I tested it. So that was the response. And the last thing I want to suggest from personal experience is that you still need to keep the balance between all the new technologies, all the pretty graphics and the usability because if it's not responsive and if you can hit the bubble, even it is shiny, glorious, but it's not a game if it's if you can play it. So basically it sum up to the third part. And my suggestion is to if you can think of a better way to use webcam based games, it's in conferences or advertising. And that is my last slide. So I invite you to try this technology or even for my project, I showed the demo and use it in your own community. So thank you. Questions, thoughts? Yeah. Yes, we mentioned that there are many issues with the live variation. You want to get very into that, that you use pixel based methods. Can you try the feature based method or in the motion or network? Well, basically the question was I used I used to motion based detection if it is as a device, but there are many other ways. So I tried comparing well, first of all, this was part of learning open computer vision. So I wanted to make a game that works, not to be a PhD science in computer vision. So well, I didn't have enough time to compare to learn all the model tracking and all those algorithms such as well, all that detection and model comparison. But well, I tried color based. I tried well, basically, you can use some models that can recognize the face or recognize the arm, but still you will have the issue of blue or you still have the issue of wrong light, noise, etc. So it's just from my personal experience that comparing two frames was the most efficient and I haven't tried the more advanced ones. Other questions? Yeah. Is there an embedded software version of OpenCV? Yeah. The question is, is there an embedded version of OpenCV? Basically, I saw that there's version for Android. I don't know if there are a version for other devices, but probably there you just need to go to OpenCV.org and check it out. So it should be some version because it's quite tall project and quite famous. Well, basically OpenCV is used not only for games but to make self-driving cars. So it's very big, very impressive library framework. So using a webcam-based game such as very small parts, what you can do with OpenCV. Questions? Other? Okay, so thank you.


And some angry parents of the abducted students are in the meantime accusing the police of shooting at them. The parents had blocked the Kaduna Kachia Highway yesterday to protest against the kidnapping. They blocked leaves and stayed on the road for hours. Hello, hope you enjoyed the news. Please do subscribe to our YouTube channel and don't forget to hit the notification button so you get notified about fresh news updates.


Hi, everyone. Welcome to Web Day. And welcome to our panel session on Core Web Vitals. I'm Vivek, a product manager on the Chrome team. And in this session, we're going to talk about how Core Web Vitals have made a difference across three very different businesses. More than ever before, businesses rely on the web to serve their customers and grow. And we know from our work at Google how speed and usability can create a great user experience. We've talked to hundreds of web businesses around the world, serving many millions of users. And we found a few common themes which we distilled into the Core Web Vitals metrics, a set of metrics that capture the most important parts of your user's experience, ensuring pages load fast, are responsive, and stable. More importantly, Core Web Vitals allows us to measure progress and share ideas to improve the web as a community using a common language. We use Core Web Vitals extensively within Google and with many of our largest partners to serve our users better and grow their businesses. And we'd like to share their experiences with you today. I'm thrilled to be joined by Ruben Sherwin from Wix, one of the largest global CMS platforms, Fabio Palletti from C-Discount, a leader in e-commerce from France, and Giuseppe Cavotto from GED, one of the largest publishers in Italy. Gentlemen, thank you so much for joining us today. And let's start with you, Ruben. One area you and I have talked about has been the importance of building a performance culture within an organization. Can you tell us about that and about your experience with Core Web Vitals at Wix? So thank you, Vivek. That's a great question. So as mentioned, I'm Ruben Sherwin from the Office of the CTO at Wix. And a little bit of context about Wix, we're about enabling anyone to create their dream online presence with no compromises whatsoever on functionality or design. Our platform is designed so that it will do the heavy lifting so our users can focus on managing their business in online presence. Personally, I'm part of the Wix executive team with my number one focus being making the sites build on the Wix platform load faster. So the performance challenge for us is not about optimizing one single site with one given design. It's about building an infrastructure that enables our users to build any site they can imagine and we will verify that our users get the best possible performance for that given design. Now, as we all know, performance is highly impacted by design and functionality choices the site owner makes. Now, with virtually no limit on design and functionality, there's no one single performance magic number we can aim for. The challenge is that once our user makes their choices, we need to deliver for them the best possible performance for their combination, their choice of UI, design, and functionality. So the way we tackle this is we started with a clear performance vision. We define this as for any given site design, offer the loading experience which is comparable to the best possible implementation of the same design. So it's as if you have certain design and functionality in mind. If you take the best possible implementation at Wix, the performance should be comparable to as if you recruited the best development team in the world to develop this specific site for you. And once we had this vision in place, we realized that a key critical component for it is to have the performance culture in place. We wanted everyone on the team, from software engineers to executives to be on the same focus, including our data teams, our product managers, our customer satisfaction, et cetera. We set up a performance core team that helped us disseminate and create partnerships across all product teams. Since it's critical to have everyone on the team engaged and involved because there's no limit to the permutations of specific sites that our users can build. We realized that a key part, and this connects strongly to core vitals, is having performance data, transparency. We wanted it to be part of everyone's DNA to engage the members and to help them engage the actual changes, progress, both in field and lab data. We've been collecting, we're strongly a data-driven company in many things, and we collect, run real user measurements and field data, which is anonymized from real user sessions. And it effectively lets us know how our sites perform in different geographies, different devices, different networks, totally different infrastructures, what our actual user base feels on a regular basis. We complement that with synthetic and lab data that helps us evaluate what our user base can potentially feel under different situations. So with Google announcing a core with vitals last year, we welcomed it as another important indicator in our performance data to gain and offer additional transparency to field data of real user sessions. And all of this effort gladly showed us amazing results in the past year. But beyond just performance vision and performance culture, there's a critical realization that our team had, and I think all teams should have, and that is performance is a journey. It's not a one-time effort. You must realize that you need to make the commitment, take some leap of faith and great investment. But then, one step at a time, you must continue improving. You must stay vigilant and continue chasing the performance goal. And then you need to do it again, and again, and again. So as I said, we saw an amazing year-over-year improvement, and that was reflected in a 3x improvement in our all-green or past core web vitals and a huge 41% improvement in loading time across all geographies for all users. And the journey is not done yet. I mean, we're continuing on a regular basis on improving this and improving all of our numbers across all of our, as I said, geographies and users. So the recap or takeaway, I'd say, is great performance is always a challenge, but it's a challenge that can be met. It can be done, but you are never done. You have to set a vision, you have to have a focus, and you have to be ready for the journey, and the rest will follow. So let me close by saying thank you for letting us share our performance journey with you. Stay tuned. There is more to come. Thanks, Reuben. Those are some fantastic results, and I'd love to dig more into the Wix experience in the question period at the end. Fabian, I want to go to you next. The e-commerce space is incredibly competitive, but it's also very fast-moving. You had a really great model for thinking about making a rapidly changing site also perform well. Can you share a bit about that and your experience at C-Discount? Thank you, Vivek. Hello, I'm Fabian Polici, city of C-Discount. C-Discount is an e-commerce company with the second largest in France, and it's a challenge to try to be the best in a competitive world. Like Reuben said, web perf is a journey. It's impossible to slow down and do an easy test to evaluate business impact. You only can go forward to always move on to a better web perf. And so at the beginning, we ask ourselves, what is the definition of web performance? Is it an electric car using few energy available every time you need it, or is it a fight of jets? That go fast, but can be unavailable. And at C-Discount, we chose the first approach. So we developed a dedicated roadmap based on incremental optimization and monolith writing action to use less and less compute resources. And we saw a CWV continuous improvements, but it was hard to evaluate the business gain on a day-to-day basis with core web vital input. Customer journey is always evolving with fewer prices, new products, new offers. And so your experience changes every day, and your customer journey changes every day. So how do you find a base to evaluate the impact of web performance? You only can say we are in a good way to achieve a great goal.  So we had to find a scale to evaluate all the gain. And we saw during Black Friday that we gained 6% revenue on a day-to-day basis, comparison year to year, thanks to web performance and core web vital improvement. It was done with an uptime that was the better we ever had with 100% uptime on this day. And it was possible because all the work we did on core web vitals was a gain on all of the system. We closed bugs, we improved performance, we had less error, we had a stack trace that was better up to date. And so the gain was really a gain change in our company and our culture. And we know we were in a good way, but it was the proof that web performance is a business gain change. And so I would say to finish, that NPS is rising thanks to WebPerf. Customers are having a good time on our websites. Friend and family is also, and so never keep facing that web performance as a business game changer. Thanks, Fabian. I really like the connection between performance and uptime and NPS there. I want to bring in Giuseppe. GED had a unique approach to starting performance work with a smaller, newer product and then scaling up what you learned to the main properties. Can you tell us a bit about that experience Giuseppe? Hi, Paul. I'm Giuseppe Cobato, head of innovation and new technologies at JD Digital Tech Department. JD is a media company, publisher of 15 new sites, several magazines and web streaming radio stations. Before 2017, we didn't have a strategic path for web performance. And knowledge sharing was really low and inefficient across teams. Then we took the opportunity to develop a new premium content site while experiencing with emerging technologies such as Polymer, AMP, First Progressive Web Apps. And this server has a playground to upskill the team around performance-related objectives. The new site become one of the fastest newspaper sites on the K-metrics such as Time to First Byte and First Content Full Paint. All of these have been possible first by applying a critical rendering path optimization, making sure there is no CSS or JS that could potentially slow down our editorial content rendering time. Then we also spend a great time optimizing our site layout stability, for example, by reserving space for our images based on their aspect ratio. We used what we learned at the scaling this innovation to other main traffic sites such as La Stampa and La Repubblica, and we were able to measure the benefits. On La Repubblica, for example, in the BIAL site, we have measured 77 cumulative layouts shift and 26% almost larger content paint improvements on real traffic. We have been gradually rolling out these changes and this allowed us to measure the benefit on these main sites. For example, we had 8% of mobile bounce rate improvement. Our next steps are now to improve the cumulative layout shift by minimizing the impact of ads on site layout stability. Thanks Giuseppe. It reminds me of the old adage that it's often more profitable to keep an existing customer, or in this case a user, than to go out and find a new one. So I really like the use of bounce rate there and those are some impressive numbers. Let's briefly dive into a few areas each of you mentioned. Ruben, I'm curious about the unique position Wix occupies as a platform serving thousands of merchant sites. What are some of the considerations you faced when improving core revital scores and how do you think about the opportunities platforms have in supporting their customers here? So while I believe users should understand the balance between functionality and design choices they make and that impact on performance, I believe the greater responsibility is on the platform developers such as ourselves. We should and we do work very hard to deliver the best possible performance for our users, for whatever permutations of design and functionality they choose. And adding core web vitals is a good addition to our toolbox for that. From the user's perspective, we'll actually be rolling out the first version of a super cool tool shortly to help our users gain insights into the loading time and performance of their site, including both field data which anonymized from Wix sessions and lab data from Google paid-speed insights. So be sure to check it out. Thanks, Ruben. Fabien, you had a great set of outcomes at SeaDiscount and much of that came from a long multi-year journey across the organization. Can you talk a bit about how you maintain momentum within the organization, even if daily progress was sometimes challenging to observe? Change of culture and face was the essence of success. We had to measure everything on the user point of view to avoid to go in wrong direction. We had to share objective with business owners in order to work as a global team and prioritizing user story easily and commonly. And CO implication was a great boost in difficult times when we thought we were stuck to see business impact on back Friday was also a key achievement and a booster. Thanks, Fabien. Giuseppe, one challenge that always comes up with publishers is how to improve core with vital scores with display ads, particularly when dynamic ads can cause layout shifts. I'd love to hear how you tackle this at GED. Yeah, I mean, it is a big challenge because ad servers often delivery multi-size at the format and finding the right space to reserve. It's really a challenge. We are currently doing a lot of abit testing trying to find the different solutions or test different solutions. Some of them are working for our experience and so the idea is to take them to bigger sites and I think that the solution will come just doing tests and verifying which solution will work best in all the scenarios. Thanks, Giuseppe. And I wanna thank all of our partners today, Ruben Sherwin from Wix, Fabian Palletti from C-Discount and Giuseppe Cavetti from GED. And thank you for joining us. For more information on core with vitals, visit us online at web.dev slash vitals and enjoy the rest of Web Day. Thank you.


The Industrial Roundtable is the largest student-run career fair in the country. We have about 380 companies attending this year. Estimated in the past has been around 12,000 students. The cool thing about it is that it serves all STEM majors.  People are looking for a range of job opportunities, whether that be a co-op or an internship, really the entire range of employment opportunities.