更新记录

1.0.0（2025-05-25）

• 发布插件

平台兼容性

温馨提示 如何调用插件

  //UI中添加这个配置
  <native-rtcplayer id="rtcplayer" :width="450" :height="1500"></native-rtcplayer>

  //js导入
  import { CreateNativeRTCPlayerContext, INativeRTCPlayerContext, OnCallBackOptions } from "@/uni_modules/yuange-screenRtcPlay";

  //全局定义context
  let context : INativeRTCPlayerContext | null = null;

初始化

 //初始化
init() {
  context = CreateNativeRTCPlayerContext("rtcplayer", this);
}

开始播放

  play() {
  context?.play(
  "http://192.168.31.12:1985", // rtc api接口地址：xxxx/rtc/v1/play/
  "webrtc://192.168.31.12/live/livestream", //webrtc流地址
  450, //<native-rtcplayer :width="450"> 容器的宽度用于计算视频显示比例，可自由调整
  {
    success(res) {
      console.log(res);
    },
    fail(err) {
      console.log(err);
    }
  } as OnCallBackOptions)
}

停止播放

stop() {
  context?.stop({
    success(res) {
      console.log(res);
    },
    fail(err) {
      console.log(err);
    }
  } as OnCallBackOptions)
}

示例

<template>
  <view style="background-color: black;height: 100%;width: 100%;">

    <button type="primary" @tap="init">webrtc初始化</button>
    <button type="primary" @tap="play">webrtc播放</button>
    <button type="primary" @tap="stop">webrtc停止</button>
    <native-rtcplayer id="rtcplayer" :width="450" :height="1500"></native-rtcplayer>
  </view>
</template>

<script>
  import { CreateNativeRTCPlayerContext, INativeRTCPlayerContext, OnCallBackOptions } from "@/uni_modules/yuange-screenRtcPlay";

  let context : INativeRTCPlayerContext | null = null;

  export default {
    data() {
      return {
        title: ''
      }
    },

    methods: {

      //初始化
      init() {
        context = CreateNativeRTCPlayerContext("rtcplayer", this);
      },

      play() {
        context?.play("http://192.168.31.12:1985", "webrtc://192.168.31.12/live/livestream", 450, {
          success(res) {
            console.log(res);
          },
          fail(err) {
            console.log(err);
          }
        } as OnCallBackOptions)
      },
      stop() {
        context?.stop({
          success(res) {
            console.log(res);
          },
          fail(err) {
            console.log(err);
          }
        } as OnCallBackOptions)
      }

    }
  }
</script>

<style>
  .native-player {
    height: 500px;
    width: 500px;
    margin: 25px auto 25px auto;
  }
</style>