|
<template>
|
<div class="iframe">
|
<iframe
|
ref='iframe' allowfullscreen
|
:src="live_url"
|
frameborder="0"
|
width='100%'
|
height='100%'>
|
</iframe>
|
</div>
|
</template>
|
<script>
|
import { mapActions, mapState } from "vuex";
|
export default {
|
data(){
|
return{
|
live_url:"",
|
scenes_id:'',
|
scenes_name:'',
|
client_id:'',
|
jsload:false,//js是否加载成功
|
signature:'',//微信签名
|
timeStamp:'',//生成签名时间戳
|
nonceStr:'',//随机字符串
|
appId:'',//企业微信ID
|
access_token:'',
|
iframeWin:'',// iframe对象
|
};
|
},
|
computed: {
|
...mapState({ token: "token" })
|
},
|
mounted(){
|
this.iframeWin = this.$refs.iframe.contentWindow;
|
},
|
created () {
|
let item = JSON.parse(localStorage.getItem("item"));
|
this.scenes_id = item.scenes_id;
|
this.scenes_name = item.scenes_name;
|
this.client_id = 'wechat_enterprise';
|
let url = process.env.INTERFACE_SERVER_PATH+process.env.ETS_APP_NEWRECORD_URL;
|
this.live_url = url + "?scenes_id="+this.scenes_id+"&scenes_name="+this.scenes_name+"&client_id="+this.client_id+"&sid="+this.token;
|
console.log(this.live_url);
|
this.loadWxjs();
|
},
|
methods:{
|
...mapActions({
|
clientconfig: "clientconfig", // 鉴权
|
}),
|
getwsConfig(){
|
let _this = this;
|
let url = location.href;
|
_this.clientconfig({ query: {
|
client_id:_this.client_id,
|
url:url
|
} }).then((res) => {
|
console.log(res);
|
if(res.data.access_token){
|
_this.access_token = res.data.access_token;
|
_this.corpId = res.data.corpId;
|
_this.nonceStr = res.data.nonceStr;
|
_this.signature = res.data.signature;
|
_this.timeStamp = res.data.timeStamp;
|
_this.postMessageEvent();
|
}else{
|
_this.$toast.fail('企业微信鉴权失败');
|
}
|
}).catch(() => {
|
_this.$toast.fail('企业微信鉴权失败');
|
});;
|
},
|
postMessageEvent(){
|
let _this = this;
|
window.addEventListener("message", function(e){
|
var data = e.data;
|
console.log(data,'收到消息');
|
switch (data.action) {
|
case 'init': // 初始化
|
wx.config({
|
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
appId: _this.corpId, // 必填，企业微信的corpID
|
timestamp: _this.timeStamp, // 必填，生成签名的时间戳
|
nonceStr: _this.nonceStr, // 必填，生成签名的随机串
|
signature: _this.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
|
jsApiList: [
|
'startRecord',
|
'stopRecord',
|
'uploadVoice'
|
], //必填，传入需要使用的接口名称
|
success: function (res) {
|
sendMsg({
|
action:'init',
|
state:'ok',
|
data:{}
|
});
|
}
|
});
|
wx.error(function(res){
|
sendMsg({
|
action:'init',
|
state:'fail',
|
data:{}
|
});
|
})
|
break;
|
case 'start': // 开始录音
|
wx.startRecord({
|
success: function (res) {
|
sendMsg({
|
action:'start',
|
state:'ok',
|
data:{}
|
});
|
}
|
});
|
wx.error(function(res){
|
sendMsg({
|
action:'start',
|
state:'fail',
|
data:{}
|
});
|
})
|
break;
|
case 'stop':
|
wx.stopRecord({
|
success: function (res) {
|
var localId = res.localId;
|
wx.uploadVoice({
|
localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得，音频时长不能超过60秒
|
isShowProgressTips: 0, // 默认为1，显示进度提示
|
success: function (ures) {
|
let serverId = ures.serverId;
|
sendMsg({
|
action:'stop',
|
state:'ok',
|
data:{
|
access_token:_this.access_token,
|
serverId:serverId
|
}
|
});
|
}
|
});
|
}
|
});
|
wx.error(function(res){
|
sendMsg({
|
action:'start',
|
state:'fail',
|
data:{}
|
});
|
})
|
break;
|
}
|
})
|
},
|
sendMsg(msg){
|
this.iframeWin.postMessage(msg,'*');
|
},
|
loadWxjs(){
|
let _this = this;
|
let wx_js = process.env.WX_API_URL;
|
const isInclude = $("script[src='"+wx_js+"']").length; //引用次数
|
if(isInclude == 0){
|
const script = document.createElement('script');
|
script.type = 'text/javascript';
|
script.src = wx_js;
|
document.body.appendChild(script);
|
script.onload=function(){
|
_this.jsload = true;
|
}
|
}else{
|
_this.jsload = true;
|
}
|
this.getwsConfig();
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.iframe{
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
