在手机端页面中打开设备音视频对讲功能无效页面空白？开发环境uni-app + vue2

cus7 · poston 2025-10-18 16:24

在手机端页面中打开设备音视频对讲功能无效页面空白？开发环境uni-app + vue2

请问在手机上（uni-app + vue2 开发）集成有demo吗？
我这边使用那个链接 https://www.npmjs.com/package/@besovideo/webrtc-player ，使用音视频功能，发现在手机上看到页面是空白的（怀疑是兼容性问题？？？）控制台没有其报他跟组件有关的错误，电脑端浏览器正常可以打开设备视频。

IBeli · poston 2025-10-18 16:52

你好，这个页面显示不正常，应该是player.css注释掉了，css导入正常就会有喊话的控件了。
由于您是在webview 中进行开发的，近似等同于web开发，可以参考我们web开发的对讲demo。

liliangliang · poston 2025-10-18 19:27

手机端也要使用最新的Chrome浏览器打开，可以先试下我们的demo能不能正常看，播放组件是不是最新的

cus7 · poston 2025-10-19 15:12

好的感谢。
现在还存在两个问题：
1、在手机上打开页面可以看到视频，但是不能对讲？？？点击视频画面右下角麦克风按钮，显示打开失败。

2、语音通话，页面如何绘制。有代码吗？可以打开设备声音，但是没有任何按钮画面看不到。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./player/main.browser.css" type="text/css" rel="stylesheet" />
<script src="./player/main.browser.js"/>
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.4.js"></script>
<title>语音通话</title>
<style>
body {
// height: 500px;
// background-color: red;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
console.log("打开webview页面....html");
const playerEle = document.createElement("div")
playerEle.style.height = "300px"
playerEle.style.width = "100%"
playerEle.style.backgroundColor = "black"
document.body.appendChild(playerEle);
const {instance} = window.bvPlayer.Intercom({
// (可选) 容器节点注意一个容器内只能存在一个实例当container为假值（包括false、null、undefined）时将返回实例引用的dom节点容器必须指定高度参考高德地图
container: playerEle,
// 必填设备选项
puOption: {
// 设备id
id: "UA_XXXXXX",
// 设备通道号
index: 0,
},
// 必填用户授权令牌
token: "",
// (可选) 传输协议
type: "webrtc",
// (可选) 指定请求url路径前缀可使用protocol+host 如：http://192.168.88.11:9780
apiPrefix: "http://192.168.0.111:9780",
// (可选) 设置最大重连间隔(s)，默认不自动重连，setDefaultProps设置的maxReconnectInterval高于props
maxReconnectInterval: 30,
locale: "zh",
// (可选) 连接建立后回调
onConnected: () => {
console.log("设备已连接。。。");
},
// (可选) 连接建立失败时的回调
onConnectedFailed: () => {
console.log("设备连接失败！！！");
},
// (可选) 连接断开后回调
onDisConnected: () => {
console.log("设备断开失败！！！");
},
// (可选) token 失效回调
onTokenFail: () => {
console.log("token失效！！！");
},
});
instance.open();
</script>
</html>

copycode

liliangliang · poston 2025-10-19 15:54

需要浏览器给与麦克风权限，向设备语音通话可以用播放组件的对讲控件

		autoLogin	forgetPW
passwd			registerNow

在手机端页面中打开设备音视频对讲功能无效页面空白？开发环境uni-app + vue2

本帖子中包含更多资源