基于阿里云的视频直播

基于阿里云的视频直播

基于阿里云的视频直播功能

官方网站

1.引入或下载皆可，由于展示，我这里选择引入

方法1：下载

//引入
npm install aliyun-rts-pusher --save
//导入
import { AliRTSPusher } from 'aliyun-rts-pusher';

方法2：导入

<script src="https://g.alicdn.com/AliyunVideoClient/H5RTSPusher/1.2.0/aliyun-rts-pusher.js"></script>

2.创建推流实例

AliRTSPusher.createClient()

// 在vue中可以这样定义在data中
data() {
    retrun {
        liveObj:AliRTSPusher.createClient()
    }
}

3.初始化SDK

// 在mounted生命钩子中即可调用
// 这里将他写入methods中
initVideo() {
    // 将容器ID传给SDK，SDK会在其中创建一个video标签并播放预览画面
    const videoEl = this.liveObj.setRenderView('videoContainer');
    // 设置直播清晰度
    this.liveObj.setVideoQuality('720p_1');
}

注意：这里需要定义一个id为videoContainer,去让阿里底层给你创建一个video标签

<div id="videoContainer"></div>

4.检测电脑是否支持Web RTC底层

// 在created生命钩子中调用即可
media(flag,title) {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    if (navigator.getUserMedia) {
      console.log('支持');
      navigator.getUserMedia({video: flag,audio:true}, function onSuccess(stream) {
            console.log(title);
      }, function onError(error) {
            console.log("错误：", error);
              });
      } else {
            console.log('navigator.getUserMedia - 不支持');
              return
      }
  }

created() {
    this.media(true,'已开启')
}

补充：Web RTC仅仅支持https，本地访问(localhost://)，文件访问(file:///)，而http协议是不支持的

Web RTC原生尝试

MDN Web RTC官网

如何解决？

举例：如果访问的是谷歌浏览器，输入chrome://flags/#unsafely-treat-insecure-origin-as-secure，将你访问的基地址设置进Insecure origins treated as secure中，即第一项即可。但是你项目上线任然需要将你的http网站加一个证书改成https

5.开始推流

直播这一块无非就是推拉流，直播人员通过推流去将直播推送出去，而查看的人，这会使用拉流进入直播频道，由于我只负责PC端，而拉流有安卓人员在做

//这里的代码写在一个方法里面，当点击某个按钮时，触发点击事件
//1.调用接口，获取推流地址：首先你需要通过调用接口获取推流地址，即让你公司的后端写一个可以获取推流地址的接口

// 2.监听推流实例的状态变化以及错误事件
this.liveObj.on("connectStatusChange", (event) => {
    console.log(event.status);
});
this.liveObj.on("error", (err) => {
    console.log(err);
    if (err.errorCode === "video device not found") {
        console.log("video device not found");
    }
});
//3.打开摄像头 麦克风
await this.liveObj.startCamera();
await this.liveObj.startMicrophone();
//4.开始推流
liveObj.startPush(后端给你的推流地址);

6.关闭推流

//同样是写入一个方法中，再点击某个事件时触发，或直播时间到达时触发
//1.同样调用停止推流的接口，找后端要

//2.关闭直播
await this.liveObj.stopCamera();
await this.liveObj.stopMicrophone();

//3.停止推流
await this.liveObj.stopPush();