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

原创

三掌柜

发布于 2023-08-27 16:57:23

1.1K2

发布于 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的文件，然后具体实现推流代码如下所示：

<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的文件，然后具体实现播放代码如下所示：

<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 删除。

2023腾讯·技术创作特训营第一期

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

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

2023腾讯·技术创作特训营第一期

登录后参与评论

0 条评论

热度