Agent skill

livestream-engineer

Expert in live streaming, WebRTC, and real-time video/audio

View SKILL.md on GitHub Repository
Stars 21
Forks 6

Install this agent skill to your Project

npx add-skill https://github.com/daffy0208/ai-dev-standards/tree/main/skills/livestream-engineer

SKILL.md

Livestream Engineer Skill

I help you build live streaming features, implement WebRTC, and create real-time broadcasting experiences.

What I Do

Live Streaming:

  • WebRTC peer-to-peer video
  • Live broadcasting
  • Screen sharing
  • Real-time chat

Streaming Platforms:

  • Twitch-style streaming
  • Video conferencing
  • Live events
  • Webinars

WebRTC Basics

Peer-to-Peer Video Call

typescript
// lib/webrtc.ts
export class WebRTCConnection {
  private peerConnection: RTCPeerConnection
  private localStream: MediaStream | null = null

  constructor() {
    this.peerConnection = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    })
  }

  async startLocalStream() {
    try {
      this.localStream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      })

      this.localStream.getTracks().forEach(track => {
        this.peerConnection.addTrack(track, this.localStream!)
      })

      return this.localStream
    } catch (error) {
      console.error('Failed to get local stream:', error)
      throw error
    }
  }

  async createOffer() {
    const offer = await this.peerConnection.createOffer()
    await this.peerConnection.setLocalDescription(offer)
    return offer
  }

  async handleAnswer(answer: RTCSessionDescriptionInit) {
    await this.peerConnection.setRemoteDescription(answer)
  }

  async handleOffer(offer: RTCSessionDescriptionInit) {
    await this.peerConnection.setRemoteDescription(offer)
    const answer = await this.peerConnection.createAnswer()
    await this.peerConnection.setLocalDescription(answer)
    return answer
  }

  addIceCandidate(candidate: RTCIceCandidateInit) {
    return this.peerConnection.addIceCandidate(candidate)
  }

  onTrack(callback: (stream: MediaStream) => void) {
    this.peerConnection.ontrack = event => {
      callback(event.streams[0])
    }
  }

  onIceCandidate(callback: (candidate: RTCIceCandidate) => void) {
    this.peerConnection.onicecandidate = event => {
      if (event.candidate) {
        callback(event.candidate)
      }
    }
  }

  close() {
    this.localStream?.getTracks().forEach(track => track.stop())
    this.peerConnection.close()
  }
}

Usage:

typescript
'use client'
import { useEffect, useRef, useState } from 'react'
import { WebRTCConnection } from '@/lib/webrtc'

export function VideoCall() {
  const localVideoRef = useRef<HTMLVideoElement>(null)
  const remoteVideoRef = useRef<HTMLVideoElement>(null)
  const [connection] = useState(() => new WebRTCConnection())

  useEffect(() => {
    const init = async () => {
      // Start local stream
      const stream = await connection.startLocalStream()
      if (localVideoRef.current) {
        localVideoRef.current.srcObject = stream
      }

      // Handle remote stream
      connection.onTrack((remoteStream) => {
        if (remoteVideoRef.current) {
          remoteVideoRef.current.srcObject = remoteStream
        }
      })

      // Handle ICE candidates
      connection.onIceCandidate((candidate) => {
        // Send candidate to other peer via signaling server
        socket.emit('ice-candidate', candidate)
      })
    }

    init()

    return () => {
      connection.close()
    }
  }, [connection])

  return (
    <div className="grid grid-cols-2 gap-4">
      <div>
        <h3>You</h3>
        <video ref={localVideoRef} autoPlay muted className="w-full" />
      </div>
      <div>
        <h3>Remote</h3>
        <video ref={remoteVideoRef} autoPlay className="w-full" />
      </div>
    </div>
  )
}

Screen Sharing

typescript
'use client'
import { useRef, useState } from 'react'

export function ScreenShare() {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [sharing, setSharing] = useState(false)
  const [stream, setStream] = useState<MediaStream | null>(null)

  const startSharing = async () => {
    try {
      const mediaStream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          cursor: 'always'
        },
        audio: false
      })

      setStream(mediaStream)
      if (videoRef.current) {
        videoRef.current.srcObject = mediaStream
      }
      setSharing(true)

      // Handle when user stops sharing via browser UI
      mediaStream.getVideoTracks()[0].onended = () => {
        stopSharing()
      }
    } catch (error) {
      console.error('Failed to start screen sharing:', error)
    }
  }

  const stopSharing = () => {
    stream?.getTracks().forEach(track => track.stop())
    setStream(null)
    setSharing(false)
  }

  return (
    <div>
      <video ref={videoRef} autoPlay className="w-full bg-black rounded" />

      <button
        onClick={sharing ? stopSharing : startSharing}
        className={`mt-4 px-6 py-3 rounded ${
          sharing ? 'bg-red-600' : 'bg-blue-600'
        } text-white`}
      >
        {sharing ? '⏚ī¸ Stop Sharing' : 'đŸ–Ĩī¸ Share Screen'}
      </button>
    </div>
  )
}

