直播项目开发-起步阶段详解

DRen1

已于 2023-08-09 18:08:48 修改

阅读量279

点赞数 1

文章标签：前端

于 2023-08-09 04:31:05 首次发布

本文链接：https://blog.csdn.net/qq_43237354/article/details/132179404

版权

本文讲述了作者在开发直播功能时，从webRTC转向云直播平台的过程，重点讲解了如何使用网易云信及其推拉流，以及OBS和VLC在直播中的应用。

摘要由CSDN通过智能技术生成

准备给我的项目开发一个直播的功能。类似于虎牙直播，抖音直播这种具多个直播房间的样子。（个人项目，后面有时间会逐步完成自己直播平台的搭建，这篇文章是初步阶段。）

本来想使用webRTC来自己搭建一个直播平台，但是因为考虑到实现起来稍微比较复杂，而且webRTC不能支持大用户量的直播，更适合小群组的打视频电话，视频会议这种情况。经过一番资料查找，感觉还是基于第三方云直播平台来搭建自己的直播平台是最方便的，第三方的云直播厂家，类似与腾讯云，阿里云，七牛云等已经在云直播这里很专业了，基于他们提供的sdk可以比较容易的来实现web端，app端的直播功能，可以实现商业级的大并发直播，还可以具有比如视频录制，鉴黄，视频转码，美颜等一些附加功能。抱着先起步学习的想法，先基于第三方云直播平台搭建一个简易的直播功能。

腾讯云和阿里云需要自己购买域名来作为推流和拉流的地址，所以我选择了网易云信。

不过网易云信直播是基于频道的模式，好像不支持创建很多个直播间来进行直播，需要在网易云信控制台手动创建频道，而不是让你的程序自己创建。也就是说，当你想搭建具有很多个直播间的直播平台时，还是选买个域名选腾讯云算了。

当你开通网易云信的直播功能时，可以进去直播功能的配置页面，系统会自动给你分配推拉流域名。你需要直播时，还需要手动创建一个频道，来获取具体的推拉流地址。

关于直播推拉流的基础概念这里就不详解了，不清楚的可以查查资料。目前主流的推流协议是rtmp,拉流的话可以选择其他协议比如flv,hls,rtmp等，不同的拉流协议，得到的视频延迟和效果都不一样。不同协议的流之间需要进行转码，例如发送者发送的rtmp协议的流，在网易云信的服务器上自动转码，然后接收方可以去服务器上使用hls等协议拉流。

放一张图来解释直播的流程，这也是网易云信的官方概念图。

进去网易云信直播控制台，点击进入自己创建的直播频道，可以获得系统给我们的推流和拉流地址，这个详细流程在官网文档。接下来让我们看一下控制台。（ps:腾讯云需要设置用户自己的拉流域名，所以使用腾讯云用户必要要拥有有一个属于自己的域名，没有域名的用户要自己去买个域名，不然没法用云直播功能。而网易云信直接提供域名和推拉流地址，所以若只想开发具有一个直播间或者较少直播间的直播功能，使用网易云信是很方便的）如下图。

使用腾讯云可以自己拼接推拉流的url,而不用在控制台手动创建推拉流的地址，所以腾讯云直播可以支持程序员开发那种类似于虎牙直播那种具有很多直播间的平台。如下图。

好，使用网易云信，我们获得了推拉流的url，那么我们怎么进行推流和拉流呢？当然，官方文档有介绍，我们长话短说。

推流：

1. PC 端使用OBS软件推流。

2.web 端，使用编写的网页程序进行推流。（网易云信没有提供网页端的推流sdk,但是他给了有一个在线教育直播的网页版demo,不怕麻烦的话可以参照进行网页推流功能开发。与之相比，腾讯云就好很多，它提供例了web端的sdk,可以让用户在网页端使用webRTC来推流。这样的话，开发者可以比较方便的在web端集成直播推流）

WebRTC 协议推流 | 腾讯云

3.移动端（android/ios）使用云直播平台提供的直播sdk进行推流。

为了方便测试，我这里直接选择在PC端使用OBS软件推流。首先要去OBS官网下载，然后设置直播推流地址，选择自己要推流的数据，例如摄像头流，本机屏幕流，本机视频流，都可以单独选择和叠加，这个OBS软件还是挺强大。当我们设置正确可用的推流地址后，选择要输出的流，点击开始直播，右下方出现绿色的方块就是代表在正常直播了。

拉流：

拉流主要看云直播平台服务器上支持你用什么协议来拉流。注意，推流和拉流地址不是同一个url.

拉流最简单的方法，是使用VLC播放器，输入网络串流地址来播放视频。（VLC播放器只支持flv和HLS协议的视频，不支持rtmp协议的视频）

使用HLC播放器可以播放视频，代表直播功能已经跑通了。

但是从头到尾不写一行代码实在太low了，而且作为主播你可以下个OBS播放器来直播，你不能要求看直播的所有人都下个VLC播放器再输入网络串流地址来看直播吧？所以，我写了一个简单的拉流网页demo，用于网页端提供用户观看视频的功能。该页面是一个简要的vue页面，引入了hls.js,该页面功能是使用vls 协议来拉流，播放视频。(当然，你也可以使用flv 协议来拉流，延迟更小，flv 协议代码拉流我就不写了)

<template>
  <div class="hello">
<h1>HLS Video Player</h1>
 <video id="videoPlayer" controls autoplay></video>
</div>
<template>
<script>
import Hls from 'hls.js'
export default {
  name: 'HelloWorld',
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      if (Hls.isSupported()) {
        var videoPlayer = document.getElementById('videoPlayer');
        var hls = new Hls();
        var streamUrl = 'http://xxxxxx.live.126.net/live/2acb163513b94725a27300163e0d9d1d/playlist.m3u8?playSecret=69669fbe18e3b27028fa49c09cee010c&playTime=1691394967'; // 替换为你的HLS流地址

        hls.loadSource(streamUrl);
        hls.attachMedia(videoPlayer);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          videoPlayer.play();
        });
      } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
        // Safari浏览器支持原生播放HLS流
        videoPlayer.src = streamUrl; 
        videoPlayer.addEventListener('loadedmetadata', function () {
          videoPlayer.play();
        });
      } else {
        alert('当前浏览器不支持播放HLS流，请尝试使用支持HLS的浏览器。');
      }
    }
  }
}
</script>

web 页面显示如下: （跟我OBS直播端画面相一致，只是会有几十秒的延迟）