MediaRecorder录制和传输视频
MediaRecorder 是 HTML5 提供的一个 API，用于在浏览器中录制音频和视频。结合 WebRTC 和 WebSocket 或其他传输协议，你可以将录制的视频实时传输到服务器或其他客户端。以下是一个简单的示例，展示如何使用 MediaRecorder 录制视频并通过 WebSocket 传输到服务器。
1. 录制视频
首先，使用 MediaRecorder 录制视频：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediaRecorder Example</title>
</head>
<body>
<video id="localVideo" autoplay playsinline></video>
<button id="startButton">Start Recording</button>
<button id="stopButton" disabled>Stop Recording</button>
<script>
let mediaRecorder;
let recordedChunks = [];
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const localVideo = document.getElementById('localVideo');
startButton.addEventListener('click', async () => {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
localVideo.srcObject = stream;
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
uploadVideo(blob);
recordedChunks = [];
};
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
});
async function uploadVideo(blob) {
const formData = new FormData();
formData.append('video', blob, 'recording.webm');
try {
const response = await fetch('/upload', {
method: 'POST',
body: formData,
});
if (response.ok) {
console.log('Video uploaded successfully');
} else {
console.error('Video upload failed');
}
} catch (error) {
console.error('Error uploading video:', error);
}
}
</script>
</body>
</html>2. 服务器端处理
在服务器端，你可以使用 Node.js 和 express 来处理上传的视频文件。以下是一个简单的示例：
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('video'), (req, res) => {
if (!req.file) {
return res.status(400).send('No file uploaded.');
}
console.log('File uploaded:', req.file);
res.send('File uploaded successfully.');
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});3. 实时传输
如果你希望实时传输视频流，而不是录制后再上传，可以使用 WebRTC 和 WebSocket。以下是一个简单的示例：
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const localVideo = document.getElementById('localVideo');
let mediaStream;
let peerConnection;
let socket;
startButton.addEventListener('click', async () => {
mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
localVideo.srcObject = mediaStream;
// 连接到 WebSocket 服务器
socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
console.log('WebSocket connection established');
startWebRTC();
};
socket.onmessage = async (event) => {
const message = JSON.parse(event.data);
if (message.sdp) {
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp));
} else if (message.ice) {
await peerConnection.addIceCandidate(new RTCIceCandidate(message.ice));
}
};
startButton.disabled = true;
stopButton.disabled = false;
});
stopButton.addEventListener('click', () => {
mediaStream.getTracks().forEach(track => track.stop());
socket.close();
startButton.disabled = false;
stopButton.disabled = true;
});
async function startWebRTC() {
peerConnection = new RTCPeerConnection();
mediaStream.getTracks().forEach(track => {
peerConnection.addTrack(track, mediaStream);
});
peerConnection.onicecandidate = event => {
if (event.candidate) {
socket.send(JSON.stringify({ ice: event.candidate }));
}
};
peerConnection.ontrack = event => {
const remoteVideo = document.createElement('video');
remoteVideo.srcObject = event.streams[0];
remoteVideo.autoplay = true;
document.body.appendChild(remoteVideo);
};
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
socket.send(JSON.stringify({ sdp: offer }));
}在服务器端，你需要处理 WebSocket 消息并转发 SDP 和 ICE 候选者：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
const parsedMessage = JSON.parse(message);
if (parsedMessage.sdp) {
// 转发 SDP 到其他客户端
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(parsedMessage));
}
});
} else if (parsedMessage.ice) {
// 转发 ICE 候选者到其他客户端
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(parsedMessage));
}
});
}
});
});4. 注意事项
- 跨浏览器兼容性：
MediaRecorder和WebRTC在不同浏览器中的支持程度可能有所不同，建议在使用前检查兼容性。 - 安全性：在处理用户媒体流时，确保遵守隐私和安全最佳实践，例如仅在用户明确同意的情况下访问摄像头和麦克风。
- 性能：实时视频传输对网络带宽和服务器性能要求较高，确保你的基础设施能够处理这些负载。
通过这些步骤，你可以使用 MediaRecorder 录制视频并将其传输到服务器或其他客户端。
相关·内容
1回答
应用程序将使用MediaRecorder在后台录制视频，我可以将其存储到SD卡中。我正在尝试Wowza Media engine来流式传输这段录制的视频，但视频无法传输。()); mediaRecorder.setAudioSource(MediaRecorder.AudioSource.CAMCORDER);
浏览 0提问于2014-09-18得票数 2
当我们试图播放录制的音频和视频时，我们不会得到警告的任何解决方案。警告是 recorder.setVideoSource(MediaRecorder.VideoSource.DEFAULT);
recorder.setAudioSourcerecorder.setOutputFile(OUTPUT_FILE)
浏览 6提问于2011-07-28得票数 0
回答已采纳
我正在尝试编写一个应用程序，记录一个设备上的视频，并通过WiFi-Direct发送到另一个设备。 现在，我已经在用MediaRecorder录制视频时遇到了麻烦。的输出文件时，mediaRecorder.prepare()和mediarecorder.start()工作，但当我调用mediaRecorder.stop()方法时，我的应用程序崩溃。我也尝试了一些我发现的示例代码，直接使用ParcelFileDescriptor pfd = ParcelF
浏览 30提问于2018-12-24得票数 0
我想把视频从android手机摄像头流到PC上运行的VLC媒体播放器。 InetAddress serverAddr = InetAddress.getByName("192.168.2.8");
浏览 3提问于2011-03-02得票数 1
回答已采纳
.'); mediaRecorder.start(); if (event.data.size > 0) {_remoteAudio = el;
浏览 1提问于2018-07-18得票数 2
2回答
在android中，如何在媒体录制器启动前显示预览界面。我的应用程序有视频录制功能，当我导航到视频录制片段时，它会显示黑屏，当我使用开始按钮开始录制时，相机预览是显示和录制开始。如何在录制前开始预览。= new MediaRecorder();mediaRecorder.setCamera(camera);
mediaRecorder.setAu
浏览 2提问于2013-10-04得票数 6
是否可以使用ffserver通过ffmpeg流式传输实时摄像头视频？1.使用ffserver编译并构建ffmpeg。2.通过MediaRecorder录制视频，并将提要直接发送到ffserver，后者将通过rtp流式传输。
我猜通过这种方式，我将获得编码的音频和视频流，ffserver将通过rtp流式传输它。
浏览 3提问于2013-09-15得票数 0
我正在尝试使用媒体选项使用getDisplayMedia录制谷歌会议的音频和视频。我可以通过getDisplayMedia录制我的屏幕，但无法录制谷歌会议中的语音。我如何使用被动录制，或者是否有任何方法可以通过任何机制或代码在google meet中录制屏幕、音频和视频？navigator.mediaDevices.getDisplayMedia({audio: true,video: true});
let me
浏览 46提问于2021-02-08得票数 2
我正在开发一个应用程序，在该应用程序中，MediaRecorder将视频文件录制5秒，然后再次开始录制并继续。正在录制的视频应该是5秒，但我的问题是，我们需要停止MediaRecorder，然后再次准备MediaRecorder，这会导致屏幕上闪烁，并产生启动和停止声音。我想要实现的是媒体录像机继续录制5秒的视频文件，但用户不应该注意到，视频正在被录制，屏幕没有得
浏览 1提问于2014-09-01得票数 0
例如，我试图开发一个简单的应用程序，它可以录制视频并使用TextureView进行预览。然而，就我阅读Android API文档而言，标准MediaRecorder需要特定的表面才能进行视频录制，但另一方面，TextureView不再有自己的表面，因此TextureView和MediaRecorder有谁知道如何使用带有TextureView的标准MediaRecorder作为相机预览来录制视频吗？或者，除了
浏览 17提问于2012-03-21得票数 13
在我的应用程序中，我录制了一段视频，然后播放。为了录制视频，我使用了以下代码 mediaRecorder.setVideoSource(MediaRecorder.VideoSource.DEFAULT);
mediaRecorder.setOutputFormat(Med
浏览 2提问于2011-11-16得票数 12
回答已采纳
我会假设它正在录制一些东西，但我不确定它是否是来自我计算机的麦克风。是否有人可以确认这些值可能来自于什么，以及是否可以使用仿真器进行记录。AudioRecord.getMinBufferSize(frequency,channelConfiguration,audioEncoding);
AudioRecord audioRecord = new AudioRecord(MediaRecorder.AudioSource.MIC
浏览 1提问于2010-12-13得票数 5
回答已采纳
2回答
当我们将尝试使用MediaRecorder录制视频视频在安卓和设备中录制正确，它将像录制一样显示，但当我们可以播放视频在VLC或桌面上的其他播放器的时候，它会旋转视频，它将无法正常显示。我可以把MediaRecorder setOrientationHint调到90度。
改变方向有什么问题?为什么？
浏览 1提问于2014-08-06得票数 3
2回答
如何添加过滤在视频录制和保存后也在安卓..？mediaRecorder = new MediaRecorder();
mediaRecorder.setCamera(mCamera);
mediaRecorder.setVideoSource(MediaR
浏览 5提问于2015-11-03得票数 0
回答已采纳
2回答
我开发了一个在上播放视频的安卓应用程序。我想录制流媒体视频。为了做到这一点，我尝试使用示例。它在视频录制方面做得很好，但是我失去了我的流。有两个主要的java类，比如A和B。有一种方法可以开始录制视频，5秒后停止录制。(); // stop the recording }, 5000);开始录制后，不会调用onPreviewFrame方法
浏览 8提问于2018-07-05得票数 4
如何在不停止服务录制的情况下重置MediaRecorder.setVideoSize我们怎样才能在录制视频时更改setVideoSize呢？例如，如果以前使用portrait方向，则高度和宽度设置为960/540，现在当方向更改
浏览 0提问于2017-10-19得票数 0
1回答
我可以录制视频，但无法获得该视频的音频。有人可以帮我同时录制视频和音频吗？我的代码如下：mr.setAudioSource(MediaRecorder.AudioSource.MIC);setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
浏览 5提问于2011-05-06得票数 2
5回答
我想提取视频的一些部分，当用户正在通过我的应用程序播放视频。在播放视频时，用户可以给出开始和结束的持续时间来剪切视频。那么有没有办法根据时长来裁剪视频并保存到SD卡中呢？
浏览 0提问于2012-07-18得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
即时通信 IM
云直播
实时音视频活动推荐
腾讯云开发者
