--- title: "Live Streaming Website Development Notes - Using Alibaba Cloud - 1" description: "How to set up push-stream and pull-stream servers on Alibaba Cloud, push a live stream via OBS, and embed HLS/RTMP live video into a website, including CORS configuration and real-world latency measurements." canonical_url: "https://blog.markkulab.net/en/post/streaming" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2021-07-21 01:01:01 +0800" category: "Cloud" tags: ["streaming", "aliyun", "rtmp", "hls", "obs", "live streaming"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Live Streaming Website Development Notes - Using Alibaba Cloud - 1 ## Live Streaming Website Development Notes - Using Alibaba Cloud ## Understanding Push-Stream and Pull-Stream 1. Push-stream — the process of sending a live video stream from a local source to a Media Server. 2. Pull-stream — the process of connecting to a server that already has live content, establishing a connection using a protocol (RTMP, RTP, RTSP, HTTP, etc.), and pulling the data stream. ![Live streaming architecture diagram with push, pull servers, CDN, and clients](https://blog.markkulab.net/content/markku/posts/streaming/images/17KZnBd.webp) ## Setting Up Push-Stream and Pull-Stream Servers on Alibaba Cloud 1. Log in to the Alibaba Cloud console > Video Live > Live Console > Domain Management > Add Domain (select "overseas" to bypass China website review) > Enter your push-stream subdomain push.xxx.com > Submit. ![Alibaba Cloud Live Console adding push domain with overseas acceleration](https://blog.markkulab.net/content/markku/posts/streaming/images/3FETvsa.webp) 2. Return to the domain list. ![Alibaba Cloud console showing push.markkulab.net domain added successfully](https://blog.markkulab.net/content/markku/posts/streaming/images/XBklPML.webp) 3. Add a pull-stream domain > Return to the domain list > Enter your pull-stream subdomain pull.xxx.com. ![Alibaba Cloud console adding pull stream domain with overseas CDN acceleration](https://blog.markkulab.net/content/markku/posts/streaming/images/TOGFyDJ.webp) 4. At this point, ask your Infra Team to configure the CNAME records that Alibaba Cloud provides in your DNS host, pointing your domains to Alibaba Cloud's live streaming servers. ![Alibaba Cloud domain management showing CNAME records for streaming domains](https://blog.markkulab.net/content/markku/posts/streaming/images/Powwa1J.webp) ![Alibaba Cloud CNAME record configuration form for 'pull' domain](https://blog.markkulab.net/content/markku/posts/streaming/images/vN4LSp8.webp) ![Alibaba Cloud DNS CNAME record configuration form](https://blog.markkulab.net/content/markku/posts/streaming/images/7BpmeDP.webp) 5. Return to the domain management list. Once the domain status changes from "configuring" to "running normally," you need to associate the push-stream and pull-stream domains. Go to the pull-stream domain (pull.xxx.com) > Domain Configuration > Push-Stream Info > Add Push-Stream Info > Enter the push-stream domain push.xxx.com. ![Alibaba Cloud console with push stream domain entry dialog](https://blog.markkulab.net/content/markku/posts/streaming/images/boqmzJs.webp) 6. When the association is complete, you'll receive the stream playback info (the highlighted portion — you'll paste this into your streaming software). ![Alibaba Cloud console showing highlighted push stream URL](https://blog.markkulab.net/content/markku/posts/streaming/images/0PkDZrW.webp) 7. Configure HTTP headers for the pull-stream domain; otherwise, embedding the stream in a website will be blocked by the browser's CORS mechanism => Access-Control-Origin = * ![Alibaba Cloud console setting Access-Control-Allow-Origin HTTP header](https://blog.markkulab.net/content/markku/posts/streaming/images/ZJoOE3b.webp) ## Pushing the Live Stream to the Cloud via Streaming Software 1. Go back to the Alibaba Cloud domain list > push-stream domain (push.xxx.com) > Domain Configuration > Access Control > Get the RTMP URL for the push stream. ![Alibaba Cloud console: RTMP push stream URL authentication settings](https://blog.markkulab.net/content/markku/posts/streaming/images/49VXPVM.webp) 2. Install OBS (Open Broadcaster Software). [Official download link](https://obsproject.com/) 3. Open OBS > Settings > Stream > Fill in the Alibaba Cloud live server address and stream key. ![OBS Studio stream settings showing server and stream key fields](https://blog.markkulab.net/content/markku/posts/streaming/images/jsGaUL4.webp) 4. Click the + button to select the content to stream. ![OBS Studio add source menu with Text GDI+ highlighted](https://blog.markkulab.net/content/markku/posts/streaming/images/8HjbyXs.webp) 5. Click "Start Streaming" — the live video will now be pushed to Alibaba Cloud's push-stream server. ![OBS live streaming interface with Alibaba Cloud setup guide](https://blog.markkulab.net/content/markku/posts/streaming/images/dQAwK1s.webp) * At this point you can access the Baidu HLS (m3u8) live stream directly on a mobile device. * Chrome requires the Native HLS Playback extension or embedding the stream via a player in the website. ## Embedding the Live Stream in a Website 1. Go to the Alibaba Cloud Live console, click "URL Generator," and it will generate playback URLs in various formats. ![Alibaba Cloud Live console URL Generator showing playback URLs](https://blog.markkulab.net/content/markku/posts/streaming/images/R5eh1GT.webp) 2. Fill in the m3u8 URL provided by Alibaba Cloud into the sample code below. ``` Aliplayer在线配置
``` ## Live Stream Preview ![OBS Studio interface showing live stream preview and time comparison](https://blog.markkulab.net/content/markku/posts/streaming/images/3OCziNm.webp) ![Web browser displaying Aliplayer configuration and a video player](https://blog.markkulab.net/content/markku/posts/streaming/images/XUM4I1o.webp) ## Real-World Measurements (without optimized configuration or CDN acceleration) * RTMP video latency: 3–5 seconds * HLS video latency: 8–10 seconds ## Note — If You See This Screen This usually means the stream was not pushed correctly, or it was blocked by CORS. ![Alibaba Cloud live stream player m3u8 manifest load error screen](https://blog.markkulab.net/content/markku/posts/streaming/images/82YrJA4.webp) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/streaming) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.