How to Build a Three‑Way Screen Share with WebRTC and Vue 3

Overview

This guide demonstrates how to build a three‑panel WebRTC demo that simultaneously shows a screen‑share stream, a webcam stream, and a larger preview area using plain HTML and Vue 3. The implementation consists of two source files: index.html and main.js.

HTML Layout (index.html)

The page contains a root element div#app managed by Vue. Inside the container are two div blocks that host three video elements: documentPreview – a large video (800 × 600) that displays the screen‑share stream. videoPreview – a smaller video (300 × 250) that displays the webcam stream.

Vue 3 is loaded from the CDN https://cdn.staticfile.org/vue/3.0.5/vue.global.js and the custom script main.js is included at the end of the body.

JavaScript Logic (main.js)

The Vue app defines a data property currentWebmData (unused in this demo) and invokes _initDevice when the component is mounted.

const App = {
  data() {
    return {
      currentWebmData: null,
    };
  },
  mounted() {
    this._initDevice();
  },
  methods: {
    async _initDevice() {
      // (1) Acquire webcam audio & video
      const cameraConstraints = { video: true, audio: true };
      this._cameraStream = await navigator.mediaDevices.getUserMedia(cameraConstraints);
      this.$refs.videoPreview.srcObject = this._cameraStream;

      // (2) Acquire screen‑share video
      const displayMediaOptions = {
        video: { cursor: "always" },
        audio: false,
      };
      this._documentStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      this.$refs.documentPreview.srcObject = this._documentStream;

      // (3) Optional: merge audio tracks from webcam into screen stream
      // this._cameraStream.getTracks().forEach(t => this._documentStream.addTrack(t));

      // (4) Placeholder for sending streams via RTCPeerConnection
      // e.g., createPeerConnection(), addTrack(), negotiate SDP, etc.
    },
  },
};

Vue.createApp(App).mount('#app');

Key steps:

Call navigator.mediaDevices.getUserMedia with video and audio enabled to obtain the webcam stream.

Assign the webcam stream to the small video element via the Vue

ref

videoPreview

.

Call navigator.mediaDevices.getDisplayMedia with cursor: "always" to capture the screen.

Assign the screen‑share stream to the large video element via the

ref

documentPreview

.

Optional code shows how to combine audio tracks or draw frames onto a canvas for further processing before pushing them through a WebRTC RTCPeerConnection.

Running the Demo

Open the HTML file in a browser that supports WebRTC (Chrome, Edge, or Firefox). The browser will prompt for permission to access the camera and to capture the screen. After granting permission, the two video elements will display the live webcam feed and the selected screen area respectively.

Key Technical Points

Uses standard WebRTC APIs ( getUserMedia and getDisplayMedia) to acquire media streams.

Vue 3 manages component lifecycle; streams are bound to video elements through ref s.

Comments illustrate where to merge audio tracks and where to render streams onto a canvas for custom processing or for sending via RTCPeerConnection.