浏览器端用vue3.5.12写,服务器端用php8.2+swoole5.1.4+thinkphp8写,流媒体服务器使用nginx-rtmp模块,拉流App端用uniapp(其他端各自实现吧,这里以App端为例)
操作系统基于opencloudos8,还用到了ffmpeg,该安装就安装,这里不啰嗦安装步骤
以下是vue的代码,比较简陋,各自整理
<template>
<div>
<video ref="videoElement" autoplay></video>
</div>
<div>
<button @click="startMediaStream">开始获取媒体流</button>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const videoElement = ref(null);
const ws = ref(null);
const localStream = ref(null);
onMounted( () => {
ws.value = new WebSocket('ws://192.168.0.113:9502');
ws.value.onopen = function(event) {
console.log('WebSocket 连接已打开', event);
};
ws.value.onerror = function(error) {
console.log('WebSocket 出错', error);
};
ws.value.onmessage = function(event) {
console.log('收到消息', event.data);
// 处理接收到的数据
};
ws.value.onclose = function(event) {
console.log('WebSocket 连接已关闭', event);
};
});
function startMediaStream() {
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
localStream.value = stream;
// 将音视频流发送到服务器(通过WebSocket)
startSendingStream();
if ("srcObject" in videoElement.value) {
videoElement.value.srcObject = stream;