当前位置： 首页 > news >正文

web和uniapp接入腾讯云直播

news 来源：原创 2025/6/19 10:35:44

        准备工作：首选需要一个通过ICP备案的域名，如minglina.com。开通腾讯云云直播服务。

        一、添加推流域名、播放域名

        使用云直播服务，至少需要2个域名，一个作为推流域名，一个作为播放域名，且推流和播放不能使用相同的域名。但可以通过二级域名来进行区分，不局限于是否两个子域名，例如可以使用 push.minglina.com 作为推流域名，将 play.minglina.com作为播放域名。

        参考域名管理。

        二、生成推流、播放地址

        1.生成推流地址

        云直播控制台提供地址生成器功能，支持通过填写地址拼接信息，辅助用户快速生成推流/播放地址。其中直播地址主要由域名（domain）、应用名称（AppName）、流名称（StreamName）以及鉴权 Key 组成。

         域名管理，选择推流域名->推流配置，获取推流的鉴权key。

        参考直播推流 。

       2.生成播放地址

        域名管理，选择播放域名->访问控制，获取播放的鉴权key。

       参考 推流url 。

       3.代码生成推流、播放地址：

import cn.hutool.core.date.DateUtil;
import com.ynfy.buss.live.entity.vo.LiveVO;
import com.ynfy.buss.live.service.ILiveService;
import com.ynfy.common.utils.LiveUtil;
import lombok.extern.slf4j.Slf4j;
import org.jeecg.common.exception.JeecgBootException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;/*** @Description: 直播服务* @Author: jeecg-boot* @Date: 2025-06-11* @Version: V1.0*/
@Slf4j
@Service
public class LiveServiceImpl implements ILiveService {/*** 是否开启直播功能*/@Value("${tencent.cloud.live.enable}")public Boolean liveEnable;/*** 推流域名*/@Value("${tencent.cloud.live.pushDomain}")public String pushDomain;/*** 播放域名*/@Value("${tencent.cloud.live.playDomain}")public String playDomain;/*** app名称*/@Value("${tencent.cloud.live.appName}")public String appName;/*** 推流鉴权key*/@Value("${tencent.cloud.live.pushKey}")public String pushKey;/*** 播放鉴权key*/@Value("${tencent.cloud.live.playKey}")public String playKey;/*** 获取推流、播放 URL** @param streamName*/@Overridepublic LiveVO getPushPlayUrl(String streamName, String endTime) {if (!liveEnable) {throw new JeecgBootException("直播功能暂未开放");}try {//获取推流鉴权信息String pushAuthInfo = LiveUtil.getSafeUrl(pushKey, streamName, DateUtil.parseDateTime(endTime).getTime() / 1000);//获取播放鉴权信息String playAuthInfo = LiveUtil.getSafeUrl(playKey, streamName, DateUtil.parseDateTime(endTime).getTime() / 1000);//推流地址String rtmpPushUrl = new StringBuilder().append("rtmp://").append(pushDomain).append("/").append(appName).append("/").append(streamName).append("?").append(pushAuthInfo).toString();String webRTCPushUrl = new StringBuilder().append("webrtc://").append(pushDomain).append("/").append(appName).append("/").append(streamName).append("?").append(pushAuthInfo).toString();//播放地址String rtmpPlayUrl = new StringBuilder().append("rtmp://").append(playDomain).append("/").append(appName).append("/").append(streamName).append("?").append(playAuthInfo).toString();String webRTCPlayUrl = new StringBuilder().append("webrtc://").append(playDomain).append("/").append(appName).append("/").append(streamName).append("?").append(playAuthInfo).toString();String hlsPlayUrl = new StringBuilder().append("http://").append(playDomain).append("/").append(appName).append("/").append(streamName).append(".m3u8?").append(playAuthInfo).toString();LiveVO live = new LiveVO();live.setRtmpPushUrl(rtmpPushUrl);live.setWebrtcPushUrl(webRTCPushUrl);live.setRtmpPlayUrl(rtmpPlayUrl);live.setWebrtcPlayUrl(webRTCPlayUrl);live.setHlsPlayUrl(hlsPlayUrl);return live;} catch (Exception e) {e.printStackTrace();log.error("获取推流 URL出错：{}", e.getMessage());throw new JeecgBootException("获取推流、播放 URL出错");}}
}

