Stream.new

This project outlines a comprehensive setup for creating and managing a virtual event platform, integrating Mux for video processing and streaming, alongside a Slackbot for content moderation. The system is built on Next.js, leveraging its dynamic routing and API routes for an efficient, serverless architecture. Here’s a breakdown of the components and setup steps:

Components:

• Mux: Utilized for direct video uploads, secure webhook communications, HLS video playback, and video quality metrics tracking through Mux Data.
• Slackbot Moderator: Configured to notify a Slack channel via an Incoming Webhook when a new Mux asset is ready, including video details and a storyboard of thumbnails.
• Next.js: Employs SWR for dynamic data fetching, /pages/api routes for secure Mux API interactions, and dynamic routing for flexible content delivery.

Getting Started:

1. Mux Account Creation: Sign up for Mux to access video APIs. The account starts in “test mode” with watermarking and 10-second clips until billing information is added.
2. Environment Variable Setup: Duplicate the .env.local.example file to .env.local and populate it with your Mux API credentials and optional variables for Slack integration and Mux Data.
3. Deployment on Vercel: Deploy your project to the cloud with Vercel, ensuring all necessary environment variables are configured.

Optional Steps:

4. Slackbot Moderator Setup: Establish a Slack Incoming Webhook and configure a new webhook in your Mux dashboard for event notifications.
5. Content Moderation with Google Vision API: Implement automatic content analysis by setting up a Google Cloud Vision API and configuring the GOOGLE_APPLICATION_CREDENTIALS environment variable with your Google service account credentials.
6. Content Moderation with Hive AI: Further enhance content moderation using Hive AI by setting up an account, creating a project, and configuring the HIVE_AI_KEY environment variable.

Development Considerations:

• Test various video dimensions and playback features like starting at a specific timestamp (?time=) or theming the Mux Player (?color=).
• Ensure compatibility across different browsers, including Safari, Mobile Safari, Chrome, and Firefox.

This setup provides a scalable and flexible foundation for hosting virtual events, leveraging powerful tools like Mux for video management and Next.js for web development, with added capabilities for content moderation and community engagement via Slack.