Skip to content

Streaming from Canvas using canvas.captureStream(60); not working #15

Description

@Nwanna-Joseph

Hi,
Great project. Thanks for your work.

I tested the project and it works via the webpage (https://rawgit-now.netlify.app/davedoesdev/streamana/publish/site/streamana.html).

Now, I want to stream my html canvas to youtube and I used the code:
const stream = canvas.captureStream(60);

const pushStreamToYouTubeLive = ({stream}:{stream:MediaStream}) => {
const config = {
ffmpeg_lib_url: "ffmpeg-worker-hls.js",
protocol: "hls",

    video: {
      bitrate: 2500 * 1000, // 2500000
      framerate: 30
    },

    audio: {
      bitrate: 128 * 1000 // 128000
    },

    media_recorder: {
      video: {
        codec: "H264"
      },
      audio: {
        codec: "opus"
      },
      webm: true,
      mp4: false
    },

    webcodecs: {
      video: {
        codec: "avc1.42E01E",
        avc: { format: "annexb" }
      },
      audio: {
        codec: "opus"
      },
      webm_muxer: {
        video: {
          codec: "V_MPEG4/ISO/AVC"
        },
        audio: {
          codec: "A_OPUS",
          bit_depth: 0
        }
      }
    },

    ffmpeg: {
      video: {
        codec: "libx264"
      },
      audio: {
        codec: "aac"
      }
    }
  }
  const default_config_from_url = get_default_config_from_url("ffmpeg-worker-hls.js");
  let audio_context = new AudioContext();
  try {
    audio_context.resume();
  } catch {
    // Safari requires us to create and resume an AudioContext
    // in the click handler and doesn't track async calls.
    audio_context.close();
    audio_context = new AudioContext();
    audio_context.resume();
  }
  const ingestion_url = "https://a.upload.youtube.com/http_upload_hls?cid=c0t1-4y9g-5ajg-xua4-4fkp&copy=0&file=" //HLS Stream
  const method = "POST";
  const mode = "cors"; //"cors" | "no-cors" | "same-origin"

  const streamer = new Streamer(
      stream, audio_context, ingestion_url, default_config_from_url,
      false, { method, mode }, false, window
      )
streamer?.addEventListener('run', () => console.log('Streamer running'));
streamer?.start()

}

pushStreamToYouTubeLive (stream); But nothing is streaming. Please what am I doing wrong?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions