<template>
<div class="real_time_extract_img">
<x-header :left-options="{backText: '', preventGoBack: true}" @on-click-back="onBack">测试</x-header>
<div class="player" id="playerRef"></div>
<button @click="snapshot">快照</button>
</div>
</template>
<script>
import { XHeader } from 'vux';
export default {
components: {XHeader},
data() {
return {
pusher: null
};
},
mounted() {
this.init();
},
methods: {
init() {
if (!window.plus) return;
document.addEventListener('plusready', this.initPusher(), false);
},
initPusher() {
this.pusher = new window.plus.video.LivePusher('playerRef', {
mode: 'HD',
position: 'static',
top: '47px',
with: '100%',
height: '300px',
bottom: '46px',
muted: true
});
window.plus.webview.currentWebview().append(this.pusher);
this.preview();
// 监听状态变化事件
this.pusher.addEventListener('statechange', function(e) {
console.log('statechange: ' + JSON.stringify(e));
}, false);
// 监听网络状态变化事件
this.pusher.addEventListener('netstatus', function(e) {
console.log('netstatus: ' + JSON.stringify(e));
}, false);
// 监听错误事件
this.pusher.addEventListener('error', function(e) {
console.log('error: ' + JSON.stringify(e));
}, false);
},
preview() {
this.pusher && this.pusher.preview();
},
snapshot() { // 快照
this.pusher && this.pusher.snapshot((e) => {
window.plus.nativeUI.alert('snapshot success: ' + JSON.stringify(e));
}, (e) => {
window.plus.nativeUI.alert('snapshot error: ' + JSON.stringify(e));
});
},
close() {
this.pusher && this.pusher.close();
},
onBack() {
this.$router.back();
this.close();
}
}
};
</script>
<style lang="scss" scoped>
.real_time_extract_img{
box-sizing: border-box;
width: 100vw;
height: 100vh;
overflow: hidden;
padding-top: 47px;
.player{
height: 300px;
}
}
</style>
6 个回复
最佳回复
DCloud_Android_DQQ
根据新发的ask地址:https://ask.dcloud.net.cn/question/147593
提供的示例,我复现了闪退的问题,并做了相关处理。
其他问题我无法复现,更具体的回复查看新的ask
5***@qq.com
解决了吗?我现在也出现这个问题
5***@qq.com
我还发现一个问题就是快照拍出来的图片方向不对
5***@qq.com
我的解决方法是createLivePusher重置
5***@qq.com
我现在是预览图片返回时会闪退,而且快照的清晰度不行
2021-09-14 17:59
d***@163.com - web前端
解决了吗,我也出现了这个问题
phoeniix - Hello World
一年了,问题还有,,,,,,
DCloud_Android_DQQ
帮忙提供一下可以复现问题的示例。 我现在试试
2022-06-22 10:40
phoeniix
回复 DCloud_Android_DQQ: https://ask.dcloud.net.cn/question/147593,这是我昨天发的问题,里面有测试项目,可以复现这个问题。机器使用的是:红米note7(Android 10)和商米q宝(Android 7.1.2)
2022-06-22 10:48
DCloud_Android_DQQ
回复 phoeniix: 我试试
2022-09-26 17:41
浙江小牛寻宝
回复 DCloud_Android_DQQ: 这个问题解决没有,vue页面会闪退
2022-12-29 13:36