title: Reproductor de video HLS en ASP.NET Web Forms con C# description: Reproduzca archivos, cámaras RTSP y dispositivos de captura en ASP.NET Web Forms: el SDK codifica HLS en el servidor y el control HlsPlayer lo reproduce. tags: - Media Blocks SDK - .NET - MediaBlocksPipeline - Windows - Streaming - ASP.NET - HLS - RTSP - H.264 - AAC - C# - NuGet primary_api_classes: - HlsPlayer - HlsStreamManager - MediaBlocksPipeline - HLSSinkBlock
Reproductor de video HLS en ASP.NET Web Forms con C¶
Cómo funciona¶
Un navegador no puede alojar un reproductor de video nativo, por lo que el SDK no se ejecuta en el navegador. Se ejecuta dentro del proceso de ASP.NET en el servidor: un MediaBlocksPipeline lee la fuente, la codifica a H.264 y AAC y escribe una lista de reproducción HLS con sus segmentos en una carpeta del sitio web. IIS sirve esos archivos como contenido estático. El control de servidor HlsPlayer genera un elemento HTML5 <video> que reproduce la lista con hls.js; Safari reproduce HLS de forma nativa.
graph LR
Source["Fuente: archivo, URL, RTSP o dispositivo"] --> H264EncoderBlock
Source --> AACEncoderBlock
H264EncoderBlock --> HLSSinkBlock
AACEncoderBlock --> HLSSinkBlock
HLSSinkBlock --> IIS["Archivos estáticos de IIS (.m3u8 + .ts)"]
IIS --> Browser["Navegador: video HTML5 + hls.js"] El control construye y administra este pipeline por usted a través de HlsStreamManager. Usted solo coloca el control en la página y establece su Source.
Requisitos¶
- Un proyecto Web Application de ASP.NET Web Forms para .NET Framework 4.7.2.
- Un grupo de aplicaciones de 64 bits (las bibliotecas nativas del SDK son x64). Para IIS Express, use el
C:\Program Files\IIS Express\iisexpress.exede 64 bits. - Los paquetes NuGet y la configuración de la carpeta de salida que se muestran abajo. Los paquetes redist copian las bibliotecas nativas a
bin\x64solo cuando la salida va directamente abin\.
<PropertyGroup>
<TargetFramework>net472</TargetFramework>
<OutputPath>bin\</OutputPath>
<AppendTargetFrameworkToOutputPath>false</AppendTargetFrameworkToOutputPath>
<AutoGenerateBindingRedirects>true</AutoGenerateBindingRedirects>
<GenerateBindingRedirectsOutputType>true</GenerateBindingRedirectsOutputType>
</PropertyGroup>
<ItemGroup>
<Reference Include="System.Web" />
<PackageReference Include="VisioForge.DotNet.Core.UI.WebForms" Version="2026.10.2" />
<PackageReference Include="VisioForge.DotNet.Core" Version="2026.10.2" />
<PackageReference Include="VisioForge.CrossPlatform.Core.Windows.x64" Version="2026.9.11" />
<PackageReference Include="VisioForge.CrossPlatform.Libav.Windows.x64.UPX" Version="2026.9.11" />
</ItemGroup>
web.config¶
Tres elementos son obligatorios:
shadowCopyBinAssemblies="false". El SDK carga sus bibliotecas nativas desde la carpetax64junto aVisioForge.Core.dll. ASP.NET normalmente copia los ensamblados debinaTemporary ASP.NET Files, donde esa carpeta no existe, y las bibliotecas nativas no se encuentran.- El tipo MIME de
.m3u8. Sin él, IIS e IIS Express no sirven los archivos.m3u8. - Las redirecciones de enlace. Una aplicación web las lee solo de
web.config. La compilación genera las entradas<dependentAssembly>enbin\<YourAssembly>.dll.config; después de la primera compilación, cópielas de allí aweb.config.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.7.2" />
<httpRuntime targetFramework="4.7.2" />
<!-- El SDK carga sus bibliotecas nativas desde bin\x64; la copia shadow ocultaría esa carpeta. -->
<hostingEnvironment shadowCopyBinAssemblies="false" />
</system.web>
<system.webServer>
<staticContent>
<remove fileExtension=".m3u8" />
<mimeMap fileExtension=".m3u8" mimeType="application/vnd.apple.mpegurl" />
</staticContent>
</system.webServer>
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<!-- Pegue aquí las entradas <dependentAssembly> de bin\<YourAssembly>.dll.config. -->
</assemblyBinding>
</runtime>
</configuration>
Agregar el reproductor a una página¶
La página debe ser asíncrona, porque el control inicia el stream en una tarea asíncrona de la página. Registre el espacio de nombres del control y colóquelo en la página:
<%@ Page Language="C#" Async="true" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyWebApp.Default" %>
<%@ Register TagPrefix="vf" Namespace="VisioForge.Core.UI.WebForms" Assembly="VisioForge.Core.UI.WebForms" %>
<vf:HlsPlayer ID="player" runat="server" Width="960px" Height="540px" Source="~/Media/sample.mp4" />
En la primera solicitud de una fuente, el control inicia su pipeline, espera la primera lista de reproducción y genera el elemento de video. Las solicitudes posteriores de la misma fuente reutilizan el stream en ejecución.
Formas de la fuente¶
Valor de Source | Qué se reproduce |
|---|---|
C:\Videos\clip.mp4 o ~/Media/clip.mp4 | Un archivo local; una ruta ~/ se resuelve dentro del sitio web |
https://example.com/clip.mp4 | Un archivo o stream por HTTP o HTTPS |
rtsp://192.168.1.21:554/stream | Una cámara IP; establezca Login y Password con sus credenciales |
device://<camera name> | Un dispositivo de captura por nombre, o la primera cámara con device://; agregue AudioSource="device://<microphone name>" para el sonido |
Otras propiedades del control:
| Propiedad | Valor predeterminado | Propósito |
|---|---|---|
OutputFolder | ~/hls | Carpeta del sitio donde se escriben la lista de reproducción y los segmentos, una subcarpeta por fuente |
AutoPlay | false | Iniciar la reproducción al cargar la página |
Muted | false | Iniciar sin sonido (los navegadores suelen permitir la reproducción automática solo sin sonido) |
HlsJsUrl | https://cdn.jsdelivr.net/npm/hls.js@1 | Desde dónde la página carga hls.js |
PlaylistUrl | (solo lectura) | La URL de la lista de reproducción, establecida cuando el stream ha iniciado |
Si el stream no puede iniciarse, el control muestra el mensaje de error en un elemento <p class="vf-hls-error"> en lugar del video.
Elegir la fuente en el code-behind¶
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using VisioForge.Core.UI.WebForms;
namespace MyWebApp
{
public partial class Default : Page
{
protected TextBox edSource;
protected TextBox edLogin;
protected TextBox edPassword;
protected HlsPlayer player;
protected void btPlay_Click(object sender, EventArgs e)
{
// El stream se inicia cuando se genera la página.
player.Source = edSource.Text.Trim();
player.Login = edLogin.Text;
player.Password = edPassword.Text;
}
protected void btStop_Click(object sender, EventArgs e)
{
// Detiene el stream para todos los espectadores de esta fuente y vacía Source.
player.Stop();
}
}
}
HlsStreamManager.Stop(source) y HlsStreamManager.StopAll() son la API de nivel inferior detrás de Stop(): detienen un stream por su fuente resuelta, o todos los streams, sin un control.
Licencia y cierre¶
Establezca el certificado de licencia una vez en Application_Start; todos los pipelines iniciados después lo usan. Sin él, el SDK se ejecuta en modo de prueba. Detenga todos los streams y libere el SDK en Application_End:
using System;
using System.IO;
using System.Web;
using VisioForge.Core.UI.WebForms;
namespace MyWebApp
{
public class Global : HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
// Su archivo de certificado de licencia, guardado fuera del contenido público del sitio.
HlsStreamManager.LicenseCertificate =
File.ReadAllBytes(Server.MapPath("~/App_Data/license.vfcert"));
}
protected void Application_End(object sender, EventArgs e)
{
HlsStreamManager.StopAll();
}
}
}
Notas para producción¶
- Los streams se comparten y se ejecutan hasta que se detienen. Todos los espectadores de la misma fuente ven el mismo pipeline. Un stream en vivo (una cámara o una fuente RTSP) sigue ejecutándose después de que sus espectadores se van, hasta que se llama a
Stop()del control,HlsStreamManager.Stop(source)oHlsStreamManager.StopAll(); un stream de archivo también termina cuando termina el archivo. - La primera solicitud define el stream. Los streams se comparten por
Source, por lo queAudioSource,LoginyPasswordde la primera solicitud se aplican a todos los espectadores posteriores de esa fuente. - Un archivo se reproduce en tiempo real y vuelve a empezar en la siguiente solicitud. Una fuente de archivo o HTTP se transmite desde su inicio al ritmo del tiempo real, para que la lista de reproducción en vivo vaya al paso de sus espectadores. El control solicita su stream en cada solicitud de la página mientras
Sourceestá establecido, por lo que, cuando el archivo ha terminado, el siguiente postback de esa página lo reproduce de nuevo desde el inicio; llame aStop()o vacíeSourcepara terminarlo. Un stream que falla con un error del pipeline se descarta de la misma manera; la siguiente solicitud de eseSourcelo inicia de nuevo, y el error se escribe en la traza del servidor. - Acceso de escritura. La identidad del grupo de aplicaciones necesita acceso de escritura a la carpeta de salida HLS (
~/hlsde forma predeterminada). - Dispositivos de captura en IIS. Que un proceso de trabajo de IIS pueda abrir una cámara o un micrófono depende de la configuración de sesiones y servicios del servidor. En servidores, prefiera fuentes de archivo y RTSP.
- Sin acceso a CDN. En un servidor de intranet sin acceso a internet, aloje hls.js en el sitio y apunte
HlsJsUrla su URL, por ejemploHlsJsUrl="/Scripts/hls.min.js".
Ejemplos¶
- HLS Media Web Forms - reproduce un archivo, una URL HTTP o una cámara RTSP introducidos en la página.
- HLS Webcam Web Forms - transmite una cámara web y un micrófono elegidos de las listas de dispositivos del servidor.
Ver también¶
- Bloque sink HLS - configuración de
HLSSinkBlocken detalle - Streaming HLS - streaming HLS en todos los SDK
- Visor de Streams RTSP - fuentes RTSP y autenticación
- Media Blocks SDK .Net - página del producto y descargas