uniapp小程序直播demo

Uniapp 是一个跨平台的应用开发框架，可以同时开发小程序、H5、App 等应用。下面是一个基于 Uniapp 平台开发的小程序直播 demo 的示例代码：

首先，在 Uniapp 项目中引入 WebRTC 相关的库，如 webrtc-adapter、webrtc.js 等。

在 pages 目录下创建一个直播页面，如 Live.vue，其中包含一个 video 标签用于显示视频流。

<template>
  <view>
    <video id="remoteVideo" :src="remoteStream" autoplay muted></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      peerConnection: null,
      remoteStream: null,
      socket: null,
      roomId: null
    };
  },

  created() {
    this.initSocket();
    this.initPeerConnection();
    this.joinRoom();
  },

  methods: {
    initSocket() {
      this.socket = uni.connectSocket({
        url: 'wss://example.com/live/socket'
      });

      this.socket.onOpen(() => {
        console.log('WebSocket connected');
      });

      this.socket.onMessage(event => {
        const message = JSON.parse(event.data);

        switch (message.type) {
          case 'offer':
            this.handleOffer(message.data);
            break;

          case 'candidate':
            this.handleCandidate(message.data);
            break;

          case 'close':
            this.handleClose();
            break;
        }
      });

      this.socket.onClose(() => {
        console.log('WebSocket disconnected');
      });
    },

    initPeerConnection() {
      const config = {
        iceServers: [
          {
            urls: ['stun:example.com:3478']
          },
          {
            urls: ['turn:example.com:3478'],
            username: 'username',
            credential: 'password'
          }
        ]
      };

      this.peerConnection = new RTCPeerConnection(config);

      this.peerConnection.ontrack = event => {
        console.log('Remote stream received');
        this.remoteStream = URL.createObjectURL(event.streams[0]);
      };

      this.peerConnection.onicecandidate = event => {
        if (event.candidate) {
          this.socket.send({
            type: 'candidate',
            data: event.candidate
          });
        }
      };
    },

    joinRoom() {
      this.socket.send({
        type: 'join',
        data: {
          roomId: this.roomId
        }
      });
    },

    createOffer() {
      this.peerConnection.createOffer().then(offer => {
        this.peerConnection.setLocalDescription(offer);
        this.socket.send({
          type: 'offer',
          data: offer
        });
      });
    },

    handleOffer(offer) {
      this.peerConnection.setRemoteDescription(new RTCSessionDescription(offer));

      this.peerConnection.createAnswer().then(answer => {
        this.peerConnection.setLocalDescription(answer);
        this.socket.send({
          type: 'answer',
          data: answer
        });
      });
    },

    handleCandidate(candidate) {
      this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
    },

    handleClose() {
      console.log('Peer connection closed');
    }
  }
};
</script>
在入口页面中添加一个链接到直播页面的按钮，并传递房间号作为参数。

<template>
  <view class="container">
    <button @click="startLive(roomId)">Start Live</button>
  </view>
</template