mirror of
https://github.com/davedoesdev/streamana.git
synced 2024-08-20 23:27:41 +08:00
Stream from your Web browser to YouTube Live. No plugins or native apps required!
certs | ||
ffmpeg.js@7f3fe0e206 | ||
scripts | ||
site | ||
webm-muxer.js@16221d5b9a | ||
.gitmodules | ||
LICENCE | ||
README.adoc |
= Streamana == Description Streamana is a Web page which streams your camera and microphone to YouTube Live (or any other HLS or DASH receiver). It uses https://github.com/davedoesdev/webm-muxer.js[webm-muxer.js] and https://github.com/davedoesdev/ffmpeg.js[ffmpeg.js]. == Demo You can see it in action http://rawgit.davedoesdev.com/davedoesdev/streamana/publish/site/streamana.html[here]. Use Chrome 95 or later. . Get your ingestion URL from https://studio.youtube.com[YouTube Studio]. .. Click _CREATE_ and then select _Go Live_ from the drop-down menu. .. Under _Select stream key_, select _Create new stream key_. .. Give your key a name. .. You must select _HLS_ as the streaming protocol. Note: YouTube DASH ingestion is only available by using the Youtube API. See https://developers.google.com/youtube/v3/live/guides/encoding-with-dash#url-structure[here] for more details. .. Click _CREATE_. .. Make sure the key you created is selected. .. Click _COPY_ next to _Stream URL_. . Paste the URL into the _Ingestion URL_ box in Streamana. . Click _Live_. ** If you want to see what's happening under the hood, open developer tools (F12). . To end the stream, click _Live_ again. You can also change various options: * Mute and unmute your microphone by clicking on the microphone symbol. * Hide and show your camera by clicking on the camera symbol. * Under the drop-down menu (top-left): ** Change the camera resolution. ** Convert your camera's video to greyscale. ** Lock the camera to portrait mode (where available, e.g. mobile phones). ** Zoom the camera to fill the page. ** Switch between HLS and DASH encoding. ** Switch between POST and PUT requests. ** Switch between CORS modes. ** Switch between https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder[MediaRecorder] and https://www.w3.org/TR/webcodecs/[WebCodecs]. ** Select a different version of https://github.com/davedoesdev/ffmpeg.js[ffmpeg.js] to perform the HLS or DASH encoding. == Customisation You can change the look and feel of Streamana by editing link:site/streamana.html[] and link:site/streamana.css[]. The camera video is passed through a WebGL fragment shader in link:site/shader.js[] so you can change this to add video effects or overlays. The shader already handles resizing and rotating the video in `main()`. The optional greyscale conversion is in the `tpix()` function. The page's functionality is defined in link:site/streamana.js[] and link:site/streamer.js[]. link:site/streamer.js[] exports a function, `get_default_config_from_url`, and a class, `Streamer`, which does the heavy lifting. You should first call `get_default_config_from_url`. It takes a single argument, the URL of `ffmpeg-worker-hls.js` or `ffmpeg-worker-dash.js` in https://github.com/davedoesdev/ffmpeg.js[ffmpeg.js]. This allows your application (or the end user if required) to supply its own version, in accordance with LGPL. It can be a relative path (i.e. just `ffmpeg-worker-hls.js` or `ffmpeg-worker-dash.js`). `get_default_config_from_url` determines the streaming protocol (`hls` or `dash`) and returns the default configuration for the protocol: ```js { ffmpeg_lib_url, // the URL you passed to `get_default_config_from_url` protocol, // `hls` or `dash` video: { // properies of the video you will be supplying bitrate: 2500 * 1000, framerate: 30 }, audio: { // properties of the audio you will be supplying bitrate: 128 * 1000 }, media_recorder: { // default options for MediaRecorder if it ends up being used video: { codec: protocol === 'dash' ? 'vp9' : 'H264', // video codec }, audio: { codec: 'opus' // audio codec }, webm: true, // container format mp4: false // if true, requires ffmpeg-worker-hls.js or ffmpeg-worker-dash.js // to be configured with MP4 support (which is not the default) }, webcodecs: { // default options for WebCodecs if it ends up being used video: { // video codec and options ...(protocol === 'dash' ? { codec: 'vp09.00.10.08.01' } : { codec: 'avc1.42E01E' /*'avc1.42001E'*/, avc: { format: 'annexb' } }) }, audio: { codec: 'opus' /*'pcm'*/, // audio codec }, webm_muxer: { // options for webm-muxer.js video: { codec: protocol === 'dash' ? 'V_VP9' : 'V_MPEG4/ISO/AVC' }, audio: { codec: 'A_OPUS', bit_depth: 0 // 32 for pcm */ } } }, ffmpeg: { // desired ffmpeg output codecs // Note: If the encoded stream already uses the desired codec then // it will pass `copy` instead. For example, if your browser encodes // your video to H.264 already then `copy` will be used instead of // `libx264`. This means you can use `ffmpeg-worker-hls.js` or // `ffmpeg-worker-dash.js` that doesn't contain a H.264 encoder. video: { codec: protocol === 'dash' ? 'libvpx-vp9' : 'libx264' }, audio: { codec: protocol === 'dash' ? 'libopus' : 'aac' } } }; ``` You application can modify the returned configuration before creating a `Streamer` object. Use the `Streamer` class as follows: * The constructor takes the following arguments: ** The https://developer.mozilla.org/en-US/docs/Web/API/MediaStream[`MediaStream`] containing your video and audio tracks. Note that link:site/streamana.js[] supplies blank video when the camera is hidden and silent audio when the microphone is muted. ** An https://developer.mozilla.org/en-US/docs/Web/API/AudioContext[AudioContext] instance. This is used to create a persistent audio generator for triggering updates to avoid browser timer throttling. If you don't already use one in your application, you can just `new AudioContext()`. ** The ingestion URL. ** The configuration returned by calling `get_default_config_from_url` (see above), optionally modified by your application. ** Whether the video is rotated. ** Extra request options for https://developer.mozilla.org/en-US/docs/Web/API/fetch[`fetch`]. You can use this to override the default request method (`POST`) or CORS mode (`no-cors`). ** Whether to encode audio and video using WebCodecs (`true`) or MediaRecorder (`false`). * Call the `async start()` method to start streaming. * Call the `end()` method to stop streaming. `Streamer` extends from https://developer.mozilla.org/en-US/docs/Web/API/EventTarget[`EventTarget`] and dispatches the following events: * `start` when streaming has started. * `update`, dispatched frame rate times a second. link:site/streamana.js[] reacts to this event by refreshing the WebGL canvas from the camera. * `exit` when streaming has stopped. * `error` if an error occurs. == Licence Streamana is licensed under the terms of the link:LICENCE[MIT licence]. Note that https://github.com/davedoesdev/ffmpeg.js[ffmpeg.js] is licensed under LGPL. Streamana runs it inside a Web Worker and communicates with it via message passing. The end user can replace the version used by changing the URL in the user interface. Note also that the https://github.com/davedoesdev/ffmpeg.js[ffmpeg.js] HLS and DASH distributions contain no H.264 or MP4 code. All encoding is done by the browser using https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder[`MediaRecorder`] or https://www.w3.org/TR/webcodecs/[WebCodecs].