JSON is valid but Stage return 400

[salam]

The JSON I’m passing is valid as checked on Editor but when posting it like

$client = new \GuzzleHttp\Client();
    try {
        $response = $client->request('POST','https://api.shotstack.io/stage/render', array(
            'headers' => $headers,
            'json' => $jsondata
        )
    );
    print_r($response->getBody()->getContents());
    }
    catch (\GuzzleHttp\Exception\BadResponseException $e) {
        // handle exception or api errors.
        print_r($e->getMessage());
    }

It’s resulting into

Client error: POST https://api.shotstack.io/stage/render resulted in a 400 Bad Request response: {“success”:true,“message”:“JSON could not be parsed. Please check the submitted request is valid”,“response”:"Invalid JS (truncated…)

Where it goes wrong?

[dazzatron]

Can you share the $jsondata? It appears there is an issue with the JSON that is sent through to the API.

[salam]

Hi @dazzatron thanks for your quick response.
I realized just after posting that json_encode() just before posting to API was the causing the issue; I passed the php var directly and it was ok. But now issue is the rendered video, it’s fluttering! No clue why this is happening.
I tried to convert this template to php rendering

Curtain reveal effect intro video template — Shotstack

here is my modified code

class VideoTemplate1 {
        protected $apiKey;
        protected $apiUrl = 'https://api.shotstack.io/stage';
    
        public function __construct(){
            $this->apiKey = 'MY_API_KEY';
        }
    
