uni-app直播业务指南

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

uni-app直播业务指南

  • 注意要使用HBuilderX而不是HBuilder

引言

直播是很多开发者的需求。 HTML5的video，虽然可以播放流媒体，但不支持rtmp等常用直播格式。更无法实现推流，就是实时流式上传视频。 5+App、uni-app给开发者提供了完整的直播解决方案。 HTML5Plus规范提供了plus.video扩展规范，实现了原生的视频播放和推流录制上传。

HTML5Plus的规范是通行规范，可支持任何直播云服务厂商的直播服务器。 但又拍云公司作为HTML5中国产业联盟成员，为HTML5plus的开发者提供了更多完善服务。

代码示例-推流上传（live-pusher）

直播推流控件会调用手机摄像头采集视频流，编码后通过rtmp协议提交到直播服务器。

创建直播推流控件

uni-app下nvue页面

uni-app下的nvue页面在uni-app编译模式下，实现了live-pusher组件及uni.createLivePusherContext API，并实现了一套代码兼容App和小程序，具体参考上述组件及API文档。

uni-app下的vue页面

app平台的vue页面中使用直播推流，不能使用uni的api，而需要使用plus的API

const currentWebview = this.$mp.page.$getAppWebview()
var pusher = plus.video.createLivePusher("", {    
    url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',    
    top:'100px',    
    left:'0px',    
    width: '100%',    
    height: '300px',    
    position: 'static'    
});
currentWebview.append(pusher);
5+App模式示例
<html>
   <head>
          <meta charset="utf-8"/>
          <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
          <title>Hello H5+</title>
          <script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
   // 创建直播推流控件
   pusher = new plus.video.LivePusher('pusher',{url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'});
   // 监听状态变化事件
   pusher.addEventListener('statechange', function(e){
          console.log('statechange: '+JSON.stringify(e));
   }, false);
}
document.addEventListener('plusready', plusReady, false);
          </script>
   </head>
   <body>
          <br/>
          <div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
   </body>
</html>

采集直播推流提交到服务器

创建直播推流控件后可通过setOptions方法更新直播控件参数，如下更新直播推流服务器地址：

pusher.setOptions({url:'rtmp://新的直播推流服务器地址'});

配置完成后调用start方法开始采集直播流提交到服务器：

pusher.start();

代码示例-使用视频播放控件播放直播视频流

HTML5标准的video是无法播放直播视频流的，所以需要使用原生增加的播放控件。 HTML5plus扩展的原生视频播放控件（也是uni-app的App端自带的）支持视频格式包括mp4和flv，视频传输协议支持http/https和rtmp/hls/rtsp（直播流）

创建视频播放控件

uni-app模式

uni-app模式直接使用组件进行播放，无需其他复杂设置。

5+App模式
<!DOCTYPE HTML>
<html>
<head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
      <title>Hello H5+</title>
      <script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
// 创建视频播放控件
video = new plus.video.VideoPlayer('video',{
      src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'
});
}
document.addEventListener('plusready', plusReady, false);
      </script>
</head>
<body>
      <br/>
      <div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>
</body>
</html>

播放视频流

创建视频播放控件后可通过setOptions方法更新播放控件参数，如下更新视频服务器地址:

video.setOptions({src:'新的视频服务器地址'});

用户可以点击播放控件上的播放按钮进行播放，也可调用play方法进行播放：

video.play();

Harmonyos Next教程
1 回复

针对uni-app直播业务指南，以下是一个简化的代码案例展示，旨在帮助你理解如何在uni-app中实现直播功能。请注意，实际项目中直播功能的实现可能涉及更多复杂的逻辑和第三方服务集成，如直播流服务器、身份验证、弹幕系统等。

1. 环境准备

确保你的开发环境已经安装了HBuilderX和uni-app的相关依赖。

2. 页面结构

在pages目录下创建一个新的页面live.vue，用于展示直播内容。

<template>
  <view class="container">
    <video
      id="liveVideo"
      src="{{liveSrc}}"
      controls
      autoplay
      muted
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      liveSrc: '' // 直播流地址
    };
  },
  mounted() {
    this.getLiveStream();
  },
  methods: {
    getLiveStream() {
      // 模拟获取直播流地址，实际项目中应从服务器获取
      this.liveSrc = 'rtmp://example.com/live/stream';
      
      // 额外功能：监听视频加载状态
      const video = document.getElementById('liveVideo');
      video.addEventListener('loadedmetadata', () => {
        console.log('直播流加载完成');
      });
      video.addEventListener('error', (err) => {
        console.error('直播流加载失败:', err);
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}
video {
  width: 100%;
  max-width: 720px; /* 根据需要调整 */
}
</style>

3. 注意事项

  • 直播流地址：liveSrc的值应为有效的RTMP、HLS或DASH直播流地址。
  • 自动播放与静音：为了优化用户体验，直播视频通常设置为自动播放和静音。
  • 错误处理：监听视频元素的error事件，以便在直播流加载失败时进行处理。
  • 弹幕与互动：根据业务需求，可能需要集成弹幕系统或其他互动功能，这通常涉及WebSocket通信和前端UI的复杂处理。
  • 跨域问题：确保直播流服务器配置了正确的CORS策略，以避免跨域请求问题。

4. 总结

上述代码提供了一个基本的uni-app直播页面框架。根据具体业务需求，你可能需要进一步扩展功能，如用户认证、弹幕系统、礼物打赏等。在实际开发中，务必考虑性能优化、错误处理和用户体验等方面。

回到顶部