Construye tu propia plataforma de transmisión en vivo

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

En este masterclass repasaremos los conceptos básicos de la transmisión de video por internet, incluyendo tecnologías como HLS y WebRTC. Luego construiremos nuestra propia aplicación React para reproducir transmisiones en vivo y grabaciones de transmisiones en vivo.

This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

OBS (Open Broadcaster Software) es una aplicación utilizada para la transmisión de video en vivo y grabación de pantalla. En la clase magistral, se utiliza para configurar y transmitir video usando la plataforma MUX.

Para asegurar la reproducción de video, Mux permite crear URLs firmadas similares a las de S3. Esto implica generar un token que se adjunta como parámetro en la URL, haciendo que el acceso al video sea seguro y controlado.

Un storyboard en Mux es una representación visual que contiene miniaturas de diferentes partes de un video. Se genera automáticamente y se utiliza para mejorar la interfaz de usuario, permitiendo a los espectadores ver vistas previas de diferentes segmentos del video al pasar el cursor sobre la barra de tiempo.

La opción 'isLive' es un parámetro que se utiliza para indicar si el contenido de video que se está reproduciendo es una transmisión en vivo. Afecta la configuración del reproductor, como la visualización de controles específicos adecuados para contenidos en vivo.

La funcionalidad se implementa utilizando un archivo VTT que describe la posición de las miniaturas dentro de un storyboard. Esta configuración permite que el reproductor muestre la vista previa de las miniaturas correspondientes a diferentes tiempos del video cuando el usuario pasa el cursor sobre la barra de tiempo.

HLS permite la entrega adaptativa de contenido multimedia en vivo y a pedido. Mejora la experiencia de visualización al ajustar la calidad del video según la conexión a Internet del usuario, lo que ayuda a evitar búferes y asegura una reproducción fluida.

Dylan Jhaveri
Dylan Jhaveri
138 min
09 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El masterclass cubrió varios temas relacionados con la transmisión de video y la tasa de bits adaptable. Se discutió la importancia de la calidad del video y el uso de herramientas avanzadas en el entorno moderno de transmisión de video. Se destacó el papel de los códecs de video y la compresión en la reducción del tamaño del video. Se demostró la integración de la transmisión en vivo en una aplicación React y el uso de HLSJS para la reproducción de video. El masterclass también abordó temas como las vistas previas de miniaturas, la seguridad de reproducción y los beneficios de usar activos de MUX. En general, el masterclass proporcionó información valiosa sobre el mundo de la transmisión de video y la ingeniería.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Edición de video en el navegador
React Summit 2023React Summit 2023
23 min
Edición de video en el navegador
Top Content
This Talk discusses the challenges of video editing in the browser and the limitations of existing tools. It explores image compression techniques, including Fourier transform and Huffman encoding, to reduce file sizes. The video codec and frame decoding process are explained, highlighting the importance of keyframes and delta frames. The performance bottleneck is identified as the codec, and the need for specialized hardware for efficient video editing is emphasized. The Talk concludes with a call to create a simplified API for video editing in the browser and the potential for AI-powered video editing.
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
Transmitiendo en vivo desde un navegador...con otro navegador
JSNation Live 2020JSNation Live 2020
8 min
Transmitiendo en vivo desde un navegador...con otro navegador
This Talk discusses live chat and live broadcast using WebRTC and RTMP. It explores running WebRTC on a server via Chrome and alternative approaches like using GetUserMedia and the Chrome.tabCapture API. The use of a whole Chrome instance for WebRTC and RTMP broadcast is also discussed, highlighting the pros and cons of this approach. The Talk recommends checking out Nick's talk from All Things RTC for more information.
Creando Videos Programáticamente en React
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
Creando Videos Programáticamente en React
The Talk discusses the use of ReMotion, a library that allows for declarative video creation in React. It covers the process of creating videos, animating elements, and rendering multiple compositions. The Talk also mentions the features of ReMotion, such as audio support and server-side rendering. ReMotion 2.0 introduces audio support and the possibility of live streaming. The Talk concludes by highlighting the frustration with existing video editing tools and the integration of existing videos into ReMotion projects.
Explorando la manipulación de video y el lienzo HTML5
React Summit 2020React Summit 2020
16 min
Explorando la manipulación de video y el lienzo HTML5
Today's Talk at React Summit focused on the Canvas and HTML5 video APIs, showcasing the capabilities and possibilities they offer for video manipulation and interactivity. The speaker demonstrated how to use the HTML5 video element and canvas to manipulate and draw images, apply filters, and add real-time text overlays. They also showcased real-time object detection on video frames using machine learning. The Talk concluded with an example of enhancing a marketing website with interactive video using the canvas element. Overall, the Talk highlighted the power and potential of these APIs for video development.
Realizar transmisiones en vivo desde tu navegador sin WebRTC
React Summit Remote Edition 2020React Summit Remote Edition 2020
13 min
Realizar transmisiones en vivo desde tu navegador sin WebRTC
Mux provides an API for live streaming and aims to keep users in their own applications. Live broadcast and live chat are different, with live chat using WebRTC and live broadcast using RTMP and HLS. WebRTC can be implemented using headless Chrome or the getUserMedia process. Mux targets developers building platforms and suggests using semantic HTML. Ionic supports native apps and custom native views.