前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >腾讯云音视频保姆级教程教你快直播接入,速戳!| 技术创作特训营第一期

腾讯云音视频保姆级教程教你快直播接入,速戳!| 技术创作特训营第一期

原创
作者头像
三掌柜
发布2023-08-27 16:57:23
7942
发布2023-08-27 16:57:23
举报

引语

在当今数字化快速发展的时代,直播已经成为一种广受欢迎的沟通和传播方式,甚至有一种说法是视频直播将终结内容为王的时代,可见直播现在的重要性。与此同时,腾讯云音视频服务作为一项强大的技术解决方案,为开发者和企业提供了稳定、高效的直播接入和播放服务。那么本文就来分享一下深入了解腾讯云音视频保姆级教程,教使用者如何快速接入直播功能,让直播体验更上一层楼的效果。

腾讯云音视频服务概述

在开始学习如何接入直播之前,先来了解一下腾讯云音视频服务的基本概念和核心功能。腾讯云音视频服务提供了全球覆盖的直播分发网络,可实现高质量的音视频直播和点播,其核心功能包括推流、播放、转码、录制和实时消息等等,为开发者提供了丰富的工具和接口服务。

在2021年,腾讯正式推出“腾讯云音视频”品牌,整合后的腾讯云音视频,包括音视频通信基础网络、音视频通信PaaS产品线,以及针对垂直场景的联合解决方案。腾讯云音视频同时推出音视频通信基础网络RT-ONE™,包含TRTC实时音视频通信网络、IM即时通信网络与CDN流媒体分发网络三大网络。在终端产品层面,腾讯云音视频将打包移动直播、短视频、TRTC、快直播、IM和小程序插件等SDK终端产品,统一对外输出。

快速入门指南

在接入腾讯云音视频服务之前,如果第一次使用首先需要注册腾讯云账号,并开通对应的服务,由于腾讯云音视频有很多不错的服务,这里只拿其中一个服务来做例子使用,即腾讯云云直播。具体的准备工作如下所示:

1、注册腾讯云账号非常简单,只需按照指引填写相关信息即可,注册成功之后需要进行实名认证,注册腾讯云:https://cloud.tencent.com/register

2、注册腾讯云账号之后需要去实名认证,实名认证指引:https://cloud.tencent.com/document/product/378/10495

3、实名认证完成之后就是去开通对应的腾讯云云直播服务,直接进入腾讯云直播服务开通页面,勾选同意《腾讯云服务协议》并单击开通云直播服务,云直播服务开通页:https://console.cloud.tencent.com/live?from=product-banner-use-lvb,然后根据实际需要进行开通对应的服务,如下图所示:

4、由于腾讯云音视频会不定期更新活动,尤其是新户使用力度会更大,所以不必担心费用问题,但是一切以实际页面显示的结果为准。我使用领取云直播免费资源的步骤如下所示:

打开腾讯云直播控制台,然后点击预览,点击“新课专享福利,领取云直播20G免费资源”,如下图所示:

入口链接:https://cloud.tencent.com/act/pro/video_freetrial?from=20496&tab_order=3&page=618_video#discount

接着点击“组合购买”按钮,就是去支付页面,0元付款之后,就开通云直播服务了。

腾讯云云直播接入教程

1、获取推流、播放链接

现在进入正题,学习如何进行推流和播放的实现。首先,我们需要准备直播推流和播放的测试链接,可以直接关注“腾讯云音视频公众号”,回复“推流地址+编号”,这里的编号可以使用080,即回复内容为:推流地址080 ,如下图所示:

然后即可获取到推流和播放的地址,如下图所示:

如果已经购买过域名,可以忽略上面这个获取推流和播放链接获取的步骤。

2、推流集成

这里以前端html5的形式来演示代码实现网页版推流和播放的功能,首先来讲推流的集成部分。具体操作,可以直接打开电脑中的前端开发编辑器,这里用的是VSCode编辑器,打开VSCode之后,新建一个html的文件,然后具体实现推流代码如下所示:

代码语言:javascript
复制
<html>
<head>
    <title>WebRTC推流</title>
</head>

<body>
    <div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>

    <script type="text/javascript">
        var url = "webrtc://xxx.liveplay.myqcloud.com/live/xxx";//请在此处填入WebRTC推流地址,其他地方不要做任何修改
    </script>

    <div style='text-align:center;'>
        <p></p>
        <button onclick="livePusher.startCamera();">开启摄像头</button>
        <button onclick="livePusher.stopCamera();">关闭摄像头</button>
        <button onclick="livePusher.startMicrophone();">开启麦克风</button>
        <button onclick="livePusher.stopMicrophone();">关闭麦克风</button>
        <button onclick="livePusher.startPush(url);">开启推流</button>
        <button onclick="livePusher.stopPush();">停止推流</button>
        <button onclick="alert(url);">显示推流地址</button>
    </div>

    <script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
    
    <script type="text/javascript">
        const livePusher = new TXLivePusher();
        livePusher.setRenderView('local_video');

        livePusher.setVideoQuality('720p');
        livePusher.setAudioQuality('standard');
        livePusher.setProperty('setVideoFPS', 25);

        livePusher.videoView.muted = true;
    </script>
