浏览器端直播推流实现——系统篇

        浏览器端用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;