videojs / videojs-vr

A plugin to add 360 and VR video support to video.js.
https://videojs-vr.netlify.com/
MIT License
541 stars 143 forks source link

hls 360 error on android chrome #198

Open sopaidar opened 4 years ago

sopaidar commented 4 years ago

Hello I'm using video.js-vr to play hls livestreams. this is my code:

import React from 'react';
import videojs from 'video.js'
import './videojs-vr';

import axios from 'axios';
import config from '../../server/config/default';

export default class VideoPlayer extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            stream: false,
            videoJsOptions: null
        }
    }

    componentDidMount() {

        axios.get('/user', {
            params: {
                username: this.props.match.params.username
            }
        }).then(res => {
            this.setState({
                stream: true,
                videoJsOptions: {
                    autoplay: false,
                    controls: true,
                    sources: [{
                        src: '../../live/' + res.data.stream_key + '/index.m3u8',
                        type: 'application/x-mpegURL'
                    }],
                    fluid: true,
                }
            }, () => {
                this.player = videojs(this.videoNode, this.state.videoJsOptions, function onPlayerReady() {
                    console.log('onPlayerReady', this)
                    const player = this
                    player.vr({
                        projection: '360',
                        debug: true,
                        forceCardboard: false
                    })
                });
            });
        })
    }

    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }

    render() {
        return (
            <div className="row player">
                <div className="col-xs-12 col-sm-12 col-md-10 col-lg-8 mx-auto mt-5">
                    {this.state.stream ? (
                        <div data-vjs-player>
                            <video ref={node => this.videoNode = node} id="videojs-vr-player" className="video-js" controls />
                        </div>
                    ) : ' Loading ... '}
                </div>
            </div>
        )
    }
}

It's OK on my chrome on PC but when I try to open it on my android phone chrome, it has this error: your browser/device does not support hls 360 video. See http://webvr.info for assistance.

David2k13 commented 3 years ago

crossorigin="anonymous"