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

xiaohuatu

已于 2024-11-08 16:27:25 修改

阅读量1k

点赞数 26

分类专栏：技术家园文章标签： vue3 php8.2 swoole5 thinkphp8 nginx-rtmp uniapp

于 2024-11-08 16:26:04 首次发布

本文链接：https://blog.youkuaiyun.com/xiaohuatu/article/details/143628148

版权

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