\n \n\n# BerrySDK - Screen Recording & Video Messaging API\n\nImplement screen recording and video messaging capabilities into your application with 10 lines of code!\n\n## Getting started\n\nHere is a berrycast explaining this documentation : [Berrycast introduction](https://www.berrycast.com/conversations/da73812b-082a-5751-b46f-f6d62d62c7fe)\n\n### Installation\n\nInstall the package\n\n```shell\nyarn add @berrycast/web-ui\n# or\nnpm install @berrycast/web-ui\n```\n\n### See if we support your current browser\n\n```ts\nconst isSupported: boolean = await BerrycastWebUI.isSupported();\n// Note : Our SDK currently works only on chromium-based browsers and safari.\n```\n\n### Create your BerrycastWebUI object\n\n```ts\nconst berrycastWebUI = await BerrycastWebUI.initialize({\n publicApiKey: 'pk_YOUR_PUBLIC_KEY_CONTACT_US_TO_HAVE_ONE',\n});\n// Will throw an error if the public api key is not valid.\n```\n\n### To generate your public api key\n\nTo have your own public api key, you will need to contact us at :\n[https://www.berrycast.com/screen-recorder-sdk](https://www.berrycast.com/screen-recorder-sdk).\n\nIn the meantime, you can use the test public api key.\n\n```\nWARNING : All videos record with this api key will be deleted in 24h.\npk_9386b604dda75a019724cac522aea789efe0dcad4f4d553999ea67b3564f6\n```\n\n### Show the record UI\n\n```ts\nconst recordUI = berrycastWebUI.showRecordUI();\n```\n\n### Bind record events\n\n```ts\nrecordUI.on('cancel', event => {});\nrecordUI.on('start', event => {});\nrecordUI.on('stop', event => {});\nrecordUI.on('restart', event => {});\nrecordUI.on('uploaded', event => console.warn(event.data));\nrecordUI.on('error', event => {});\nrecordUI.on('close', event => {});\n```\n\n### Languages\n\n```ts\nconst berrycastWebUI = await BerrycastWebUI.initialize({\n // We only support theses languages right now. If you need more, please contact us. Default : Browser language\n language: 'en' | 'fr' | 'de',\n});\n```\n\n### Styles\n\n```ts\nconst berrycastWebUI = await BerrycastWebUI.initialize({\n styles?: {\n colors?: {\n // Allow to set the primary color of the Berrycast UI Elements. Default: berrycast color.\n primary: '#000000';\n // Allow to set the secondary color of the Berrycast UI Elements. Default: berrycast color.\n secondary: '#000000';\n }\n }\n});\n```\n\n### Record params\n\n```ts\nenum RECORDING_TYPES {\n SCREEN = 'screen',\n CAMERA = 'camera',\n}\n\nconst recordUI = berrycastWebUI.showRecordUI({\n // Prevent the possibility to show the camera. Default: true\n allowCamera?: boolean;\n\n // Filter and order the allowing recording Types. Default: ['screen', 'camera'].\n allowedRecordingTypes?: RECORDING_TYPES[];\n\n // Select the default recording type. Default: The first item on the allowedRecordingTypes list.\n defaultRecordingType?: RECORDING_TYPES;\n\n // Allow to add a step when the end-user will be able to see a preview of the video and can review it before sending it. Default: false\n reviewWindow?: boolean;\n\n manualUpload?: {\n // Show or Hide the upload tab. Default : true.\n enable: boolean;\n };\n\n uploadProgressWindow?: {\n // Show or hide the upload progress percentage. Default : true.\n enable: boolean;\n };\n\n settingsWindow?: {\n // Choose the position of the settings window. Default : top-right\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n };\n});\n```\n\n### Display Berrycast player\n\n```ts\nconst player = berrycastWebUI.buildPlayer({\n conversationUuid: 'A_CONVERSATION_UUID',\n});\nconsole.warn(player.element); // player.element is a HTML Element\n```\n\n### Convert a link into a Berrycast player\n\n```ts\nconst player = berrycastWebUI.convertLinkElementIntoPlayer({\n linkElement: yourLinkHTMLElement,\n});\n// The player will be automatically added to the dom, replacing the link element.\n// The url needs to be a valid berrycast conversation url, otherwise, an exception will be thrown.\n```\n\n## Ressources\n\n### Pricing\n\n[https://www.berrycast.com/screen-recorder-sdk](https://www.berrycast.com/screen-recorder-sdk).\n\n### Demo\n\n[https://www.berrycast.com/screen-recorder-sdk/chat-demo](https://www.berrycast.com/screen-recorder-sdk/chat-demo)\n\n### Support\n\n[support@berrycast.com](mailto:support@berrycast.com)\n\n \n\n---\n\n \n\n## Full example\n\n```ts\nimport { BerrycastWebUI } from '@berrycast/web-ui';\n\nconst button = document.createElement('button');\nbutton.innerText = 'Record';\n\ndocument.body.appendChild(button);\n\nbutton.addEventListener('click', async () => {\n const berrycastWebUI = await BerrycastWebUI.initialize({\n publicApiKey: 'pk_YOUR_PUBLIC_KEY_CONTACT_US_TO_HAVE_ONE',\n });\n\n const recordUI = berrycastWebUI.showRecordUI();\n recordUI.on('cancel', evt => {\n console.warn('cancel', evt.data);\n });\n\n recordUI.on('start', () => {\n console.warn('start');\n button.innerText = 'Recording...';\n });\n\n recordUI.on('stop', () => {\n console.warn('stop');\n });\n\n recordUI.on('restart', () => {\n console.warn('restart');\n });\n\n recordUI.on('uploaded', event => {\n console.warn('uploaded');\n console.warn(event.data);\n\n const player = berrycastWebUI.buildPlayer({\n conversationUuid: event.data.uuid,\n });\n\n const div = document.createElement('div');\n div.style = 'max-width: 800px;';\n\n div.appendChild(player.element);\n document.body.appendChild(div);\n });\n\n recordUI.on('progress', event => {\n console.warn(event.data);\n });\n\n recordUI.on('error', () => {\n console.error('error');\n });\n\n recordUI.on('close', () => {\n console.warn('close');\n button.innerText = 'Record';\n });\n});\n```\n","readmeFilename":"README.md"}
![\"Berrycast](\"https://www.berrycast.com/static/images/berrycast-lg.png?v=20220727\")
\n \n![\"npm](\"https://img.shields.io/npm/v/@berrycast/web-ui.svg\")
\n