        public function render(){
            $config = Configuration::getDefaultConfiguration()
                ->setHost($this->apiUrl)
                ->setApiKey('x-api-key', $this->apiKey);
            $client = new EditApi(null, $config);
            
            $font1 = new Font();
            $font1->setSrc('https://templates.shotstack.io/basic/asset/font/barlow-regular.ttf');
            $font2 = new Font();
            $font2->setSrc('https://templates.shotstack.io/basic/asset/font/barlow-extrabold.ttf');
            
            $soundtrack = new Soundtrack();
            $soundtrack
                ->setSrc('https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3')
                ->setEffect('fadeOut');
    
            // Schene 1 - Element 1
            $asset1 = new HtmlAsset();
            $asset1
                ->setHtml('<p>&nbsp;</p>')
                ->setWidth(960)
                ->setHeight(1080)
                ->setBackground('#168c83');
                
            $trans1 = new Transition();
            $trans1
                ->setOut('carouselLeftSlow');
                
            $clip1 = new Clip();
            $clip1
                ->setAsset($asset1)
                ->setStart(0)
                ->setLength(1.4)
                ->setPosition('left')
                ->setTransition($trans1);
            
            // Schene 1 - Element 2
            $asset2 = new HtmlAsset();
            $asset2
                ->setHtml('<p>&nbsp;</p>')
                ->setWidth(960)
                ->setHeight(1080)
                ->setBackground('#168c83');
                
            $trans2 = new Transition();
            $trans2
                ->setOut('carouselRightSlow');
                
            $clip2 = new Clip();
            $clip2
                ->setAsset($asset2)
                ->setStart(0)
                ->setLength(1.4)
                ->setPosition('right')
                ->setTransition($trans2);
            
            // Schene 1 - Element 3
            $asset3 = new ImageAsset();
            $asset3
                ->setSrc('https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/logos/corporate-colour.png');
            $offset3 = new Offset();
            $offset3
            ->setY(0.1);
                
            $clip3 = new Clip();
            $clip3
                ->setAsset($asset3)
                ->setStart(0)
                ->setLength(3)
                ->setFit('none')
                ->setScale(0.65)
                ->setOffset($offset3);
                
            // Schene 1 - Element 4
            $asset4 = new HtmlAsset();
            $asset4
                ->setHtml("<p>Main Title</p>")
                ->setCss("p { font-family: Barlow ExtraBold; color: #555555; font-size: 60px; }")
                ->setWidth(1000)
                ->setHeight(70)
                ->setPosition("bottom");
                
            $trans4 = new Transition();
            $trans4->setIn('slideUp');
                
            $offset4 = new Offset();
            $offset4->setY(-0.12);
                
            $clip4 = new Clip();
            $clip4
                ->setAsset($asset4)
                ->setStart(0.8)
                ->setLength(2.2)
                ->setOffset($offset4)
                ->setTransition($trans4);
                
            // Schene 1 - Element 5
            $asset5 = new HtmlAsset();
            $asset5
                ->setHtml('<p>Some other text can go here</p>')
                ->setCss('p { font-family: "Barlow"; color: #777777; font-size: 50px; }')
                ->setWidth(1000)
                ->setHeight(120)
                ->setPosition('top');
                
            $trans5 = new Transition();
            $trans5
                ->setIn('slideUp');
                
            $offset5 = new Offset();
            $offset5
            ->setY(-0.2);
                
            $clip5 = new Clip();
            $clip5
                ->setAsset($asset5)
                ->setStart(1)
                ->setLength(2)
                ->setOffset($offset5)
                ->setTransition($trans5);
                
            // Schene 1 - Element 6
            $asset6 = new HtmlAsset();
            $asset6
                ->setHtml('<p>www.example.com</p>')
                ->setCss('p { font-family: "Barlow"; color: #CC000000; font-size: 30px; }')
                ->setWidth(800)
                ->setHeight(100);
                
            $trans6 = new Transition();
            $trans6
                ->setIn('slideUp');
                
            $offset6 = new Offset();
            $offset6
            ->setY(0.3);
                
            $clip6 = new Clip();
            $clip6
                ->setAsset($asset6)
                ->setStart(1.2)
                ->setLength(1.8)
                ->setPosition('bottom')
                ->setOffset($offset6)
                ->setTransition($trans6);
                
            // Schene 1 - Element 7
            $asset7 = new HtmlAsset();
            $asset7
                ->setHtml('<p>&nbsp;</p>')
                ->setWidth(1920)
                ->setHeight(160)
                ->setBackground('#f3f3f9');
                
            $trans7 = new Transition();
            $trans7
                ->setIn('carouselUp');
                
            $clip7 = new Clip();
            $clip7
                ->setAsset($asset7)
                ->setStart(0.6)
                ->setLength(2.4)
                ->setPosition('bottom')
                ->setTransition($trans7);
            
            // Schene 1 - Element 8
            $asset8 = new HtmlAsset();
            $asset8
                ->setHtml('<p>&nbsp;</p>')
                ->setWidth(1920)
                ->setHeight(1080)
                ->setBackground('#ddddee');
                
            $clip8 = new Clip();
            $clip8
                ->setAsset($asset8)
                ->setStart(0)
                ->setLength(3);
    
            $track = new Track();
            $track
                ->setClips([$clip1,$clip2,$clip3,$clip4,$clip5,$clip6,$clip7,$clip8]);
    
            $timeline = new Timeline();
            $timeline
                ->setFonts([$font1,$font2])
                ->setBackground('#000000')
                ->setSoundtrack($soundtrack)
                ->setTracks([$track])
                ->setCache(false);
    
            $output = new Output();
            $output
                ->setFormat('mp4')
                ->setResolution("1080");
    
            $edit = new Edit();
            $edit
                ->setTimeline($timeline)
                ->setOutput($output)
                ->setCallback('mydomain.com/shotstack-hook.php');
    
            try {
                $response = $client->postRender($edit)->getResponse();
            } 
            catch (Exception $e) {
                die('Request failed: ' . $e->getMessage());
            }
            
            echo $response->getMessage() . "\n";
            echo "#: " . $response->getId() . "\n";
        }
    }

and here is the output

[dazzatron]

Glad you figured out the first part.

As for the flickering that is likely to do with having all your clips on one track. Check out the following post:

Blinking/flickering/flashing text and images

This normally happens when the images and text are all on the same track and the start and end times overlap. The API can’t determine which clip to show so it flickers between them. The solution is to make use of tracks, see the API reference here: https://shotstack.io/docs/api/#tocstrack. Take a look at the following video: You can see how the second part of the clip has been broken up into two clips, allowing the title to sit on top of the video: { "timeline": { "so…

Tracks are used to layer items on top of each other. Once you place your layered clips into their own track it should work nicely.

[salam]

Got it; and what about the css not taking effect in HtmlAsset?

[lucas.spielberg]

The PHP SDK is setting the default fit to “crop”. For the HTML assets you need to override that and set it to none - which will make sure it retains the width/height you specify and doesn’t stretch it to fill the screen. Just use setFit('none') for each HTML asset against the clip, same level as setStart and setLength.