How to Record and Play Back Screen Sharing with WebRTC and Vue
This tutorial shows how to capture, record, and replay a shared screen using WebRTC's getDisplayMedia and MediaRecorder APIs within a Vue 3 front‑end, providing a live demo link, screenshots, and complete source code for index.html and main.js.
Online Demo
Visit the live demonstration at https://webrtc.tinywan.com/docs-2022/demo-06/index.html to see screen sharing, recording and playback in action.
Screen‑sharing screenshots
Source files
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebRTC实战教程：如何录制共享屏幕和播放</title>
</head>
<body>
<h1>WebRTC实战教程：如何录制共享屏幕和播放</h1>
<div id="app">
<div>
<video ref="preview" width="200" height="150" autoplay></video>
</div>
<div>
<button @click="btnRecordClicked">录制</button>
<button @click="btnPauseClicked">暂停</button>
<button @click="btnResumeClicked">重新录制</button>
<button @click="btnStopClicked">停止</button>
<button @click="btnPlayerClicked">播放</button>
</div>
<div>
<video ref="player" autoplay controls width="400" height="300"></video>
</div>
</div>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script src="main.js"></script>
</body>
</html>main.js
const App = {
data() {
return {
currentWebmData: null,
};
},
mounted() {
this._initDevice();
},
methods: {
async _initDevice() {
// 录制屏幕
this._stream = await navigator.mediaDevices.getDisplayMedia();
this.$refs.preview.srcObject = this._stream;
this._recorder = new MediaRecorder(this._stream, { mimeType: "video/webm;codes=h264" });
// 用.bind(this)来绑定运行环境
this._recorder.ondataavailable = this.recorderDataAvailableHandle.bind(this);
},
recorderDataAvailableHandle(e) {
this.currentWebmData = e.data;
},
btnRecordClicked() {
this._recorder.start();
},
btnPauseClicked() {
this._recorder.pause();
},
btnResumeClicked() {
this._recorder.resume();
},
btnStopClicked() {
this._recorder.stop();
},
btnPlayerClicked() {
this.$refs.player.src = URL.createObjectURL(this.currentWebmData);
}
}
};
var vm = Vue.createApp(App).mount('#app');How it works
The page uses Vue 3 to bind UI controls to the MediaRecorder API. When the user clicks the “录制” button, the _initDevice method obtains a screen‑capture stream via navigator.mediaDevices.getDisplayMedia(), assigns it to the preview video, and creates a MediaRecorder with MIME type video/webm;codes=h264. The recorder’s ondataavailable handler stores the recorded blob in currentWebmData. Additional buttons pause, resume, and stop the recorder, while the “播放” button creates an object URL from the blob and sets it as the source of the playback video.
This client‑side example demonstrates a complete workflow for screen capture, recording, and playback without any server component, making it a useful reference for front‑end developers learning WebRTC and MediaRecorder techniques.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Open Source Tech Hub
Sharing cutting-edge internet technologies and practical AI resources.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.