uniapp实现简单版APP端推拉流

思路：流形式推送与拉取，前端可以通过live-pusher组件获取到画面和声音并推送至后端服务器指定地址；前端需要播放音视频的页面使用video组件播放后端服务器指定地址即可。
 

用到工具：
1.OBS： obs studio
2. 本地打开直播模拟流形式视频来源  smart_rtmpd

效果图：

测试代码：

1.推流：url地址绑定自己后端服务器指定地址
1.1：HTML
 

<template>
  <!--(推流) -->
  <view>
    <live-pusher
      id="livePusher"
      ref="livePusher"
      class="livePusher"
      url=""
      mode="SD"
      :muted="true"
      :enable-camera="true"
      :auto-focus="true"
      :beauty="1"
      whiteness="2"
      aspect="9:16"
      @statechange="statechange"
      @netstatus="netstatus"
      @error="error"></live-pusher>
    <button class="btn" @click="start">开始推流</button>
    <button class="btn" @click="pause">暂停推流</button>
    <button class="btn" @click="resume">恢复推流</button>
    <button class="btn" @click="stop">停止推流</button>
    <button class="btn" @click="snapshot">快照</button>
    <button class="btn" @click="startPreview">开启摄像头预览</button>
    <button class="btn" @click="stopPreview">关闭摄像头预览</button>
    <button class="btn" @click="switchCamera">切换摄像头</button>
  </view>
</template>

1.2:JAVASCRIPT

<script>
export default {
  data() {
    return {};
  },
  onReady() {
    // 注意：需要在onReady中 或 onLoad 延时
    this.context = uni.createLivePusherContext("livePusher", this);
  },
  methods: {
    statechange(e) {
      console.log("statechange:" + JSON.stringify(e));
    },
    netstatus(e) {
      console.log("netstatus:" + JSON.stringify(e));
    },
    error(e) {
      console.log("error:" + JSON.stringify(e));
    },
    start: function () {
      this.context.start({
        success: (a) => {
          console.log("livePusher.start:" + JSON.stringify(a));
        },
      });
    },
    close: function () {
      this.context.close({
        success: (a) => {
          console.log("livePusher.close:" + JSON.stringify(a));
        },
      });
    },
    snapshot: function () {
      this.context.snapshot({
        success: (e) => {
          console.log(JSON.stringify(e));
        },
      });
    },
    resume: function () {
      this.context.resume({
        success: (a) => {
          console.log("livePusher.resume:" + JSON.stringify(a));
        },
      });
    },
    pause: function () {
      this.context.pause({
        success: (a) => {
          console.log("livePusher.pause:" + JSON.stringify(a));
        },
      });
    },
    stop: function () {
      this.context.stop({
        success: (a) => {
          console.log(JSON.stringify(a));
        },
      });
    },
    switchCamera: function () {
      this.context.switchCamera({
        success: (a) => {
          console.log("livePusher.switchCamera:" + JSON.stringify(a));
        },
      });
    },
    startPreview: function () {
      this.context.startPreview({
        success: (a) => {
          console.log("livePusher.startPreview:" + JSON.stringify(a));
        },
      });
    },
    stopPreview: function () {
      this.context.stopPreview({
        success: (a) => {
          console.log("livePusher.stopPreview:" + JSON.stringify(a));
        },
      });
    },
  },
};
</script>

2.拉流：url地址绑定自己后端服务器指定地址
2.1 HTML:

<template>
  <!-- 视频会诊(拉流) -->
  <view>
    <video :src="pullSrc" class="pullVideo"></video>
  </view>
</template>

2.2JAVASCRIPT(以下地址是我本地测试地址):
 

<script>
export default {
  data() {
    return {
      pullSrc: "rtmp://192.168.100.28/live/stream",
    };
  },
  methods: {},
};
</script>

2.3CSS:

<style>
.pullVideo {
  width: 100vw;
  height: 50vh;
}
</style>