本文的前提是你已经吧需拉流的url从后端引出了,只需在前端使用即可

@Entry
@Component
struct VideoPage {
    private cameraService:Test=new Test();//你需从后端引出你的url
    private avPlayer:media.AVPlayer | null =null;//声明并初始化 avPlayer 属性
    private videoUrl:string='';

  async aboutToAppear(){
    await this.initPlayer();//检查和初始化url用
  }

  async initPlayer(){
    this.videoUrl =await this.cameraService.getStreamUrl() || "";
    if (!this.videoUrl) {
      console.error("无法获取视频流地址")
      return;
    }

    //创建AVPlayer实例
    this.avPlayer =await media.createAVPlayer();

    //配置播放源
    this.avPlayer.url = this.videoUrl;

    //准备播放
    await this.avPlayer.prepare()

    try {
      await this.avPlayer.play();
      console.log("摄像头流开始播放");
    } catch (err) {
      console.error(`播放失败: ${JSON.stringify(err)}`);
    }

}

   onPageHide(){
    //释放播放器资源
    if (this.avPlayer) {
      this.avPlayer.stop();
      this.avPlayer.release();
      this.avPlayer=null;
    }
  }



build() {
    Column() {
        Column() {
        // 视频预览区域
        Video({
          controller:null//不显示默认控制条
        })
          .controls(false)//隐藏控制条
          .autoPlay(true)//自动播放
          .onPrepared(()=>console.log("视频准备就绪"))
          .onError(()=>console.error("适配播放出错"))
          .width("100%")
          .height(250)
          .backgroundColor("#000")
      }
      .width('100%')
      .height('100%')
      .margin({ top: 10 });
   }
}

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