├── .gitignore ├── postcss.config.js ├── public ├── favicon.ico ├── vercel.svg └── next.svg ├── CHANGELOG.md ├── next.config.js ├── src ├── utils │ ├── generateuserid.tsx │ ├── randomframevalues.tsx │ └── messagehandler.tsx ├── pages │ ├── _document.tsx │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── styles │ ├── globals.css │ └── Home.module.css └── components │ └── emojis.tsx ├── next-env.d.ts ├── .github └── workflows │ └── create-release-from-changelog.yml ├── tailwind.config.js ├── tsconfig.json ├── LICENSE ├── package.json ├── README.md └── CONTRIBUTING.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apivideo/livestream-with-realtime-communication/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All changes to this project will be documented in this file. 3 | 4 | ## [1.0.0] - 2022-10-10 5 | - First version 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /src/utils/generateuserid.tsx: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from 'uuid'; 2 | 3 | export default function GenerateUserId() : string { 4 | return uuidv4(); 5 | } 6 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import type { AppProps } from 'next/app' 2 | import '@/styles/globals.css' 3 | import React, { useState } from 'react' 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | 6 | 7 | 8 | return ( 9 | 10 | ) 11 | } 12 | 13 | export default MyApp -------------------------------------------------------------------------------- /src/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 1 | .app { 2 | height: 100vh; 3 | width: 100vw; 4 | } 5 | 6 | .app__videos { 7 | height: 700; 8 | width: 700; 9 | scroll-snap-type: y mandatory; 10 | overflow-y: scroll; 11 | } 12 | 13 | @media screen and (min-width: 1024px) { 14 | .app__videos { 15 | display: none; 16 | } 17 | } 18 | 19 | /* upload.module.css */ 20 | 21 | .upload { 22 | height: 50px; 23 | width: 100%; 24 | } -------------------------------------------------------------------------------- /.github/workflows/create-release-from-changelog.yml: -------------------------------------------------------------------------------- 1 | name: Create draft release from CHANGELOG.md 2 | 3 | on: 4 | push: 5 | paths: 6 | - 'CHANGELOG.md' 7 | 8 | jobs: 9 | update-documentation: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v2 13 | - name: Create draft release if needed 14 | uses: apivideo/api.video-release-from-changelog-action@main 15 | with: 16 | github-auth-token: ${{ secrets.GITHUB_TOKEN }} 17 | prefix: v 18 | 19 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './src/pages/**/*.{js,ts,jsx,tsx}', 5 | './src/components/**/*.{js,ts,jsx,tsx}', 6 | './src/app/**/*.{js,ts,jsx,tsx}', 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 12 | 'gradient-conic': 13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } 19 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "paths": { 18 | "@/*": ["./src/*"] 19 | } 20 | }, 21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /src/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | 2 | .video_wrapper { 3 | position:relative; 4 | z-index:0; 5 | } 6 | .emojis { 7 | position:absolute; 8 | } 9 | .videos { 10 | position:relative; 11 | width:100vw; 12 | height:100vh; 13 | } 14 | 15 | .overlay { 16 | position: absolute; 17 | bottom: 1%; 18 | left:auto; 19 | width:auto; 20 | height:auto; 21 | 22 | /* background-color: DodgerBlue; */ 23 | border: none; /* Remove borders */ 24 | color: white; /* White text */ 25 | padding: 12px 16px; /* Some padding */ 26 | font-size: 16px; /* Set a font size */ 27 | cursor: pointer; /* Mouse pointer on hover */ 28 | display: "block"; 29 | margin: 0 auto; 30 | 31 | } 32 | 33 | .overlay:hover { 34 | background-color: RoyalBlue; 35 | } 36 | 37 | /* upload.module.css */ 38 | 39 | .upload { 40 | height: 50px; 41 | width: 100%; 42 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 api.video 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/utils/randomframevalues.tsx: -------------------------------------------------------------------------------- 1 | 2 | const getRandomArbitrary = (min: number, max: number) : number => { 3 | return Math.random() * (max - min) + min; 4 | } 5 | 6 | const getRandomInt = (min: number, max: number) : number =>{ 7 | min = Math.ceil(min); 8 | max = Math.floor(max); 9 | return Math.floor(Math.random() * (max - min) + min); 10 | } 11 | 12 | export default function RandomizeFrameValues() : any[] { 13 | let array = [] 14 | let yCoordinate = getRandomInt(-150, -270); 15 | let opacity = 0.0; 16 | let scale = getRandomArbitrary(3.5, 5); 17 | for(let i=0; yCoordinate<50; i++ ) { 18 | let randomXcoordinate = getRandomInt(0, 10); 19 | let randomMultiplier = getRandomInt(1, 3); 20 | let randomYaddition = getRandomInt(0, 10); 21 | if(i % randomMultiplier) { 22 | randomXcoordinate = -randomXcoordinate; 23 | } 24 | yCoordinate = yCoordinate + randomYaddition + i 25 | if(i > 3) { 26 | opacity = opacity + 0.1 27 | scale = scale - 0.2 28 | } 29 | array.push(`transform: translate(${randomXcoordinate}px, ${yCoordinate}px) scale(${scale}); opacity: ${opacity}`) 30 | } 31 | return array 32 | } -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/messagehandler.tsx: -------------------------------------------------------------------------------- 1 | import PubNub from 'pubnub'; 2 | 3 | export default class MessageHandler { 4 | 5 | // Your PubNub keys 6 | #publishKey = 'pub-c-xxxx'; 7 | #subscribeKey = 'sub-c-xxxx'; 8 | userId: string; 9 | pubnub: any; 10 | channel: string; 11 | message: any; 12 | listener: any; 13 | constructor(userId: string) { 14 | this.userId = userId 15 | this.channel = '' 16 | this.message = '' 17 | this.pubnub = new PubNub({ 18 | publishKey: this.#publishKey, 19 | subscribeKey: this.#subscribeKey, 20 | userId: this.userId, 21 | }) 22 | } 23 | 24 | subscribeToChannel = (channelName: string) => { 25 | console.log(this.pubnub.getSubscribedChannels()) 26 | this.pubnub.subscribe({channels: [channelName]}); 27 | 28 | return this.pubnub; 29 | } 30 | 31 | setChannel = (channelName: string) => { 32 | this.channel = channelName; 33 | } 34 | 35 | setMessage = (message: string) => { 36 | console.log('SET MESSAGE', message) 37 | this.message = {'text': message} 38 | } 39 | 40 | publishMessage = () => { 41 | this.pubnub.publish( 42 | { 43 | channel: this.channel, 44 | message: this.message, 45 | }, 46 | function(status: any, response: any) { 47 | console.log(status); 48 | console.log(response); 49 | } 50 | ); 51 | } 52 | } 53 | 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "livestream-emojis", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "resolutions": { 12 | "@types/react": "18.2.0", 13 | "@types/react-dom": "18.2.0" 14 | }, 15 | "dependencies": { 16 | "@api.video/nodejs-client": "^2.3.2", 17 | "@api.video/player-sdk": "^1.2.24", 18 | "@api.video/react-player": "^1.0.2", 19 | "@emoji-mart/data": "^1.1.2", 20 | "@emoji-mart/react": "^1.1.1", 21 | "@types/node": "18.15.12", 22 | "@types/react": "^18.0.37", 23 | "@types/react-dom": "18.0.11", 24 | "animation": "^0.1.3", 25 | "autoprefixer": "10.4.14", 26 | "emoji-mart": "^5.5.2", 27 | "eslint": "8.38.0", 28 | "eslint-config-next": "13.3.0", 29 | "install": "^0.13.0", 30 | "next": "13.3.0", 31 | "npm": "^9.6.5", 32 | "postcss": "8.4.23", 33 | "pubnub": "^7.2.2", 34 | "react": "18.2.0", 35 | "react-animations": "^1.0.0", 36 | "react-dom": "18.2.0", 37 | "react-flying-objects": "^1.0.7", 38 | "react-motion-animate": "^1.0.6", 39 | "react-native": "^0.71.7", 40 | "react-native-animated-emoji": "^0.1.4", 41 | "react-native-video": "^5.2.1", 42 | "react-native-web": "^0.19.4", 43 | "react-player": "^2.12.0", 44 | "react-simple-animate": "^3.5.2", 45 | "react-type-animation": "^3.0.1", 46 | "swr": "^2.1.3", 47 | "tailwindcss": "3.3.1", 48 | "typescript": "5.0.4", 49 | "uuid": "^9.0.0" 50 | }, 51 | "devDependencies": { 52 | "@types/pubnub": "^7.2.1", 53 | "@types/react-animations": "^1.0.0", 54 | "@types/uuid": "^9.0.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import Video from '@api.video/nodejs-client/lib/model/Video' 2 | import React, { FC, useRef, useState } from 'react' 3 | import styles from '@/styles/Home.module.css' 4 | import ApiVideoPlayer from '@api.video/react-player' 5 | import { Emojis } from "../components/emojis"; 6 | import MessageHandler from '../utils/messagehandler'; 7 | import GenerateUserId from '../utils/generateuserid'; 8 | 9 | 10 | export interface IvideosProps { 11 | video: Video 12 | mutate: () => void 13 | } 14 | const streamId = 'xxxxxxxxxx'; 15 | 16 | const userId = GenerateUserId(); 17 | const messageHanlder = new MessageHandler(userId); 18 | const channel = messageHanlder.subscribeToChannel(streamId); 19 | 20 | const VideoComponent: FC = (): JSX.Element => { 21 | messageHanlder.setChannel(streamId) 22 | const videoRef = useRef(null) 23 | const [size, setSize] = useState([500, 500]) 24 | 25 | React.useEffect(()=> { 26 | setSize([window.innerHeight, window.innerWidth]) 27 | window.addEventListener('resize', ()=> { 28 | setSize([window.innerHeight, window.innerWidth]) 29 | }) 30 | }, []) 31 | 32 | return ( 33 | 34 |
35 |
58 | 59 | 60 | ) 61 | } 62 | 63 | export default VideoComponent 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![badge](https://img.shields.io/twitter/follow/api_video?style=social)](https://twitter.com/intent/follow?screen_name=api_video) 2 |   [![badge](https://img.shields.io/github/stars/apivideo/api.video-android-live-stream?style=social)](https://github.com/apivideo/api.video-android-live-stream) 3 |   [![badge](https://img.shields.io/discourse/topics?server=https%3A%2F%2Fcommunity.api.video)](https://community.api.video) 4 | ![](https://github.com/apivideo/.github/blob/main/assets/apivideo_banner.png) 5 |

Livestream with realtime communication

6 | 7 | [api.video](https://api.video) is the video infrastructure for product builders. Lightning fast 8 | video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in 9 | your app. 10 | 11 | # Table of contents 12 | 13 | - [Table of contents](#table-of-contents) 14 | - [Project description](#project-description) 15 | - [Getting started](#getting-started) 16 | - [Installation](#installation) 17 | - [Code sample](#code-sample) 18 | - [Documentation](#documentation) 19 | - [Dependencies](#dependencies) 20 | - [FAQ](#faq) 21 | 22 | # Project description 23 | 24 | A small example of how to build your own TikTok or Instagram Reels like use case. The example demostrates the use of api.video streaming and a css overlay of an emoji 25 | picker. We leverage PubNub in order to create an instant emoji sharing between users. 26 | # Getting started 27 | 28 | ## Installation 29 | 30 | Once the repo is cloned, `run npm install` or `yarn install` 31 | 32 | ### Add your stream id: 33 | 34 | Option 1: Navigate to the api.video dashboard and copy the stream id from the stream details 35 | 36 | Option 2: Fetch the stream id from the list of streams (https://docs.api.video/reference/get_live-streams) 37 | 38 | Replace the stream id in src/pages/index.tsx `const streamId = 'xxxxxxxxxx';` 39 | 40 | ### Add your PubNub publishing and subscription keys 41 | 42 | Sign up to PubNub 43 | 44 | Copy the publishing and subscrption keys 45 | 46 | Screenshot 2023-05-02 at 17 09 33 47 | 48 | Replace the keys in src/utils/messageHanlder.tsx 49 | `#publishKey = 'pub-c-xxxx'; 50 | #subscribeKey = 'sub-c-xxxx';` 51 | 52 | ### Run the example 53 | 54 | Run the example by `npm run dev` 55 | 56 | The example will run on `localhost:3000` 57 | 58 | # FAQ 59 | 60 | If you have any questions, ask us in the [community](https://community.api.video). Or 61 | use [issues](**TODO** link to github project issues).. 62 | -------------------------------------------------------------------------------- /src/components/emojis.tsx: -------------------------------------------------------------------------------- 1 | import data from '@emoji-mart/data' 2 | import Picker from '@emoji-mart/react' 3 | import { init } from 'emoji-mart' 4 | import React, { useState } from 'react' 5 | import { AnimateKeyframes } from 'react-simple-animate'; 6 | import { v4 as uuidv4 } from 'uuid'; // import UUID library 7 | import styles from '@/styles/Home.module.css' 8 | import randomFrameValues from '../utils/randomframevalues' 9 | 10 | export const Emojis = (msgHandler: any) => { 11 | const [emojiArray, setEmojiComp] = useState() 12 | React.useEffect(() => { 13 | console.log(msgHandler._listenerManager._listeners.length) 14 | if(msgHandler._listenerManager._listeners.length === 0) { 15 | // make sure to add the listener only once 16 | console.log("Adding listener") 17 | msgHandler.addListener({ 18 | message: function(receivedMessage: any) { 19 | console.log("The message text is: ", receivedMessage.message); 20 | console.log("Sent by: ", receivedMessage.publisher); 21 | if(receivedMessage.publisher !== msgHandler.userId) { 22 | showRemoteEmoji(receivedMessage.message.text) 23 | } 24 | } 25 | }); 26 | } 27 | }); 28 | const genFlyingEmojisComponent = (emoji: any) => { 29 | const keyFramesArray = randomFrameValues() 30 | const animateEmojis = 31 | [ 39 | {emoji} 40 | ] 41 | return animateEmojis; 42 | } 43 | 44 | const showRemoteEmoji = (emoji: any) => { 45 | const id = uuidv4() 46 | const flyingEmojiComp = genFlyingEmojisComponent(emoji); 47 | setEmojiComp(prevState => [...prevState ?? [], { id, flyingEmojiComp }]); 48 | } 49 | 50 | const getEmojiFromPicker = (emoji: any) => { 51 | const id = uuidv4() 52 | const flyingEmojiComp = genFlyingEmojisComponent(emoji.native) 53 | if(!msgHandler.addedEmoji?.publisher) { 54 | console.log('+++++++++PUBLISHING+++++++++++++') 55 | msgHandler.setMessage(emoji.native) 56 | msgHandler.publishMessage() 57 | } 58 | setEmojiComp(prevState => [...prevState ?? [], { id, flyingEmojiComp }]); 59 | } 60 | if(msgHandler.userId !== msgHandler.addedEmoji?.publisher && msgHandler.addedEmoji?.emojiText !== undefined) { 61 | showRemoteEmoji(msgHandler.addedEmoji?.emojiText); 62 | } 63 | init({ data }) 64 | return ( 65 |
66 | {emojiArray?.map(({ id, flyingEmojiComp }) => ( 67 | 68 | {flyingEmojiComp} 69 | 70 | ))} 71 | 72 | 73 |
74 | 75 | ) 76 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to api.video 2 | 3 | :movie_camera::+1::tada: Thank you for taking the time to contribute and participate in the implementation of a Video First World! :tada::+1::movie_camera: 4 | 5 | The following is a set of guidelines for contributing to api.video and its packages, which are hosted in the [api.video Organization](https://github.com/apivideo) on GitHub. 6 | 7 | #### Table of contents 8 | 9 | - [Contributing to api.video](#contributing-to-apivideo) 10 | - [Table of contents](#table-of-contents) 11 | - [Code of conduct](#code-of-conduct) 12 | - [I just have a question!](#i-just-have-a-question) 13 | - [How can I contribute?](#how-can-i-contribute) 14 | - [Reporting bugs](#reporting-bugs) 15 | - [Before submitting a bug report](#before-submitting-a-bug-report) 16 | - [How do I submit a (good) bug report?](#how-do-i-submit-a-good-bug-report) 17 | - [Suggesting enhancements](#suggesting-enhancements) 18 | - [How do I submit a (good) enhancement suggestion?](#how-do-i-submit-a-good-enhancement-suggestion) 19 | - [Pull requests](#pull-requests) 20 | - [Style guides](#style-guides) 21 | - [Git commit messages](#git-commit-messages) 22 | - [Documentation style guide](#documentation-style-guide) 23 | - [Additional notes](#additional-notes) 24 | - [Issue and pull request labels](#issue-and-pull-request-labels) 25 | - [Type of issue and issue state](#type-of-issue-and-issue-state) 26 | - [Topic categories](#topic-categories) 27 | - [Pull request labels](#pull-request-labels) 28 | 29 | ## Code of conduct 30 | 31 | This project and everyone participating in it is governed by the [api.video Code of Conduct](https://github.com/apivideo/.github/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [help@api.video](mailto:help@api.video). 32 | 33 | ## I just have a question! 34 | 35 | > **Note:** [Please don't file an issue to ask a question.] You'll get faster results by using the resources below. 36 | 37 | We have an official message board with a detailed FAQ and where the community chimes in with helpful advice if you have questions. 38 | 39 | * [The official api.video's Community](https://community.api.video/) 40 | * [api.video FAQ](https://community.api.video/c/faq/) 41 | 42 | 43 | ## How can I contribute? 44 | 45 | ### Reporting bugs 46 | 47 | This section guides you through submitting a bug report for api.video. Following these guidelines helps maintainers and the community understand your report :pencil:, reproduce the behavior :computer:, and find related reports :mag_right:. 48 | 49 | Before creating bug reports, please check [this list](#before-submitting-a-bug-report) as you might find out that you don't need to create one. When you are creating a bug report, please [include as many details as possible](#how-do-i-submit-a-good-bug-report). Fill out [the required template](https://github.com/apivideo/.github/blob/main/.github/ISSUE_TEMPLATE/bug_report.yml), the information it asks for helps us resolve issues faster. 50 | 51 | > **Note:** If you find a **Closed** issue that seems like it is the same thing that you're experiencing, open a new issue and include a link to the original issue in the body of your new one. 52 | 53 | #### Before submitting a bug report 54 | 55 | * **Check the [The official api.video's Community](https://community.api.video/)** for a list of common questions and problems. 56 | * **Determine which repository the problem should be reported in**. 57 | * **Perform a [cursory search](https://github.com/search?q=is%3Aissue+user%3Aapivideo)** to see if the problem has already been reported. If it has **and the issue is still open**, add a comment to the existing issue instead of opening a new one. 58 | 59 | #### How do I submit a (good) bug report? 60 | 61 | Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). After you've determined which repository your bug is related to, create an issue on that repository and provide the following information by filling in [the template](https://github.com/apivideo/.github/blob/main/.github/ISSUE_TEMPLATE/bug_report.yml). 62 | 63 | Explain the problem and include additional details to help maintainers reproduce the problem: 64 | 65 | * **Use a clear and descriptive title** for the issue to identify the problem. 66 | * **Describe the exact steps which reproduce the problem** in as many details as possible. When listing steps, **don't just say what you did, but explain how you did it**. 67 | * **Provide specific examples to demonstrate the steps**. Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets in the issue, use [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). 68 | * **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. 69 | * **Explain which behavior you expected to see instead and why.** 70 | * **Include screenshots or videos** which show you following the described steps and clearly demonstrate the problem. 71 | * **If the problem wasn't triggered by a specific action**, describe what you were doing before the problem happened and share more information using the guidelines below. 72 | 73 | Provide more context by answering these questions: 74 | 75 | * **Did the problem start happening recently** (e.g. after updating to a new version of api.video) or was this always a problem? 76 | * If the problem started happening recently.** 77 | * **Can you reliably reproduce the issue?** If not, provide details about how often the problem happens and under which conditions it normally happens. 78 | 79 | Include details about your configuration and environment: 80 | 81 | * **Which version of the api.video package are you using?** 82 | * **What's the name and version of the OS you're using?** 83 | 84 | ### Suggesting enhancements 85 | 86 | This section guides you through submitting an enhancement suggestion for api.video project, including completely new features and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion :pencil: and find related suggestions :mag_right:. 87 | 88 | When you are creating an enhancement suggestion, please [include as many details as possible](#how-do-i-submit-a-good-enhancement-suggestion). Fill in [the template](https://github.com/apivideo/.github/blob/main/.github/ISSUE_TEMPLATE/feature_request.yml), including the steps that you imagine you would take if the feature you're requesting existed. 89 | 90 | 91 | #### How do I submit a (good) enhancement suggestion? 92 | 93 | Enhancement suggestions are tracked as [GitHub issues](https://guides.github.com/features/issues/). After you've determined which repository your enhancement suggestion is related to, create an issue on that repository and provide the following information: 94 | 95 | * **Use a clear and descriptive title** for the issue to identify the suggestion. 96 | * **Provide a step-by-step description of the suggested enhancement** in as many details as possible. 97 | * **Provide specific examples to demonstrate the steps**. Include copy/pasteable snippets which you use in those examples, as [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). 98 | * **Describe the current behavior** and **explain which behavior you expected to see instead** and why. 99 | * **Include screenshots** which help you demonstrate the steps or point out the part of api.video which the suggestion is related to. 100 | * **Explain why this enhancement would be useful** to most api.video users and isn't something that can or should be implemented as a community package. 101 | * **Specify which version of the api.video package you're using.** 102 | * **Specify the name and version of the OS you're using.** 103 | 104 | 105 | ### Pull requests 106 | 107 | The process described here has several goals: 108 | 109 | - Maintain api.video's quality 110 | - Fix problems that are important to users 111 | - Engage the community in working toward the best possible api.video 112 | - Enable a sustainable system for api.video's maintainers to review contributions 113 | 114 | Please follow these steps to have your contribution considered by the maintainers: 115 | 116 | 1. Explain what, why and how you resolved the issue. If you have a related issue, please mention it. 117 | 2. Follow the [style guides](#style-guides) 118 | 3. After you submit your pull request, verify that all [status checks](https://help.github.com/articles/about-status-checks/) are passing
What if the status checks are failing?If a status check is failing, and you believe that the failure is unrelated to your change, please leave a comment on the pull request explaining why you believe the failure is unrelated. A maintainer will re-run the status check for you. If we conclude that the failure was a false positive, then we will open an issue to track that problem with our status check suite.
119 | 120 | While the prerequisites above must be satisfied prior to having your pull request reviewed, the reviewer(s) may ask you to complete additional design work, tests, or other changes before your pull request can be ultimately accepted. 121 | 122 | ## Style guides 123 | 124 | ### Git commit messages 125 | 126 | * Use the present tense ("Add feature" not "Added feature") 127 | * Limit the first line to 72 characters or less 128 | * Reference issues and pull requests after the first line 129 | * Consider starting the commit message with an applicable emoji: 130 | * :art: `:art:` when improving the format/structure of the code 131 | * :racehorse: `:racehorse:` when improving performance 132 | * :non-potable_water: `:non-potable_water:` when plugging memory leaks 133 | * :memo: `:memo:` when writing docs 134 | * :penguin: `:penguin:` when fixing something on Linux 135 | * :apple: `:apple:` when fixing something on macOS 136 | * :checkered_flag: `:checkered_flag:` when fixing something on Windows 137 | * :bug: `:bug:` when fixing a bug 138 | * :fire: `:fire:` when removing code or files 139 | * :green_heart: `:green_heart:` when fixing the CI build 140 | * :white_check_mark: `:white_check_mark:` when adding tests 141 | * :lock: `:lock:` when dealing with security 142 | * :arrow_up: `:arrow_up:` when upgrading dependencies 143 | * :arrow_down: `:arrow_down:` when downgrading dependencies 144 | * :shirt: `:shirt:` when removing linter warnings 145 | 146 | ### Documentation style guide 147 | 148 | * Use [Markdown](https://daringfireball.net/projects/markdown). 149 | 150 | 151 | ## Additional notes 152 | 153 | ### Issue and pull request labels 154 | 155 | This section lists the labels we use to help us track and manage issues and pull requests on all api.video repositories. 156 | 157 | [GitHub search](https://help.github.com/articles/searching-issues/) makes it easy to use labels for finding groups of issues or pull requests you're interested in. We encourage you to read about [other search filters](https://help.github.com/articles/searching-issues/) which will help you write more focused queries. 158 | 159 | 160 | #### Type of issue and issue state 161 | 162 | | Label name | `apivideo` :mag_right: | Description | 163 | | --- | --- | --- | 164 | | `enhancement` | [search][search-apivideo-org-label-enhancement] | Feature requests. | 165 | | `bug` | [search][search-apivideo-org-label-bug] | Confirmed bugs or reports that are very likely to be bugs. | 166 | | `question` | [search][search-apivideo-org-label-question] | Questions more than bug reports or feature requests (e.g. how do I do X). | 167 | | `feedback` | [search][search-apivideo-org-label-feedback] | General feedback more than bug reports or feature requests. | 168 | | `help-wanted` | [search][search-apivideo-org-label-help-wanted] | The api.video team would appreciate help from the community in resolving these issues. | 169 | | `more-information-needed` | [search][search-apivideo-org-label-more-information-needed] | More information needs to be collected about these problems or feature requests (e.g. steps to reproduce). | 170 | | `needs-reproduction` | [search][search-apivideo-org-label-needs-reproduction] | Likely bugs, but haven't been reliably reproduced. | 171 | | `blocked` | [search][search-apivideo-org-label-blocked] | Issues blocked on other issues. | 172 | | `duplicate` | [search][search-apivideo-org-label-duplicate] | Issues which are duplicates of other issues, i.e. they have been reported before. | 173 | | `wontfix` | [search][search-apivideo-org-label-wontfix] | The api.video team has decided not to fix these issues for now, either because they're working as intended or for some other reason. | 174 | | `invalid` | [search][search-apivideo-org-label-invalid] | Issues which aren't valid (e.g. user errors). | 175 | | `package-idea` | [search][search-apivideo-org-label-package-idea] | Feature request which might be good candidates for new packages, instead of extending api.video packages. | 176 | | `wrong-repo` | [search][search-apivideo-org-label-wrong-repo] | Issues reported on the wrong repository. | 177 | 178 | #### Topic categories 179 | 180 | | Label name | `apivideo` :mag_right: | Description | 181 | | --- | --- | --- | 182 | | `windows` | [search][search-apivideo-org-label-windows] | Related to api.video running on Windows. | 183 | | `linux` | [search][search-apivideo-org-label-linux] | Related to api.video running on Linux. | 184 | | `mac` | [search][search-apivideo-org-label-mac] | Related to api.video running on macOS. | 185 | | `documentation` | [search][search-apivideo-org-label-documentation] | Related to any type of documentation. | 186 | | `performance` | [search][search-apivideo-org-label-performance] | Related to performance. | 187 | | `security` | [search][search-apivideo-org-label-security] | Related to security. | 188 | | `ui` | [search][search-apivideo-org-label-ui] | Related to visual design. | 189 | | `api` | [search][search-apivideo-org-label-api] | Related to api.video's public APIs. | 190 | 191 | #### Pull request labels 192 | 193 | | Label name | `apivideo` :mag_right: | Description 194 | | --- | --- | --- | 195 | | `work-in-progress` | [search][search-apivideo-org-label-work-in-progress] | Pull requests which are still being worked on, more changes will follow. | 196 | | `needs-review` | [search][search-apivideo-org-label-needs-review] | Pull requests which need code review, and approval from maintainers or api.video team. | 197 | | `under-review` | [search][search-apivideo-org-label-under-review] | Pull requests being reviewed by maintainers or api.video team. | 198 | | `requires-changes` | [search][search-apivideo-org-label-requires-changes] | Pull requests which need to be updated based on review comments and then reviewed again. | 199 | | `needs-testing` | [search][search-apivideo-org-label-needs-testing] | Pull requests which need manual testing. | 200 | 201 | [search-apivideo-org-label-enhancement]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Aenhancement 202 | [search-apivideo-org-label-bug]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Abug 203 | [search-apivideo-org-label-question]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Aquestion 204 | [search-apivideo-org-label-feedback]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Afeedback 205 | [search-apivideo-org-label-help-wanted]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Ahelp-wanted 206 | [search-apivideo-org-label-more-information-needed]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Amore-information-needed 207 | [search-apivideo-org-label-needs-reproduction]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Aneeds-reproduction 208 | [search-apivideo-org-label-windows]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Awindows 209 | [search-apivideo-org-label-linux]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Alinux 210 | [search-apivideo-org-label-mac]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Amac 211 | [search-apivideo-org-label-documentation]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Adocumentation 212 | [search-apivideo-org-label-performance]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Aperformance 213 | [search-apivideo-org-label-security]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Asecurity 214 | [search-apivideo-org-label-ui]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Aui 215 | [search-apivideo-org-label-api]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Aapi 216 | [search-apivideo-org-label-blocked]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Ablocked 217 | [search-apivideo-org-label-duplicate]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Aduplicate 218 | [search-apivideo-org-label-wontfix]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Awontfix 219 | [search-apivideo-org-label-invalid]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Ainvalid 220 | [search-apivideo-org-label-package-idea]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Apackage-idea 221 | [search-apivideo-org-label-wrong-repo]: https://github.com/search?q=is%3Aopen+is%3Aissue+user%3Aapivideo+label%3Awrong-repo 222 | [search-apivideo-org-label-work-in-progress]: https://github.com/search?q=is%3Aopen+is%3Apr+repo%3Aapivideo%2Fapivideo+label%3Awork-in-progress 223 | [search-apivideo-org-label-needs-review]: https://github.com/search?q=is%3Aopen+is%3Apr+repo%3Aapivideo%2Fapivideo+label%3Aneeds-review 224 | [search-apivideo-org-label-under-review]: https://github.com/search?q=is%3Aopen+is%3Apr+repo%3Aapivideo%2Fapivideo+label%3Aunder-review 225 | [search-apivideo-org-label-requires-changes]: https://github.com/search?q=is%3Aopen+is%3Apr+repo%3Aapivideo%2Fapivideo+label%3Arequires-changes 226 | [search-apivideo-org-label-needs-testing]: https://github.com/search?q=is%3Aopen+is%3Apr+repo%3Aapivideo%2Fapivideo+label%3Aneeds-testing 227 | 228 | [help-wanted]:https://github.com/search?q=is%3Aopen+is%3Aissue+label%3Ahelp-wanted+user%3Aapivideo+sort%3Acomments-desc 229 | --------------------------------------------------------------------------------