Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anthonychu/captionr
https://github.com/anthonychu/captionr
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/anthonychu/captionr
- Owner: anthonychu
- License: mit
- Created: 2019-03-25T05:02:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:32:32.000Z (over 1 year ago)
- Last Synced: 2024-05-27T15:16:15.636Z (4 months ago)
- Language: C#
- Homepage: https://anthonychu.ca/post/realtime-captioning-translation-cognitive-services-signalr-azure-functions/
- Size: 3.06 MB
- Stars: 61
- Watchers: 7
- Forks: 38
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CaptionR
Serverless real-time captioning and translation using:
* Microsoft Azure Cognitive Services - [Speech-to-Text JavaScript SDK](https://www.npmjs.com/package/microsoft-cognitiveservices-speech-sdk)
* [Vue.js](https://vuejs.org/)
* [Azure Functions](https://docs.microsoft.com/azure/azure-functions/?WT.mc_id=captionr-github-antchu)
* [Azure SignalR Service](https://docs.microsoft.com/azure/azure-signalr/?WT.mc_id=captionr-github-antchu)
## Resources
### Demo
[](https://www.youtube.com/watch?v=YLtXoGk8A1c)
### Blog Post
[Real-time Speech-to-Text and Translation with Cognitive Services, Azure Functions, and SignalR Service](https://anthonychu.ca/post/realtime-captioning-translation-cognitive-services-signalr-azure-functions/)
### Architecture
## Project setup
The app has 2 main projects:
* Vue.js frontend in `src/vueapp`
* Azure Functions backend in `src/functions-javascript` (C# and Java also available)
### Azure resources
You'll also need to create a couple of free resources on Azure to get started:
#### Azure Speech Services - free tier
```bash
az cognitiveservices account create -n $SPEECH_SERVICE_NAME -g $RESOURCE_GROUP_NAME --kind SpeechServices --sku F0 -l westus
az cognitiveservices account keys list -n $SPEECH_SERVICE_NAME -g $RESOURCE_GROUP_NAME
```
`F0` is the free SKU. You can also create it in the [portal](https://portal.azure.com/?WT.mc_id=captionr-github-antchu#create/Microsoft.CognitiveServicesSpeechServices).
#### Azure SignalR Service - free tier
```bash
az signalr create -n $SIGNALR_NAME -g $RESOURCE_GROUP_NAME --sku Free_DS2 -l westus
az signalr key list -n $SIGNALR_NAME -g $RESOURCE_GROUP_NAME
```
You can also create it using the [portal](https://portal.azure.com/?WT.mc_id=captionr-github-antchu#create/Microsoft.SignalRGalleryPackage).
### Vue.js app
Install npm packages and start the Vue.js dev server:
```bash
npm install
npm run serve
```
### Azure Function app
Create a file named local.settings.json (copy from local.settings.sample.json). Fill in the SignalR Service connection string.
With the [Azure Functions Core Tools](https://docs.microsoft.com/azure/azure-functions/functions-run-local?WT.mc_id=captionr-github-antchu#install-the-azure-functions-core-tools) installed, run the function app:
(JavaScript)
```bash
func extensions install
func start
```
## More information
Check out the [blog post](https://anthonychu.ca/post/realtime-captioning-translation-cognitive-services-signalr-azure-functions/).