uniapp微信小程序视频实时流+pc端预览方案

方案类型	技术实现	是否免费	优点	缺点	适用场景	延迟范围	开发复杂度
WebSocket+图片帧	定时拍照+Base64传输	✅ 完全免费	无需服务器纯前端实现	高延迟高流量帧率极低	个人demo测试超低频监控	500ms-2s	⭐⭐
RTMP推流	TRTC/即构SDK推流	❌ 付费方案（部分有免费额度）	专业直播方案支持高并发	需流媒体服务器 SDK可能收费	中小型直播场景	1-3s	⭐⭐⭐⭐
开源WebRTC	自建coturn+mediasoup	✅ 开源免费	超低延迟完全可控	需自建信令服务器维护成本高	技术团队内网项目	200-500ms	⭐⭐⭐⭐⭐
商业WebRTC	腾讯TRTC/声网Agora	❌ 付费方案（免费试用）	企业级服务全球节点	按流量/时长计费绑定厂商	商业视频通话应用	200-800ms	⭐⭐⭐⭐
HLS切片方案	FFmpeg切片+nginx	✅ 服务器可自建免费	兼容所有浏览器支持CDN分发	延迟10秒以上	非实时录播场景	10s+	⭐⭐⭐
UDP自定义协议	开发原生插件	✅ 协议层免费 ❌ 人力成本高	完全自定义优化	需原生开发能力过审风险	军工/工业特殊场景	200-500ms	⭐⭐⭐⭐⭐⭐

免费方案选择建议：

完全零成本：
- WebSocket图片帧（仅适合原型验证）
- 开源WebRTC（需技术储备）
轻度付费：
- 腾讯云RTMP（免费10GB/月流量）
- 阿里云直播（免费20GB/月流量）
企业级推荐：
- 声网Agora（首月赠送1万分钟）
- 即构科技（首月免费）

下面我将介绍WebSocket+图片帧的实现方法：

WebSocket + 图片帧传输方案详解

该方案是 Uniapp微信小程序 + PC端视频实时预览 的一种 低成本、纯前端实现 的技术方案，适用于 低帧率、非严格实时 的场景。

🔹 方案原理

小程序端：
- 使用 <camera> 组件获取实时画面。
- 通过 uni.createCameraContext().takePhoto() 定时拍照（如300ms/次）。
- 将图片转为 Base64 格式，通过 WebSocket 发送到服务器。
PC端：
- 建立 WebSocket 连接，接收 Base64 图片数据。
- 使用 <img> 或 <canvas> 连续渲染图片，模拟视频流效果。

uniapp微信小程序端：

