dplayer 播放 streamlink 直播流

问题简介

想要搞一个转播 youtube 直播的工具，streamlink 工具可以将 youtube 直播视频流通过 http 传输，使用 dplayer 播放该 http 视频流。

操作步骤

安装 streamlink ， Installation - Streamlink 3.2.0 documentation

pip install --upgrade streamlink

streamlink 转播 youtube 直播流

streamlink https://www.youtube.com/watch?v=xxxx best --player-external-http --player-external-http-port 8001

（可选）nginx 反代 streamlink http 视频流

server {
    listen      443 ssl;
    server_name example.com;
    ssl_certificate     example.com.cer;
    ssl_certificate_key example.com.key;

    add_header Cache-Control no-cache;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


    location / {
        proxy_pass http://127.0.0.1:8001/;
    }
}

vue 使用 dplayer mpegts.js 播放 http 视频流

DPlayer

xqq/mpegts.js: HTML5 MPEG2-TS Stream Player (github.com)

yarn add dplayer mpegts.js

<template>
  <div>
    <div id="dplayer" ref="dplayer"></div>
  </div>
</template>

<script>
import mpegts from "mpegts.js";
import DPlayer from "dplayer";

export default {
  name: "Demo",
  components: {},
  data() {
    return {
      liveUrl: "http://127.0.0.1:8001/",  //"http://example.com/"
    };
  },
  mounted() {
    this.livePlayer = new DPlayer({
      container: document.getElementById("dplayer"),
      live: true,
      danmaku: false,
      video: {
        url: this.liveUrl,
        type: "mpegtsStream",
        customType: {
          mpegtsStream: function (video, player) {
            const mpegtsPlayer = mpegts.createPlayer({
              type: "m2ts",
              isLive: true,
              url: video.src,
            });
            mpegtsPlayer.attachMediaElement(video);
            mpegtsPlayer.load();
          },
        },
      },
    });
  },
};
</script>

<style>
</style>

缺点

只能一个人看，如果想多人看可以使用 ffmpeg 配合 rtmp 来实现。