uni-app vue3模式下uni.createLivePlayerContext is not a function

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app vue3模式下uni.createLivePlayerContext is not a function

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.8.12

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米10

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

操作步骤：

<template>
<view class="content">
<view class="player-content">  
    <live-player id="livePlayer" ref='livePlayer' class="live-player" catchtouchmove :src="sourceUrl" autoplay  
        background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">  
        <view class="player-tool" style="bottom:-60rpx">  
            <view class="tools">  
                ghjgj  
            </view>  
        </view>  
    </live-player>  

</view>  
</view>  
</template>  

<script setup>
import {
ref
} from "vue"
uni.createLivePlayerContext("livePlayer")
</script>  

<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;

.player-content {
    position: relative;
    width: 100%;
    height: 450rpx;
    display: flex;
    background-size: 100% 100%;

    .live-player {
        width: 100%;
        height: 100%;
        position: relative;
    }
}
//播放器弹出工具
.player-tool {
    width: 100%;
    height: 60rpx;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    padding: 0 45rpx;
    transition: all 0.3s;

    .tools {
        height: 100%;
        width: auto;
        display: flex;
        align-items: center;

        .full-screen {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .iconfont {
                color: #fff;
                font-weight: bold;

            }
        }

        .cruise {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 25rpx;

            .iconfont {
                color: #E45A3E;
                font-size: 45rpx;
            }
        }
    }

}
</style>

预期结果：

<template>
<view class="content">
<view class="player-content">  
    <live-player id="livePlayer" ref='livePlayer' class="live-player" catchtouchmove :src="sourceUrl" autoplay  
        background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">  
        <view class="player-tool" style="bottom:-60rpx">  
            <view class="tools">  
                ghjgj  
            </view>  
        </view>  
    </live-player>  

</view>  
</view>  
</template>  

<script setup>
import {
ref
} from "vue"
uni.createLivePlayerContext("livePlayer")
</script>  

<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;

.player-content {
    position: relative;
    width: 100%;
    height: 450rpx;
    display: flex;
    background-size: 100% 100%;

    .live-player {
        width: 100%;
        height: 100%;
        position: relative;
    }
}
//播放器弹出工具
.player-tool {
    width: 100%;
    height: 60rpx;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    padding: 0 45rpx;
    transition: all 0.3s;

    .tools {
        height: 100%;
        width: auto;
        display: flex;
        align-items: center;

        .full-screen {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .iconfont {
                color: #fff;
                font-weight: bold;

            }
        }

        .cruise {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 25rpx;

            .iconfont {
                color: #E45A3E;
                font-size: 45rpx;
            }
        }
    }

}
</style>

实际结果：

<template>
<view class="content">
<view class="player-content">  
    <live-player id="livePlayer" ref='livePlayer' class="live-player" catchtouchmove :src="sourceUrl" autoplay  
        background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">  
        <view class="player-tool" style="bottom:-60rpx">  
            <view class="tools">  
                ghjgj  
            </view>  
        </view>  
    </live-player>  

</view>  
</view>  
</template>  

<script setup>
import {
ref
} from "vue"
uni.createLivePlayerContext("livePlayer")
</script>  

<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;

.player-content {
    position: relative;
    width: 100%;
    height: 450rpx;
    display: flex;
    background-size: 100% 100%;

    .live-player {
        width: 100%;
        height: 100%;
        position: relative;
    }
}
//播放器弹出工具
.player-tool {
    width: 100%;
    height: 60rpx;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    padding: 0 45rpx;
    transition: all 0.3s;

    .tools {
        height: 100%;
        width: auto;
        display: flex;
        align-items: center;

        .full-screen {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .iconfont {
                color: #fff;
                font-weight: bold;

            }
        }

        .cruise {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 25rpx;

            .iconfont {
                color: #E45A3E;
                font-size: 45rpx;
            }
        }
    }

}
</style>

bug描述：

vue3模式下uni.createLivePlayerContext is not a function


3 回复

刚测试了下，微信小程序没问题 <live-player
id=“liveplayer”
src=“https://domain/pull_stream”
mode=“live”
:autoplay=“true”
orientation=“vertical”
object-fit=“fillCrop”
@statechange=“statechange”
@error=“error”
>
</live-player> fgffffff(){
let player = uni.createLivePlayerContext(‘liveplayer’, this);
console.log(‘aaaa’,player);

        },<br><img src="https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/answer/20231122/39b34f61bd2d751b56756ad0b58320c8.jpg" class="img-polaroid" alt=""><br>

app端不支持，参考文档

在 uni-app 的 Vue3 模式下，如果你遇到 uni.createLivePlayerContext is not a function 的错误，可能是以下原因之一：

1. API 不支持或未正确引入

uni.createLivePlayerContext 是用于创建直播播放器上下文的 API。如果你在 Vue3 模式下使用这个 API，确保它在你所使用的平台（如微信小程序、H5 等）上是支持的。

  • 检查平台支持：uni.createLivePlayerContext 主要用于小程序平台（如微信小程序）。如果你在其他平台（如 H5）上使用，可能会报错。
  • 引入正确的 API：确保你在正确的环境中使用这个 API。如果你在小程序中使用，确保你已经在 manifest.json 中正确配置了小程序的相关设置。

2. uni-app 版本问题

如果你使用的 uni-app 版本较旧，可能不支持 uni.createLivePlayerContext。建议你升级到最新版本的 uni-app。

npm update [@dcloudio](/user/dcloudio)/uni-app

3. Vue3 模式下的兼容性问题

Vue3 模式下，某些 API 可能需要进行额外的配置或处理。如果你确定 uni.createLivePlayerContext 在你所使用的平台上支持，但仍然报错，可以尝试以下方法：

  • 使用 getApp() 获取实例：在小程序中，你可以使用 getApp() 获取全局的 App 实例，然后通过 App 实例来访问 createLivePlayerContext。
  • 检查生命周期钩子：确保你在组件的 mounted 或 onReady 生命周期钩子中调用 uni.createLivePlayerContext，以确保组件已经挂载。

4. 示例代码

以下是一个在微信小程序中使用 uni.createLivePlayerContext 的示例：

<template>
  <live-player id="myLivePlayer" src="https://example.com/live.stream" autoplay></live-player>
</template>

<script>
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      const livePlayerContext = uni.createLivePlayerContext('myLivePlayer');
      livePlayerContext.play();
    });

    return {};
  },
};
</script>

5. 调试与排查

  • 检查控制台错误：查看控制台是否有其他错误信息，可能会提供更多线索。
  • 使用 console.log 调试：在调用 uni.createLivePlayerContext 之前，使用 console.log 输出 uni 对象，检查 createLivePlayerContext 是否存在。
console.log(uni);
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！