Twitch not defined issue in Vue js application

[riyadoshi]

Hello,

I am trying to embed twitch feature preview in my vue js application.

Before that I have used this in laravel blade files.and in that it was working properly without issue but now when I am trying to embed this player in Vue js application It throws an error " ReferenceError: Twitch is not defined ".

I have attached my code below.

<template>
    <div id="twitch_embed" />
</template>

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<script>
    import featureMixin from './mixins/featureMixin';

    export default {
        name: 'TwitchFeature',
        mixins: [
            featureMixin,
        ],
        components: {
        },
        data() {
            return {
                player : {
                    type : Object,
                },
            };
        },
        methods: {
            init: function() {
                let options = {
                    width: 520,
                    height: 520,
                    video: "366873829",
                    parent: []
                };
                this.player = new Twitch.Player("twitch_embed", options);
            }
        },
        created: function() {
            this.init();
        },
    };
</script>

I tried to use vue twitch player also.But I am getting the same error for that.

And if I use embed in iframe like below.I am facing 'player.twitch refused to connect' error.

 <iframe
        src="https://player.twitch.tv/?channel=dallas&parent=streamernews.example.com&muted=true"
        height="720"
        width="1280"
        frameborder="0"
        scrolling="no"
        allowfullscreen="true"
    />

I wanted to embed video, live stream and clips in my project. Please please Help me how to implement this in vue application. Thanks in advance.

[VPenkov]

This doesn't seem like a Twitch bug.

Have you tried calling init on mounted() instead?

[riyadoshi]

Yes I tried using in mounted too. But it throws the same error.

On Sat, 8 Aug 2020, 11:38 pm VPenkov, notifications@github.com wrote:

Have you tried calling init on mounted() instead?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/twitchdev/issues/issues/189#issuecomment-670957419, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEFDBIAEP62L7KYHS4KJT4LR7WIDDANCNFSM4PXLZZFA .

[VPenkov]

Then maybe your issue could be that you have is that your .vue component has two script tags? Not sure how vue-loader handles that, maybe it's looking for exports.

You could try something like:

mounted() {
  return new Promise((resolve, reject) => {
   const script = document.createElement('script')
   script.onload = () => {
    resolve(this.init)
   }
   script.async = true
   script.src = 'https://player.twitch.tv/js/embed/v1.js'
   document.head.appendChild(script)
  })
 }
},

and remove your created() method

[riyadoshi]

Thank you so much for your response. I tried your solution and it worked but there are some errors being thrown from player js attached below.

And for single video this works fine but what if user have selected more no of videos and we want to show all videos in playlist all together. ? I tried using multiple videos like below But it shows only last one.

 let options = {
                    width: 350,
                    height: 350,
                    video: '366873829',
                    video: '657123250',
                    video: '657994463',
                    // collection: '366873829 657123250 657994463',
                    parent: []
                };

And one more thing, To show clips on site I tried putting clip: 'test' in options object. But it's not working for me.

Thanks again!

[VPenkov]

To resolve these errors, I reckon adding script.crossorigin = 'anonymous' on a new line after script.async = true would solve it.

Can't help with the rest, I'm not very familiar with Twitch. Just saw your issue and figured I'd help :)

[riyadoshi]

Hey Thanks for your answer. But it's still throwing an errors.it's not working.

Ok. Can you help me in how can i hide controls in player preview if i want to hide settings , full screen, subscribe, follow etc options from screen?

Thanks in advance!

[jbulava]

Hi @riyadoshi, for future questions I would recommend posting on the Developers Forums. There's more community members there who may be able to help since the GitHub Issues here are used for reporting Twitch product bugs.

That being said, you can find all of the available embed parameter options such as muted and autoplay in the embed documentation. It is not possible to hide player controls such as settings, follow, etc.