         生成权限信息工具类：

import java.security.MessageDigest;/*** 腾讯云直播工具类*/
public class LiveUtil {public static void main(String[] args) {System.out.println(getSafeUrl("txrtmp", "11212122", 1469762325L));}private static final char[] DIGITS_LOWER ={'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'};/** KEY+ streamName + txTime*/public static String getSafeUrl(String key, String streamName, long txTime) {String input = new StringBuilder().append(key).append(streamName).append(Long.toHexString(txTime).toUpperCase()).toString();String txSecret = null;try {MessageDigest messageDigest = MessageDigest.getInstance("MD5");txSecret = byteArrayToHexString(messageDigest.digest(input.getBytes("UTF-8")));} catch (Exception e) {e.printStackTrace();}return txSecret == null ? "" :new StringBuilder().append("txSecret=").append(txSecret).append("&").append("txTime=").append(Long.toHexString(txTime).toUpperCase()).toString();}private static String byteArrayToHexString(byte[] data) {char[] out = new char[data.length << 1];for (int i = 0, j = 0; i < data.length; i++) {out[j++] = DIGITS_LOWER[(0xF0 & data[i]) >>> 4];out[j++] = DIGITS_LOWER[0x0F & data[i]];}return new String(out);}
}

        三、前端页面推流

        1.首选需调用上述接口生成推流和播放地址。

        2.推流

        web推流  

        云直播提供了推流 SDK TXLivePusher 用于 Web 推流。 index.html页面的body 部分引入TXLivePusher js脚本。

