uni

您所在的位置：网站首页 › 火山视频直播间 › uni

uni

2024-06-11 21:39| 来源: 网络整理| 查看: 265

一、前言

项目开发进程中，业务提出新需求，需要接入视频直播。为此，开始接触火山引擎视频直播。火山引擎方值负责提供观播SDK，综合考虑现有技术栈，采用集成Web SDK方式，接入观播功能。直播通过企业版腾讯会议方式进行推流操作。

二、技术实现

前端采用uni-app Webview嵌套H5页面方式，重点处理逻辑集中在H5观播页面中，因为涉及观播activityId值的获取，故需要实现Webview与H5页面双向通信机制。

uni-app在 App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下，因为这个目录下的文件不会被编译。

注意⚠️：Web SDK以本地网页嵌套集成火山视频方式，目前不支持预告片播放及直播回放功能，故需要将视频直播H5作为一个独立H5应用进行部署。

补充知识点⚠️：每个vue页面，其实都是一个webview，而vue页面里的web-view组件，其实是webview里的一个子webview。这个子webview被append到父webview上。

var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效 currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭

vue页面内容如下：

export default { data() { return { url: '' } }, onLoad() { // 默认一个你的html（h5地址） this.url = '/hybrid/html/vedioLive.html' }, mounted(){ // 需要监听 message 之后触发方法 window.addEventListener("message", this.handlePostMessage); }, methods: { // 触发方法 handlePostMessage(data) { console.log(data) console.log(data.data.data.arg.data) if (data.data.data.arg.data == 'h5页面传的值') { // 给url重新赋值 this.url = "" } else if (data.data.data.arg.data == '判断返回uniapp页面') { // 其他的跳转查看uniapp官网 uni.switchTab({ url: '/pages/xxx/index' }); } }, } }

html页面内容如下：

DOCTYPE html> 直播Demo .app { display: flex; height: 100%; flex-direction: column; /* background-image: url('//p6-live.byteimg.com/tos-cn-i-gjr78lqtd0/923a9e572712a19d5b8c84fa66e90bd6.png~tplv-gjr78lqtd0-image.image'); */ background-color: white!important; background-size: 100% 100%; background-attachment: fixed; } .player { width: 100vw; height: calc(100vw / 16 * 9); } .menu { flex: 1 1; min-height: 300px; overflow: hidden; } // 等待sdk加载，待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 document.addEventListener('UniAppJSBridgeReady', function() { console.log('-----------UniAppJSBridgeReady------------') // 向应用发送消息 uni.postMessage({ data: { order: 'playRecord' } }); uni.getEnv(function(res) { console.log('当前环境：' + JSON.stringify(res)); }); }); window.msgFromUniapp= function(arg) { console.log('

【本文地址】

uni

uni

今日新闻

推荐新闻