simple-streaming-web-app is not working #7
Assignees
Labels
bug
Something isn't working
Comments
|
under investigation. |
|
Question to better understand the scenario for the VP8 ffmpeg: Which is supported by: Chrome (52+), Edge, Firefox, Safari What is the browser that you had performed the tests, also the version? |
|
I just used this test app, without changing codes/etc. I used Chrome 101.0.4951.41 Ubuntu. I think VP8 is default codec for chrome. |
|
Hi Alexander @caiiiycuk, We have been rewriting the code, for better reading and maintenance, please not that webrtc has support variations among browsers and Chrome is the recommend browser for this solution. I've just published a preview version, branch v2preview https://github.com/aws-samples/aws-simple-streaming-webapp/tree/v2preview intend to address the main points reported by you as well as simplification of the deployment steps and option to run locally de UI and container, only depending on deploy the Amplify components, such as Auth and APIs (API Gateway, Lambda and Cognito User Pool). A few considerations on the issues reported by you: Please check check the https://github.com/osmarbento-AWS/simple-streaming-webapp/blob/v2preview/frontend/BROWSER.md for more information
Fixed. Please check the v2preview.
Safari and IOS in not currently supported. You can change ffmpeg to transcode the video by replacing the ffmpeg command on thebackend/docker_files/src/transwrap.js if that is a requirement for you and change the MediaRecorder as you suggested. Please see below the ffmpeg command bellow: chenge the vcoded to: const ffmpeg = callff.spawn(
'ffmpeg',
['-i', '-', '-c:v', 'libx264', 'pix_fmt', 'yuv420p', '-profile:v main', '-preset', 'veryfast', '-tune', 'zerolatency', '-acodec', 'aac', '-reconnect', '3', '-reconnect_at_eof', '1', '-reconnect_streamed', '3', '-f', 'flv', rtmpURL
]);More details in the follow link
mediaRecorder.current = new MediaRecorder(outputStream, {
mimeType: "video/webm;codecs=h264", // attempt to improve cross browser / platform support with h264
videoBitsPerSecond: 3000000,
});The main reason to not transcode in the proxy server ECS container is to avoid adding additional latency. Which is one of the key features of amazon IVS. Q1. Do I need to scale the instance count of fargate nodes somehow, like add node for each of the 10 publisher? Q2. Same for ivs channel. Do I need to create a new channel for a new publisher (1 channel == 1 publisher)? So, I need to do it programmatically? 1 Channel per simultaneous publisher, you can also use IVS API's to manage the stream keys, so that you provide 1 stream key per publisher, please check Amazon IVS API documentation for more information. https://docs.aws.amazon.com/ivs/latest/APIReference/Welcome.html Please note that this is a preview, we are doing sanity checks, code review before merging it to the main branch. |
|
Thank you. Doesn't IVS support RTMPS/vp9? I mean can I copy of video stream with ffmpeg like in h264 case? |
|
I did |
|
guess need to add |
|
|
npm: 6.14.17 |
|
I added this libs, and frontend is working, also I deployed backend. I saw 2 running task in ivs service. Everything seems working, but when I trying to go live I have this issues: DynamoDB config: |
|
Ok, I saw that you added a CloudFront in front of the ECS servers, and probably cloudfront is not accepting the self-signed certificate, having TLS negation denied.
1.2) now point the distribution to the HTTP endpoint, so the conversation between browser and CDN, will happen in HTTPS and HTTP between the CDN and Server.
|
|
Okay, I removed cloudfront, and now everything works. But, I have very big delay ~5 min. When I open a stream player I see the stream that was like 5 min ago. I think it's because the fargate container is not powerful enough to process a stream in realtime (I used transcoder for h264): You see that fps is 15, and speed is 0.586x, at start it was like 1.2x |
|
Setting vCPU to 1 didn't help. Delay is here. It works very unstable for me.
Each time I have this error messages from ffmpeg: |
|
I have been thinking on how to auto detect the supported mimeType of the browser and based on that, choose to transcode or not in the remote container. In the frontend, we might think in a function like: function getmimeType() {
let options = {
mimeType: "video/webm;codecs=h264",
videoBitsPerSecond: 3000000,
};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
addDebugLine(Date.now(), `${options.mimeType} + is not Supported`);
options = {
mimeType: "video/webm",
videoBitsPerSecond: 3000000,
};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
addDebugLine(Date.now(), `${options.mimeType} + is not Supported`);
options = {
mimeType: "video/mp4",
videoBitsPerSecond: 3000000,
};
}
}
return options;
} "video/webm", would cover most of the cases for vp9 and vp8, although vp9 has several impact on performance, and instead we might force to vp8 instead.
In the backend, transwrap.js I'm planning to add a if to detect the codec and so decide on transcoding or not. As has several impact on the container size. With Chrome Version 102.0.5005.61 (Official Build) (x86_64), and mac, it accepts video/webm;codecs=h264, it runs correctly and reasonable performance, 1.X speed and 6s e2e latency. Could you provide the following information: 1) what the current video and audio codec selected in the MediaRecorder, if you check the console log is been printing the data blob, there you can get such information: Firefox: 2) Also, could you run the following JS: function getSupportedMimeTypes(media, types, codecs) {
const isSupported = MediaRecorder.isTypeSupported;
const supported = [];
types.forEach((type) => {
const mimeType = `${media}/${type}`;
codecs.forEach((codec) => [
`${mimeType};codecs=${codec}`,
`${mimeType};codecs=${codec.toUpperCase()}`,
// /!\ false positive /!\
// `${mimeType};codecs:${codec}`,
// `${mimeType};codecs:${codec.toUpperCase()}`
].forEach(variation => {
if(isSupported(variation))
supported.push(variation);
}));
if (isSupported(mimeType))
supported.push(mimeType);
});
return supported;
};
// Usage ------------------
const videoTypes = ["webm", "ogg", "mp4", "x-matroska"];
const audioTypes = ["webm", "ogg", "mp3", "x-matroska"];
const codecs = ["should-not-be-supported","vp9", "vp9.0", "vp8", "vp8.0", "avc1", "av1", "h265", "h.265", "h264", "h.264", "opus", "pcm", "aac", "mpeg", "mp4a"];
const supportedVideos = getSupportedMimeTypes("video", videoTypes, codecs);
const supportedAudios = getSupportedMimeTypes("audio", audioTypes, codecs);
console.log('-- Top supported Video : ', supportedVideos[0])
console.log('-- Top supported Audio : ', supportedAudios[0])
console.log('-- All supported Videos : ', supportedVideos)
console.log('-- All supported Audios : ', supportedAudios)3) what is the current ffmpeg command that you are using? |
|
I will look into it |
|
1) For FF: For Android: For iPhone 8 (15.5): 3) const ffmpeg = callff.spawn(
'ffmpeg',
['-i', '-', '-vcodec', 'copy', '-preset', 'veryfast', '-tune', 'zerolatency', '-acodec', 'aac', '-reconnect', '3', '-reconnect_at_eof', '1', '-reconnect_streamed', '3', '-f', 'flv', rtmpURL
]);My solution is deployed to
Will keep it live for couple of days, you will have a chance to test how it works for you. Because for me it completely unusable, I recorded couple of videos:
|
|
Task config: Full task logs: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi! I am trying to build a webrtc application that uses ivs to broadcast the video. The main requirement for my app: it must work in all major browsers (chrome, ff, edge, safari, android webview, ios safari). I found this app in aws blogs, and from first look it is exactly what I need. BUT, actually it's not working out of the box. Problems that I found so far:
1. (minor) It's not possible to deploy the app in a custom region, because the region is hard coded (
install_ivs_backend.sh:174)replace_kms="arn:aws:kms:us-east-1:${replace_accountid}:alias/aws/s3"I tried to change the region to eu-north-1 but no luck. Never mind, I deployed it to us-east-1.
2. (minor) The pattern in
hosting/S3AndCloudFront/parameters.jsoncontains account id which in my case have uppercase letters. And so whenever I tried to doaws pushit failed on the S3 bucket creation error. So I changed the pattern to be able to deploy it.3. (major)
stream.js:390captureStream is not working for Firefox 100, it tells me no such method. Idk why, in Chrome it works.4. (major)
stream.js:380-404the app tries to send data into websocket before it opens. So I put the media recorderstart(1000)in the "open" listener to make it work5. (critical)
stream.js:397-400mimeTypevideo/webmis not supported by Safari (both mac/iphone), for Safari you should usevideo/mp4. So this app will work only on Windows, Linux PC and Android. Not sure if ffmpeg will silently handle change of container.6. (critical) even with all of my fixes I can't test this app, because on fargate side ffmpeg didn't transcode stream, it prints:
FFMPEG MSG: [flv @ 0x56385e3ba380] Video codec vp8 not compatible with flv. - seems that ffmpeg command line arguments is incorrect.
So I am very surprised that this demo app is not working even for the most popular browser - Chrome.
--
Regarding to the app architecture, for me is not clear: is app intended to manage only one webrtc publisher? I know that ffmpeg does not do any intensive cpu operations when transcoding from webrtc to rtmps, but anyway at some count of publisher you can't use the same node.
Q1. Do I need to scale the instance count of fargate nodes somehow, like add node for each of the 10 publisher?
Q2. Same for ivs channel. Do I need to create a new channel for a new publisher (1 channel == 1 publisher)? So, I need to do it programmatically?
P. S. I am not trying to complain that app is not working, overall this app is doing a lot of work, so I hope to run it finally. Thank you for your work.
The text was updated successfully, but these errors were encountered: