Record and Play Video with WebRTC Using Vue.js – Step‑by‑Step Guide
This tutorial shows how to request camera access, capture video with MediaRecorder, and play back the recording in a web page using Vue.js, complete with an online demo, screenshots, and full source code for index.html and main.js.
Demo URL
Online demo: https://webrtc.tinywan.com/docs-2022/demo-05/index.html
Camera Access
The script calls
navigator.mediaDevices.getUserMedia({ video: true, audio: false })to request permission for the webcam. After the user grants permission, the resulting MediaStream is assigned to the preview video element ( ref="preview") via srcObject, which displays the live camera feed.
Capture Screenshot
The preview can be frozen into a still image by using the browser’s built‑in screenshot tools; the example shows a static capture of the video stream.
Source Code
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() {
// Request video‑only stream from the camera
this._stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
// Show live stream in the preview element
this.$refs.preview.srcObject = this._stream;
// Create MediaRecorder with explicit WebM/H264 codec
this._recorder = new MediaRecorder(this._stream, { mimeType: "video/webm;codes=h264" });
// Store each recorded chunk when available
this._recorder.ondataavailable = this.recorderDataAvailableHandle.bind(this);
},
recorderDataAvailableHandle(e) {
this.currentWebmData = e.data; // Blob containing the recorded segment
},
btnRecordClicked() {
this._recorder.start(); // Begin recording
},
btnPauseClicked() {
this._recorder.pause(); // Temporarily pause recording
},
btnResumeClicked() {
this._recorder.resume(); // Continue after a pause
},
btnStopClicked() {
this._recorder.stop(); // Finalize recording and trigger ondataavailable
},
btnPlayerClicked() {
// Create a temporary URL for the recorded Blob and play it back
this.$refs.player.src = URL.createObjectURL(this.currentWebmData);
}
}
};
var vm = Vue.createApp(App).mount('#app');Explanation
The _initDevice method obtains a video‑only MediaStream, assigns it to the preview video, and constructs a MediaRecorder with the MIME type video/webm;codes=h264. The recorder’s ondataavailable callback stores the recorded Blob in currentWebmData. The five button handlers control the recorder lifecycle (start, pause, resume, stop) and, when the “播放” button is clicked, a temporary object URL is generated from the blob and set as the source of the playback video element.
This example provides a complete front‑end solution for capturing webcam video, pausing/resuming the capture, and playing back the recorded segment using standard WebRTC APIs and Vue.js. It works in browsers that support MediaRecorder and the specified WebM/H264 codec.
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.