Building a WebRTC Screen Sharing Service with Go Static Server and HTML Interface

Go HTTP/HTTPS Static File Server

Server Implementation

The following Go code sets up an HTTP server for serving static files and an HTTPS server with TLS support:

package main

import (
    "log"
    "net/http"
)

func serveHttp(listenPort string) {
    log.Printf("HTTP server listening on port: %s", listenPort)
    if err := http.ListenAndServe(listenPort, nil); err != nil {
        log.Fatal(err)
    }
}

func serveHttps(listenPort, certificate, privateKey string) {
    log.Printf("HTTPS server listening on port: %s", listenPort)
    if err := http.ListenAndServeTLS(listenPort, certificate, privateKey, nil); err != nil {
        log.Fatal(err)
    }
}

func main() {
    urlPrefix := "/static/"
    fileServer := http.FileServer(http.Dir("./static"))
    http.Handle(urlPrefix, http.StripPrefix(urlPrefix, fileServer))
    
    go serveHttp(":8080")
    serveHttps(":8081", "./conf/fullchain.pem", "./conf/privkey.pem")
}

Key Components

Package Declaration: The package main directive identifies this as an executable program entry point.

Import Statements: The net/http package provides HTTP client and server implementations. The log package handles logging operations.

HTTP Server Function: serveHttp initializes an HTTP server that binds to the specified port using http.ListenAndServe. When the server fails to start, log.Fatal terminates execution and prints the error.

HTTPS Server Function: serveHttps configures a TLS-enabled server via http.ListenAndServeTLS, requiring certificate and private key file paths as arguments. This function handles encrypted connections on port 8081.

Main Function Flow: The main function establishes a file server pointing to the ./static directory. The http.StripPrefix removes the URL prefix when mapping reqeusts to filesystem paths. The HTTP server runs in a separate goroutine (using go keyword) to allow concurrent execution, while HTTPS runs on the main thread.


HTML Interface for Screen Sharing

Complete HTML Template

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC Screen Sharing</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .video-container {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        
        video {
            width: 320px;
            height: 240px;
            border: 1px solid #333;
            background-color: #000;
        }
        
        .controls {
            margin: 10px 0;
        }
        
        .btn {
            background-color: #d84a38;
            border: none;
            color: white;
            padding: 0.5em 0.7em;
            cursor: pointer;
            margin-right: 1em;
        }
        
        .btn:hover {
            opacity: 0.8;
        }
    </style>
</head>

<body>
    <h3>WebRTC Screen Sharing Demo</h3>
    
    <div class="video-container">
        <div class="video-wrapper">
            <video id="localVideo" autoplay muted controls></video>
            <p>Local Screen</p>
        </div>
        <div class="video-wrapper">
            <video id="remoteVideo" autoplay controls></video>
            <p>Remote Screen</p>
        </div>
    </div>
    
    <div class="controls">
        <button id="btnStartPush" class="btn">Start Streaming</button>
        <button id="btnStopPush" class="btn">Stop Streaming</button>
        <button id="btnStartPull" class="btn">Receive Stream</button>
        <button id="btnStopPull" class="btn">Stop Receiving</button>
    </div>
    
    <script src="/static/js/adapter.js"></script>
    <script src="/static/js/screen_share.js"></script>
</body>
</html>

Document Structure

DOCTYPE: <!DOCTYPE html> declares HTML5 document type for modern browser compatibility.

Head Section: Contains metadata including UTF-8 character encoding for proper Chinese character rendering, viewport configuration for responsive design, and embedded CSS styles.

Video Elements: Two <video> tags display local and remote streams. The autoplay attribute enables automatic playback, muted on the local video prevents audio feedback, and controls provides playback controls.

Control Buttons: Four buttons manage streaming operations:

  • Start/Stop pushing local screen to remote peer
  • Start/Stop pulling remote screen stream

Script Loading: External scripts load the WebRTC adapter (for cross-browser compatibility) and the application-specific screen sharing logic. Scripts are placed at the end of <body> to ensure DOM elements load before script execution.

Tags: WebRTC screen sharing Go HTTP Server HTTPS

Posted on Wed, 04 Nov 2026 16:01:08 +0000 by grace5