<template><view><camera :device-position="devicePosition" :flash="flash" @error="error" style="width:100%; height:300px;"></camera><button @click="startPushing">开始推流</button><button @click="stopPushing">停止推流</button><button @click="switchFlash">切换闪光灯</button><button @click="flipCamera">翻转摄像头</button><button style="font-size: 24rpx;">webscoket连接状态：{{pushState}}</button></view>
</template><script>
export default {data() {return {pushState: "未连接",devicePosition: 'front',flash: 'off',timer: null,ws: null}},methods: {flipCamera() {this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back';},switchFlash() {this.flash = this.flash === 'off' ? 'torch' : 'off';},startPushing() {// 如果已连接，则不再重复连接if (this.pushState === '连接成功') return;const randomToken = new Date().getTime();const url = 'ws://192.168.1.34:7097/liveWebSocket?linkInfo=a-' + randomToken;this.ws = uni.connectSocket({url,success: () => {console.log('正在尝试连接WebSocket', url);}});this.ws.onOpen(() => {uni.showToast({ title: '连接成功' });this.pushState = '连接成功';this.startCapture();});this.ws.onError((err) => {uni.showToast({ title: '连接异常', icon: 'none' });this.pushState = '连接异常';this.stopPushing();});this.ws.onClose(() => {this.pushState = '已关闭';this.stopPushing();});},stopPushing() {if (this.timer) {clearInterval(this.timer);this.timer = null;}if (this.ws) {this.ws.close();this.ws = null;this.pushState = "未连接";}},startCapture() {const context = uni.createCameraContext(this);// 调整为300ms间隔，减轻设备压力this.timer = setInterval(() => {context.takePhoto({quality: 'low',success: (res) => {this.processAndSendImage(res.tempImagePath);},fail: (err) => {console.error('拍照失败:', err);}});}, 300);},processAndSendImage(tempImagePath) {uni.getFileSystemManager().readFile({filePath: tempImagePath,encoding: 'base64',success: (res) => {const base64Image = `data:image/jpeg;base64,${res.data}`;if (this.ws) {this.ws.send({data: base64Image,success: () => {console.log('图片发送成功');this.cleanTempFile(tempImagePath);},fail: (err) => {console.warn('图片发送失败:', err);}});}},fail: (err) => {console.warn('读取图片失败:', err);}});},cleanTempFile(filePath) {setTimeout(() => {uni.getFileSystemManager().removeSavedFile({filePath,success: () => {console.log('临时文件已删除');},fail: (err) => {console.warn('删除临时文件失败:', err);}});}, 2000);},error(e) {console.error('摄像头错误:', e);}},onUnload() {this.stopPushing();}
}
</script>

pc端预览：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>管理员监控页面</title><script src="./vue2.js"></script>
</head><body><div id="app"><button @click="toSend">开始请求</button><div v-if="videos && videos.length> 0" style="display: flex;"><div v-for="item in videos" :key="item.sessionId" style="margin: 10px;display: flex;flex-flow: column;":id="item.sessionId">状态：{{item.status}}<img :src="item.videoSrc" style="width: 200px; height: 200px; border: 1px solid red;" alt=""></div></div><div style="background-color: green;margin: 20px 0;display: flex;width: 50%;word-wrap: break-word">接口数据：<div v-html="datas"></div></div><div style="background-color: red;width: 50%">视频列表：<template v-if="videos && videos.length> 0"><p v-for="item2 in videos">{{item2}}</p></template></div></div><script>new Vue({el: '#app',data: {datas: "",videos: [// {//     sessionId: '1',//     status: '未连接',//     videoSrc: '' //图片帧// }]},mounted() {},methods: {// 开始请求toSend() {//断开所有webscoket连接if (this.videos && this.videos.length > 0) {this.videos.forEach(item => {if (item.ws) {item.ws.close();}});}this.datas = "";this.videos = [];// 请求直播人员列表fetch('http://192.168.1.34:7097/liveWebStock/getAcceptList').then(response => response.json()).then(data => {if (data.code == 200) {// console.log(6666, data.data); this.datas = data.data;// 初始化每个视频流对象并建立 WebSocket this.videos = data.data.map(item => ({...item,status: '未连接',videoSrc: '',ws: null}));// 建立 WebSocket 连接this.videos.forEach(item => {this.initWebSocket(item.sessionId);});}}).catch(error => {console.error('请求直播人员列表失败:', error);});},initWebSocket(sessionId) {if (!sessionId) return;const wsUrl = `ws://192.168.1.34:7097/liveWebSocket?linkInfo=b-${sessionId}`;const index = this.videos.findIndex(v => v.sessionId === sessionId);if (index === -1) return;const ws = new WebSocket(wsUrl);ws.onopen = () => {this.$set(this.videos, index, {...this.videos[index],status: '已连接到服务器',ws});};//  处理接收到的数据ws.onmessage = (event) => {console.log("接收到base64图片", event);// 假设是 base64 数据const base64Data = event.data;const url = base64Data;this.$set(this.videos, index, {...this.videos[index],videoSrc: url});};ws.onerror = (error) => {this.$set(this.videos, index, {...this.videos[index],status: `WebSocket 错误: ${error.message}`});console.error(`WebSocket 错误 (${sessionId}):`, error);};ws.onclose = () => {this.$set(this.videos, index, {...this.videos[index],status: 'WebSocket 连接已关闭'});};}}});</script>
</body></html>