         需要获取摄像头使用权限。推流页面代码：

<template><divid="local_video"ref="local_video"style="width: 100%; height: 500px; display: flex; align-items: center; justify-content: center;background-color: #bababa"></div><div style="display: flex;justify-content: center"><a-space style="margin-top: 30px;padding: 0 20px" size="large"><a-button type="dashed" block preIcon="ant-design:video-camera-outlined" @click="startLive"v-if="liveIng == false">开始直播</a-button><a-button type="primary" danger preIcon="ant-design:minus-circle-filled" @click="stopLive"v-else>停止直播</a-button></a-space></div></template><script lang="ts" setup>
import {ref} from "vue";
import {useMessage} from "@/hooks/web/useMessage";const record = ref<any>();  //传入你的数据
const local_video = ref();
const livePusher = ref<any>();
const {createMessage} = useMessage();
const liveIng = ref<boolean>(false);onMounted(() => {//初始化播放器initLivePusher()});//初始化播放器
function initLivePusher() {livePusher.value = new TXLivePusher();livePusher.value.setRenderView('local_video');livePusher.value.videoView.muted = true;// // 设置视频质量livePusher.value.setVideoQuality('720p');// // 设置音频质量livePusher.value.setAudioQuality('standard');// // 自定义设置帧率livePusher.value.setProperty('setVideoFPS', 25);
}//开始直播
function startLive() {// 采集完摄像头和麦克风之后自动推流Promise.all([livePusher.value.startCamera(), livePusher.value.startMicrophone()]).then(function () {livePusher.value.startPush(record.value.webrtcPushUrl);});observerLive()
}//停止直播
function stopLive() {livePusher.value.stopPush();// 关闭摄像头livePusher.value.stopCamera();// 关闭麦克风livePusher.value.stopMicrophone();liveIng.value = false
}function observerLive() {livePusher.value.setObserver({onError: function (status, message) {createMessage.error(message)stopLive()},onPushStatusUpdate: function (status, message) {if (status == 2) {liveIng.value = truecreateMessage.success("与服务器连接成功，直播推流开始啦！")}if (status == 0) {createMessage.warn("与服务器连接断开，已关闭直播推流！")}},});
}
</script><style lang="less" scoped>
</style>

        参考 TXLivePusher 。

        另一种是OBS工具推流。下载后添加源。

        设置直播推流地址和推流码。

        设置好后点击开始直播。 

        四、播放

        1.web播放，使用腾讯云视立方SDK播放。

        进入视立方控制台申请web端License：

        安装 tcplayer 的 npm 包：

npm install tcplayer.js

        licenseUrl为上述环节申请的。tcplayer播放器拉流WebRTC地址播放。

<template><div class="course-banner-inner"><section class="section-study"><div class="wrapper-player"><div class="player-container"><div class="loki-player-wrapper" id="loki-player-wrapper"><div class="tc_player" id="course-playback-player"style="transform: translate(0px, 0px);"><video id="live-player" width="1200" height="618" preload="auto" playsinlinewebkit-playsinline></video></div></div></div></div></section></div>
</template><script lang="ts" setup>
import TCPlayer from "tcplayer.js";
import "tcplayer.js/dist/tcplayer.min.css";
import { onBeforeUnmount, ref, watchEffect } from "vue";import { useMessage } from "@/hooks/web/useMessage";const { createMessage, } = useMessage();
const livePlayer = ref<any>();const props = defineProps({form: {type: Object,default: {}},
});watchEffect(() => {if (props.form?.isLive) { //直播课程创建直播播放器createLivePlayer(props.form.webrtcPlayUrl);}
});//创建直播播放器
function createLivePlayer(playUrl) {// live-player 为播放器容器 IDlivePlayer.value = TCPlayer("live-player", {sources: [{src: playUrl // 播放地址}],licenseUrl: "https://license.vod2.myqcloud.com/license/v4/13013228971_1/v_cube.license" // license 地址，必传});livePlayer.value.on("error", function(e) {createMessage.error("直播出错啦：" + (e.data.source.message ?? "") + "（代码：" + e.data.code + "）");});livePlayer.value.on("play", function() {createTimer();});
}//页面销毁前解除监听
onBeforeUnmount(async () => {//销毁播放器if (livePlayer.value) {livePlayer.value.dispose();}
});
</script><style scoped></style>

        参考 Tcplayer。

        2.uniapp播放。

       一种方式是<live-player> 标签。<live-player> 是小程序内部用于支持音视频下行（播放）能力的功能标签。开通该标签需要满足规定的类目，详见live-player。

        另一种是小程序端和app端都使用video标签播放。在前面获取到的播放地址中已经生成了HLS播放地址。

<template><view class="player-content"><video id="live-player" ref="livePlayer" :src="playUrl" autoplay controls class="live-player"  @error="handleError"></video></view>
</template><script>export default {props: ['form'],data() {return {playUrl: ""};},watch: {form: {handler(val, oldVal) {if (val?.isLive) { //直播课程创建直播播放器if (val?.hlsPlayUrl) {//替换直播播放地址，从服务器代理获取推流this.playUrl = val.hlsPlayUrl.replace("http://play.minglin.com","https://exam.minglin.com/hls-player");}}},immediate: true},},methods: {handleError() {uni.showToast({icon: "none",title: "获取直播推流失败"})},}}
</script><style lang="scss" scoped>.player-content {position: relative;width: 750rpx;height: 450rpx;display: flex;background-size: 100% 100%;.live-player {width: 100%;height: 100%;position: relative;}}
</style>

        需要注意的是生成的HLS播放地址是http的，小程序支持https。所以需要转换下，然后通过nginx代理播放直播流。

        五、效果

        1.web端：

                ​​​​​​​        ​​​​​​​        

        2.uniapp端：

        ​​​​​​​

相关文章：

  • 腾讯云TCCA认证考试报名 - TDSQL数据库交付运维工程师(MySQL版)
  • Matlab学习笔记
  • 解决idea无法正常加载lombok包
  • CTF解题：[NSSCTF 2022 Spring Recruit]弱类型比较绕过
  • TikTok 矩阵如何快速涨粉
  • MySQL存储引擎深度解析：InnoDB、MyISAM、MEMORY 与 ARCHIVE 的全面对比与选型建议
  • YOLOv11改进系列---Conv篇---2024最新深度可分卷积与多尺度卷积结合的模块MSCB助力yolov11有效涨点
  • 微信中 qrcode 生成二维码长按无效果的解决方案
  • python函数（II）
  • Jira 需求处理全流程解析：从入门到实践
  • google ADK Agent间传参数
  • 利用cpolar实现Talebook数字图书馆的实时访问
  • 最新期刊影响因子，基本包含全部期刊
  • Linux内核编译、安装与回退完全指南：从配置到安全回滚
  • 【论文阅读笔记】《CodeS: Towards Building Open-source Language Models for Text-to-SQL 》
  • 【图像处理基石】什么是EIS和OIS？
  • Vue3 + TypeScript合并两个列表到目标列表，并且进行排序，数组合并、集合合并、列表合并、list合并
  • 力扣-416.分割等和子集
  • ArkUI-X跨平台技术落地-华为运动健康(二)
  • k8s中pod有哪些状态？
  • 教修图的网站/百度关键词模拟点击软件
  • 温州网站制作公司/seo销售话术开场白
  • 厦门网站制作网页/活动策划
  • dw网页制作下载/网站优化搜索排名
  • 建设掌上银行官方网站/免费web服务器网站
  • 上海大型网站建设公司排名/交换友情链接