vue 直播

最新推荐文章于 2024-07-02 08:55:42 发布

areyousmoking

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量116

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/areyousmoking/article/details/137150246

版权

    <video
      autoplay
      controls
      width="100%"
      height="190px"
      id="myVideo"
      crossorigin="*"
      style="background: black; object-fit: cover"
      :poster="posterImg"
    ></video>

autoplay :自动播放

poster:封面

查询直播推流拉流地址

 // 查询视频推流、拉流地址
    getVideo() {
      const params = {
        ws_id: this.ws_id,
        d_id: this.d_id,
      };
  //GetVideo  为获取视频流地址的接口
      GeteVideo(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.video.com_only = res.data.com_only;
          this.video = res.data;
          this.posterImg = this.pathUrl + res.data.file_path;//封面图片
          const url = res.data.video_url;
          const push_url = res.data.audio_url;
          this.video.stream_id = url.substring(url.lastIndexOf("/") + 1);
          this.video.push_stream_id = push_url.substring(
            push_url.lastIndexOf("/") + 1
          );
          // 拉流
          this.videoPlayer();
          // 推流
          this.startPublish(
            this.stream_url + this.video.push_stream_id,
            new Audio()
          );
        }
      });
    },

直播拉流

 // flv拉流播放视频
    videoPlayer() {
      var videoElement = document.getElementById("myVideo");
      this.startPlay(this.stream_url + this.video.stream_id, videoElement);
    },
    startPlay(url, video) {
      this.player = new SrsRtcPlayerAsync(video);
      this.player
        .play(url)
        .then(function (session) {})
        .catch(function (reason) {})
        .finally(() => {});
    },

直播推流

 // 推流
    startPublish(url, audio) {
      this.publisher = new SrsRtcPublisherAsync(audio);
      console.log("startPublish", this.publisher);
      const publisher = this.publisher;
      this.publisher.pc.onicegatheringstatechange = function (event) {
        if (publisher.pc.iceGatheringState === "complete") {
        }
      };
      this.publisher
        .publish(url)
        .then(function (session) {
          console.log("sessionid", session.simulator, session.sessionid);
          publisher.mute();
        })
        .catch(function (reason) {
          // Throw by sdk.
          if (reason instanceof SrsError) {
            if (reason.name === "HttpsRequiredError") {
              alert(
                `WebRTC推流必须是HTTPS或者localhost：${reason.name} ${reason.message}`
              );
            } else {
              alert(`${reason.name} ${reason.message}`);
            }
          }
          // See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions
          if (reason instanceof DOMException) {
            if (reason.name === "NotFoundError") {
              // alert(
              //   `找不到麦克风和摄像头设备：getUserMedia ${reason.name} ${reason.message}`
              // );
            } else if (reason.name === "NotAllowedError") {
              alert(
                `你禁止了网页访问摄像头和麦克风：getUserMedia ${reason.name} ${reason.message}`
              );
            } else if (
              [
                "AbortError",
                "NotAllowedError",
                "NotFoundError",
                "NotReadableError",
                "OverconstrainedError",
                "SecurityError",
                "TypeError",
              ].includes(reason.name)
            ) {
              alert(`getUserMedia ${reason.name} ${reason.message}`);
            }
          }
          publisher.close();
          // console.error(reason);
        });
    },

关闭直播

  // 关闭直播
    stopVideo() {
      const params = {
        ws_id: this.ws_id,
        d_id: this.d_id,
        com_only: this.video.com_only,
      };
         if (this.publisher) {
        this.publisher.close();
      }
      if (this.flvPlayer) {
        clearInterval(this.timeout);
        this.flvPlayer.unload(); //取消数据流加载
        this.flvPlayer.detachMediaElement(); //将播放实例从节点中取出
        this.flvPlayer.destroy(); //销毁播放实例
        this.flvPlayer = null;
      }
        //StopVideo   结束直播的接口
      StopVideo(params)
        .then((res) => {
          // this.$message.success("断开视频成功");
        })
        .catch(() => {
          // this.$message.error("断开视频失败");
        });
    },

通话结束通话

  // 通话
    onCall() {
      const params = {
        ws_id: this.ws_id,
        d_id: this.d_id,
        com_only: this.video.com_only,
      };
      OnCall(params).then((res) => {
        console.log(res);
        if (res.code == "200" && res.data == "通话链接成功") {
          var videoElement = document.getElementById("myVideo");
          // videoElement.muted = true;
          this.voiceCall = true;
          this.$message.success("通话中");
        } else {
          this.$message.success("通话忙");
        }
      });
    },
    // 通话结束
    offCall() {
      const params = {
        ws_id: this.ws_id,
        d_id: this.d_id,
        com_only: this.video.com_only,
      };
      OffCall(params).then((res) => {
        var videoElement = document.getElementById("myVideo");
        // videoElement.muted = false;
        this.voiceCall = false;
        // this.$message.success("通话结束");
      });
    },