Tutorial step 2:
A videophone needs to show the person you are talking to, and preferably also a little picture of yourself. Let us add those two video screens to our client:
<!DOCTYPE html>
<html><head>
<script type="module">
import { wrtcObject} from "/luci-static/resources/wrtc_kit_m.js";
const wrtc = new wrtcObject();
</script>
</head><body>
<video id="localVideo" width="200px" autoplay="autoplay" muted="true"></video>
<video id="remoteVideo" width="300px" autoplay="autoplay"></video>
</body></html>
By naming the smaller video window localVideo wrtc_kit will automatically find it and show the pictures of your local camera in it.
By naming the larger video window remoteVideo wrtc_kit will automatically find it and show the pictures of the person you are speaking to in it.
If you for some reason want to have other id on your video windows you can set the wrtc object's wrtc.localVideo and call.remoteVideo properties to them.
We mute the sound of your own video to avoid audio feedback and distortions.