Live Streaming with Chat

typescript
// components/LiveStream.tsx
'use client'
import { useState, useEffect, useRef } from 'react'
import { io, Socket } from 'socket.io-client'

interface ChatMessage {
  user: string
  message: string
  timestamp: Date
}

export function LiveStream({ streamId }: { streamId: string }) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [socket, setSocket] = useState<Socket | null>(null)
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [messageInput, setMessageInput] = useState('')
  const [viewers, setViewers] = useState(0)

  useEffect(() => {
    // Connect to streaming server
    const newSocket = io('wss://streaming-server.com')
    setSocket(newSocket)

    // Join stream room
    newSocket.emit('join-stream', streamId)

    // Receive viewer count
    newSocket.on('viewer-count', (count: number) => {
      setViewers(count)
    })

    // Receive chat messages
    newSocket.on('chat-message', (msg: ChatMessage) => {
      setMessages(prev => [...prev, msg])
    })

    // Receive video stream chunks (simplified)
    newSocket.on('stream-data', (data: ArrayBuffer) => {
      // Handle stream data
    })

    return () => {
      newSocket.disconnect()
    }
  }, [streamId])

  const sendMessage = () => {
    if (!socket || !messageInput.trim()) return

    socket.emit('chat-message', {
      user: 'Anonymous',
      message: messageInput,
      timestamp: new Date()
    })

    setMessageInput('')
  }

  return (
    <div className="grid md:grid-cols-3 gap-4">
      {/* Video Player */}
      <div className="md:col-span-2">
        <div className="bg-black rounded-lg overflow-hidden">
          <video
            ref={videoRef}
            autoPlay
            controls
            className="w-full aspect-video"
          />

          <div className="p-4 bg-gray-900 text-white">
            <h2 className="text-xl font-bold">Live Stream Title</h2>
            <p className="text-sm text-gray-400">
              🔴 {viewers} watching now
            </p>
          </div>
        </div>
      </div>

      {/* Chat */}
      <div className="flex flex-col h-[600px]">
        <div className="bg-gray-100 p-4 rounded-t-lg font-semibold">
          Live Chat
        </div>

        <div className="flex-1 overflow-y-auto p-4 bg-white border-x">
          {messages.map((msg, i) => (
            <div key={i} className="mb-3">
              <span className="font-semibold text-blue-600">{msg.user}:</span>
              <span className="ml-2">{msg.message}</span>
            </div>
          ))}
        </div>

        <div className="p-4 bg-gray-100 rounded-b-lg">
          <input
            type="text"
            value={messageInput}
            onChange={(e) => setMessageInput(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
            placeholder="Say something..."
            className="w-full px-4 py-2 border rounded"
          />
        </div>
      </div>
    </div>
  )
}

Broadcasting Dashboard

typescript
// components/BroadcastDashboard.tsx
'use client'
import { useState, useRef } from 'react'

export function BroadcastDashboard() {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [broadcasting, setBroadcasting] = useState(false)
  const [stream, setStream] = useState<MediaStream | null>(null)
  const [viewers, setViewers] = useState(0)

  const startBroadcast = async () => {
    try {
      const mediaStream = await navigator.mediaDevices.getUserMedia({
        video: {
          width: { ideal: 1920 },
          height: { ideal: 1080 }
        },
        audio: {
          echoCancellation: true,
          noiseSuppression: true
        }
      })

      setStream(mediaStream)
      if (videoRef.current) {
        videoRef.current.srcObject = mediaStream
      }

      // Start broadcasting to server
      // (Implementation depends on streaming protocol)

      setBroadcasting(true)
    } catch (error) {
      console.error('Failed to start broadcast:', error)
    }
  }

  const stopBroadcast = () => {
    stream?.getTracks().forEach(track => track.stop())
    setStream(null)
    setBroadcasting(false)
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">Broadcast Dashboard</h1>
        {broadcasting && (
          <p className="text-green-600 font-semibold mt-2">
            🔴 LIVE - {viewers} viewers
          </p>
        )}
      </div>

      <div className="bg-black rounded-lg overflow-hidden mb-6">
        <video
          ref={videoRef}
          autoPlay
          muted
          className="w-full aspect-video"
        />
      </div>

      <div className="flex gap-4">
        <button
          onClick={broadcasting ? stopBroadcast : startBroadcast}
          className={`flex-1 py-3 rounded-lg font-semibold ${
            broadcasting
              ? 'bg-red-600 text-white'
              : 'bg-blue-600 text-white'
          }`}
        >
          {broadcasting ? '⏚ī¸ End Broadcast' : '🔴 Start Broadcast'}
        </button>

        {broadcasting && (
          <button className="px-6 py-3 bg-gray-200 rounded-lg">
            ⚙ī¸ Settings
          </button>
        )}
      </div>
    </div>
  )
}

Multi-Party Video Conference

typescript
// components/VideoConference.tsx
'use client'
import { useEffect, useState, useRef } from 'react'

interface Participant {
  id: string
  name: string
  stream: MediaStream
}

export function VideoConference() {
  const [participants, setParticipants] = useState<Participant[]>([])
  const localVideoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    // Initialize local stream
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        if (localVideoRef.current) {
          localVideoRef.current.srcObject = stream
        }
      })
  }, [])

  return (
    <div className="p-6">
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {/* Local video */}
        <div className="relative bg-black rounded-lg overflow-hidden">
          <video
            ref={localVideoRef}
            autoPlay
            muted
            className="w-full aspect-video object-cover"
          />
          <div className="absolute bottom-2 left-2 bg-black/70 text-white px-2 py-1 rounded text-sm">
            You
          </div>
        </div>

        {/* Remote participants */}
        {participants.map((participant) => (
          <div key={participant.id} className="relative bg-black rounded-lg overflow-hidden">
            <video
              autoPlay
              className="w-full aspect-video object-cover"
              ref={(video) => {
                if (video) video.srcObject = participant.stream
              }}
            />
            <div className="absolute bottom-2 left-2 bg-black/70 text-white px-2 py-1 rounded text-sm">
              {participant.name}
            </div>
          </div>
        ))}
      </div>

      <div className="mt-6 flex justify-center gap-4">
        <button className="px-6 py-3 bg-red-600 text-white rounded-lg">
          🎤 Mute
        </button>
        <button className="px-6 py-3 bg-red-600 text-white rounded-lg">
          📹 Stop Video
        </button>
        <button className="px-6 py-3 bg-blue-600 text-white rounded-lg">
          đŸ–Ĩī¸ Share Screen
        </button>
        <button className="px-6 py-3 bg-red-600 text-white rounded-lg">
          📞 Leave Call
        </button>
      </div>
    </div>
  )
}