</body>
</html>

如图所示:

上面的推流实现代码也就10几行,可以说非常简单,但是需要注意的是:

  • 可在代码注释处填入为您提供好的或您自行生成的推流地址
  • 将该文件保存为demo.html
  • 在谷歌Chrome浏览器打开demo.html
  • 先开启摄像头,再开启推流按钮

具体的推流效果如下所示:

推流开始之后,最后需要去腾讯云音视频控制台的云直播流管理中,查看推流情况,具体如下所示:

预览效果如下所示:

注意事项:

  • 打开页面后,点击开启摄像头或麦克风才会出现摄像头采集到的影像。否则会因为没有媒体流而导致推流失败;
  • 再点击开始推流;
  • 如果是用的是自己生成的推流地址,可以点击流管理,在线流,预览查看本地推流过来的效果。

3、播放集成

播放集成确实和上面的推理集成的代码实现步骤差不多,依然以前端html5的形式来演示代码播放的功能。具体操作还是在VSCode中新建另外一个html的文件,然后具体实现播放代码如下所示:

代码语言:javascript
复制
<html>
<head>
  <title>>Web直播播放</title>
  <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet"/>
  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
</head>
<body>
  
  <video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline></video>

  <script>
  var player = TCPlayer('player-container-id', {sources: ['webrtc://xxx.liveplay.myqcloud.com/live/xxx']}); //请替换'webrtc'为你真实的播放地址
  </script>

</body>
</html>

如图所示:

上面的播放实现代码也就10行左右,可以说非常简单,但是需要注意的是:

  • 可在此处填入提供好的播放地址(请联系现场助教获取播放地址)
  • 将该文件保存为demo2.html
  • 在谷歌等现代浏览器中打开预览推流效果

具体的播放效果如下所示:

由于作者社恐,就不漏全部效果了,总之可以正常的进行播放推流内容,而且画面很不错,无卡顿。具体如下效果:

音视频附加功能

上面实现的是基本的云直播过程中的推流和播放组件功能,其实腾讯云云直播提供的功能远不止这些,还有美颜特效、直播水印等丰富的增至功能,这些功能也是需要开通的,不过腾讯云音视频Web体验馆有对应的体验功能。腾讯云音视频Web体验馆:

https://rtcube.cloud.tencent.com/component/experience-center/index.html#/detail?scene=pusher

这里分享一下给云直播视频画面加上logo和时间,具体如下所示:

再来分享一下给云直播视频的人物添加美颜效果,具体如下所示:

最后再来分享一下给云直播视频的画面添加背景图,具体如下图所示:

问题排查与解决

在实际的直播过程中,可能会遇到一些问题和故障,这里说一些常见的问题,并提供相应的解决方案。比如,网络不稳定导致的卡顿问题,可以通过优化网络环境或调整推流参数来解决。与此同时,腾讯云音视频服务还提供了技术支持和反馈渠道,可以及时解答和解决遇到的问题。

更详细的腾讯云云直播接入指南请参考腾讯云官网产品文档,如下所示:

Web推流:https://cloud.tencent.com/document/product/267/56505

Web播放:https://cloud.tencent.com/document/product/881/30818

结束语

通过本文的学习,体验了腾讯云音视频保姆级教程,学会了如何快速接入云直播。腾讯云音视频服务的强大功能和稳定性,为开发者和使用者提供了出色的直播体验。无论是个人直播还是企业直播,通过腾讯云音视频服务,都能够轻松实现高质量的直播内容传输和播放。同时也希望本文对你在直播接入方面有所帮助,让你的直播之路更加顺畅和成功,快来尝试腾讯云音视频保姆级教程,开启精彩的直播之旅吧!

【选题思路】

在当今数字化快速发展的时代,直播已经成为一种广受欢迎的沟通和传播方式,甚至有一种说法是视频直播将终结内容为王的时代,可见直播现在的重要性。通过使用腾讯云音视频的云直播功能,可以很好的帮助有直播需要的开发者和使用者解决实际需要,而且集成的步骤简单,腾讯云音视频的产品功能覆盖面广、功能强大,所以就诞生了这篇文章。由于没有对腾讯云音视频的其他产品进行使用介绍,有可能实现的效果不全面、不完善,所以希望各位评委老师和读者们多提建议和意见,感谢!

【写作提纲】

  • 从腾讯云音视频服务概述切入主题
  • 从快速入门指南进行热身操作
  • 从腾讯云云直播接入教程进入核心
  • 从音视频附加功能进行延伸
  • 从问题排查与解决进行发散
  • 最后进行回顾总结

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引语
  • 腾讯云音视频服务概述
  • 快速入门指南
  • 腾讯云云直播接入教程
    • 1、获取推流、播放链接
      • 2、推流集成
        • 3、播放集成
        • 音视频附加功能
        • 问题排查与解决
        • 结束语
          • 【选题思路】
            • 【写作提纲】
            相关产品与服务
            云直播
            云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档