1. Summary
I’m developing a VegaOS app using @amazon-devicesamazon-devicesamazon-devicesamazon-devices/webview (React Native) and facing a strange issue with HLS.js that @amazon-devicesccurs on Fire TV Stick 4K Select.
The HLS stream plays perfectly when the element has the muted attribute.
As soon as I remove muted (or set video.muted = false after playback starts), playback stops with the following fatal error:
(“type”:“mediaError”,“parent”:“main”,“details”:“bufferAppendError”,“sourceBufferName”:“video”,....
App Name: Test Application
Bug Severity
Select one that applies
- Impacts operation of app
2. Steps to Reproduce
Run the example code on Fire TV Stick 4K Select.
3. Observed Behavior
When I remove muted (or set video.muted = false after playback starts) in the index.html video element in the example code, playback stops with the following fatal error:
(“type”:“mediaError”,“parent”:“main”,“details”:“bufferAppendError”,“sourceBufferName”:“video”,....
4. Expected Behavior
It should play without error.
5.Environment
OS Name : Ubuntu 22.04.5 LTS
Kepler Version: 0.21.4839
WebView Version: 3.3.1769932800
hls.js Version: 1.6.15
VegaOS Version: OS11(1001010051420)
7. Example Code Snippet / Screenshots / Screengrabs
App.tsx
import {WebView} from ‘@amazon-devices/webview’;
import React, {useRef} from ‘react’;
import {StyleSheet, View} from ‘react-native’;
export const App = () => {
const webRef = useRef(null);
const styles = getStyles();
return (
<WebView
ref={webRef}
style={styles.container}
source={{uri: ‘localhost:8080’}}
allowSystemKeyEvents={true}
allowsDefaultMediaControl={true}
domStorageEnabled={true}
javaScriptEnabled={true}
hasTVPreferredFocus={true}
mediaPlaybackRequiresUserAction={false}
mixedContentMode=“always”
/>
);
};
const getStyles = () =>
StyleSheet.create({
background: {
color: ‘white’,
flex: 1,
flexDirection: ‘column’,
},
container: {
flex: 6,
flexDirection: ‘row’,
alignItems: ‘center’,
},
headerContainer: {
marginLeft: 200,
},
headerText: {
color: ‘white’,
fontSize: 80,
marginBottom: 10,
},
subHeaderText: {
color: ‘white’,
fontSize: 40,
},
links: {
flex: 1,
flexDirection: ‘column’,
justifyContent: ‘space-around’,
height: 600,
},
image: {
flex: 1,
paddingLeft: 150,
},
textContainer: {
justifyContent: ‘center’,
flex: 1,
marginLeft: 190,
},
text: {
color: ‘white’,
fontSize: 40,
},
});
manifest.toml
#
# Copyright (c) 2022 Amazon.com, Inc. or its affiliates. All rights reserved.
#
# PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
#
schema-version = 1
[package]
title = "Basic UI React Native Application for project keplerproject"
version = "0.1.0"
id = "com.amazondeveloper.keplerproject"
[components]
[[components.interactive]]
id = "com.amazondeveloper.keplerproject.main"
runtime-module = "/com.amazon.kepler.keplerscript.runtime.loader_2@IKeplerScript_2_0"
launch-type = "singleton"
categories = ["com.amazon.category.main"]
[wants]
# Web renderer service for rendering web content
[[wants.service]]
id = "com.amazon.webview.renderer_service"
# If Web App needs keyboard support
[[wants.service]]
id = "com.amazon.inputmethod.service"
# If Web App needs video playback
[[wants.service]]
id = "com.amazon.media.server"
# Required for emitting metrics from video playback
[[wants.service]]
id = "com.amazon.mediametrics.service"
# Required for video playback on stable APIs
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"
# If Web App needs audio playback
[[wants.service]]
id = "com.amazon.audio.stream"
# Required for audio management features to work in WebView, features like audio focus, volume control
[[wants.service]]
id = "com.amazon.audio.control"
# To enable accessibility support for your app, it's highly recommended you add UCC service with Service Registrar
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"
# Enable Group-IPC to access media services
[[wants.service]]
id = "com.amazon.gipc.uuid.*"
[offers]
[[offers.service]]
id = "com.amazon.gipc.uuid.*"
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HLS Player</title>
<style>
body {
display:flex;
flex-direction: column;
width:100vw;
height: 100vh;
background-color: black;
padding: 16dp;
align-items: center;
}
video {
width: 50vw;
max-width: 640px;
height: 50vh;
max-height: 360px;
}
#message{
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<video
id="video"
controls
></video>
<h1 id="message">No Error Message</h1>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const videoUrl = "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8";
const video = document.getElementById("video");
// Initialize HLS player
const hls = new Hls();
hls.loadSource(videoUrl);
hls.attachMedia(video);
// Play the video when manifest is parsed
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
// Show error message if any fatal error occurs
hls.on(Hls.Events.ERROR, function (event, data) {
if (data && data.fatal) {
message.textContent = typeof data === "object" ? JSON.stringify(data) : String(data);
}
});
</script>
</body>
</html>
Playback Issues
Url: https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8