When to Use Me

Perfect for:

  • Building video call features
  • Creating livestream platforms
  • Implementing screen sharing
  • Building webinar tools
  • Creating video conferencing apps

I'll help you:

  • Implement WebRTC
  • Build broadcast features
  • Add screen sharing
  • Create video conferencing
  • Handle real-time chat

What I'll Create

đŸŽĨ Live Streaming
📹 Video Calls
đŸ–Ĩī¸ Screen Sharing
đŸ’Ŧ Real-Time Chat
đŸ‘Ĩ Multi-Party Conferences
🔴 Broadcasting Tools

Let's build amazing live experiences!

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

daffy0208/ai-dev-standards

Deployment Advisor

Choose deployment strategy and infrastructure. Use when deciding where to deploy applications, setting up CI/CD, or configuring production environments. Covers Vercel, Railway, AWS, Cloudflare Workers, and Docker.

21 6
Explore
daffy0208/ai-dev-standards

mobile-developer

Expert in React Native, Expo, and cross-platform mobile development

21 6
Explore
daffy0208/ai-dev-standards

Knowledge Base Manager

Design, build, and maintain comprehensive knowledge bases. Bridges document-based (RAG) and entity-based (graph) knowledge systems. Use when building knowledge-intensive applications, managing organizational knowledge, or creating intelligent information systems.

21 6
Explore
daffy0208/ai-dev-standards

video-producer

Expert in video playback, streaming, and video player customization

21 6
Explore
daffy0208/ai-dev-standards

API Designer

Design REST and GraphQL APIs. Use when creating backend APIs, defining API contracts, or integrating third-party services. Covers endpoint design, authentication, versioning, documentation, and best practices.

21 6
Explore
daffy0208/ai-dev-standards

api-integration-builder

Build reliable third-party API integrations including OAuth, webhooks, rate limiting, error handling, and data sync. Use when integrating with external services (Slack, Stripe, Gmail, etc.), building API connections, handling webhooks, or implementing OAuth flows.

21 6
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results