Sometimes, it can be useful to be able to take screenshots from a video during videoconferencing. In this recipe, we will implement such a feature.
No specific preparation is necessary for this recipe. You can take any basic WebRTC videoconferencing application. We will add some code to the HTML and JavaScript parts of the application.
Follow these steps:
First of all, add image and canvas objects to the web page of the application. We will use these objects to take screenshots and display them on the page:
<img id="localScreenshot" src=""> <canvas style="display:none;" id="localCanvas"></canvas>
Next, you have to add a button to the web page. After clicking on this button, the appropriate function will be called to take the screenshot from the local stream video:
<button onclick="btn_screenshot()" id="btn_screenshot">Make a screenshot</button>
Finally, we need to implement the screenshot taking function:
function btn_screenshot...