Skip to content

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

@Nwanna-Joseph

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?

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