Video-js not able to play rtmp videos in edge browser

[sshivi3]

Flash/RTMP playback works in Chrome and IE 11, but not Edge. It says "No compatible source found".

I am using wowza server for delivering videos. The player works perfectly in all the browsers except the edge browser. It says flash not enabled.

Flash is enabled in Advanced Settings, and I have confirmed that Flash work in Adobe's help page: https://helpx.adobe.com/flash-player.html

Is it somethign to do with player or do we have any workaround for this issue

Any help is much appreciated.

[gkatsev]

Can you elaborate on which version of Video.js you're using and version of videojs-flash, if using? We recently updated videojs-flash (videojs/videojs-flash#39) to fix a similar issue in desktop Chrome and Safari. It's possible that we missed Edge as needing a similar treatment.

[sshivi3]

The video-js version we are using is 4.3.0

I have tried with the latest versions as well but the problem is still there with the edge browser. Edge browser does not supports flash it seems even though it is enabled in browser settings.

Thanks, Shivi Shukla

From: Gary Katsevman [mailto:notifications@github.com] Sent: Wednesday, January 03, 2018 9:47 PM To: videojs/video.js Cc: Shukla, Shivi (Perkins Coie); Author Subject: Re: [videojs/video.js] Video-js not able to play rtmp videos in edge browser (#4857)

Can you elaborate on which version of Video.js you're using? We recently updated videojs-flash (videojs/videojs-flash#39https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_videojs_videojs-2Dflash_pull_39&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=XIjQ6x2emOtylYXoN9W2NEUgta1pV9HaCRudOmDoTGs&s=kRqWilawIiLXPBOFlr0WH0nzfkr-sc9HRB_O91yE12k&e=) to fix a similar issue in desktop Chrome and Safari. It's possible that we missed Edge as needing a similar treatment.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_videojs_video.js_issues_4857-23issuecomment-2D355053036&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=XIjQ6x2emOtylYXoN9W2NEUgta1pV9HaCRudOmDoTGs&s=Qq8gOcZfN46nE3ahl8DUsogJuPM6t93Ky0pEKrKUDow&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AhUUl4OBH4Z4cO8RrDjvR1u1QqR8ZnMtks5tG6fmgaJpZM4RRiQW&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=XIjQ6x2emOtylYXoN9W2NEUgta1pV9HaCRudOmDoTGs&s=yP3vujNsYilx1sCT_14Bnt9TvutATiFAGSmFNOR2z5s&e=.

---

NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.

[gkatsev]

Version 4.3.0 isn't really supported anymore. However, it's definitely possible that Edge is doing something similar to Chrome and Safari with Flash where they have it but they removed a way for us to know whether it's there.

[sshivi3]

Ok, so what do you suggest in this case?

Thanks, Shivi Shukla

From: Gary Katsevman [mailto:notifications@github.com] Sent: Wednesday, January 03, 2018 9:59 PM To: videojs/video.js Cc: Shukla, Shivi (Perkins Coie); Author Subject: Re: [videojs/video.js] Video-js not able to play rtmp videos in edge browser (#4857)

Version 4.3.0 isn't really supported anymore. However, it's definitely possible that Edge is doing something similar to Chrome and Safari with Flash where they have it but they removed a way for us to know whether it's there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_videojs_video.js_issues_4857-23issuecomment-2D355056517&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=WQgK0K5mEEmLmVq24hCjewn92glkWTtF5JyZBpS0V0Y&s=Y_5MvHApQbOKEVGMrw4jXOG-zd3E2vHb5neeR3LteCE&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AhUUl-2Dv-2DPDAPFszul3ClS7GzAoaZ8tmNks5tG6q-5FgaJpZM4RRiQW&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=WQgK0K5mEEmLmVq24hCjewn92glkWTtF5JyZBpS0V0Y&s=LMl_RjvKziyoefJvyzYx43E0S1hDnM9MJglZAWmOSWA&e=.

---

NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.

[ROBERT-MCDOWELL]

edge, chrome and other browser ppapi plugin compatible have now flash like "builtin". however if you use swfobject you still can detect flash ppapi, so why not check the source code of swfobject?

[gkatsev]

In my test with Edge, it seems like Edge is still exposing the flash API to the page, so, not sure what's going on. Do you have a reduced test case available?

[sshivi3]

I have this code:

<video id="my_video_playerCustom" class="video-js vjs-default-skin" controls poster="<%=imageLink %>" preload="auto" width="50%" height="400" data-setup='{ "techOrder":["html5", "flash"] }' autoplay="autoplay">

[gkatsev]

For RTMP, Video.js requires the splits the connection URL and stream name with an &, see example here: http://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs

[mister-ben]

The second example with { "techOrder":["html5"] } wouldn't work, as RTMP needs Flash.

[sshivi3]

Ok, so I am using HLS stream now with the video js player but it is not working in IE11 and mozilla on Windows 10 machine. Below is the required information:

1) Operating system: Windows 10 2) Media server: Wowza 3) IE version: 11.608.15063.0

Code I am using:

So, the videos are playing fine in Edge and chrome but not in IE11. When I add one more source with rtmp link then it playes in IE11 also but my client does not want to include 2 links for both rtmp and HLS. What I am doing wrong here?

Shivi Shukla | Perkins Coie LLP E. SShukla@perkinscoie.commailto:%20SShukla@perkinscoie.com

From: mister-ben [mailto:notifications@github.com] Sent: Thursday, January 4, 2018 11:29 PM To: videojs/video.js video.js@noreply.github.com Cc: Shukla, Shivi (Perkins Coie) SShukla@perkinscoie.com; Author author@noreply.github.com Subject: Re: [videojs/video.js] Video-js not able to play rtmp videos in edge browser (#4857)

The second example with { "techOrder":["html5"] } wouldn't work, as RTMP needs Flash.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_videojs_video.js_issues_4857-23issuecomment-2D355352991&d=DwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=we1Z2MZnpz656_Ka0MF6BWYdDcuB5L5EyU6SaR6ZZb0&s=WbILO-xH5uGmGi5ia-Qq_fyYNKpyp6Vr74v_sjasZzg&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AhUUlzobw6YEiWDny74K2W7lH3wGrcCEks5tHRFlgaJpZM4RRiQW&d=DwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=we1Z2MZnpz656_Ka0MF6BWYdDcuB5L5EyU6SaR6ZZb0&s=ZUGxTJGgZTRO4ddxaU6cbnLFf-N2pfBc1dDfWOw4WZg&e=.

---

NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.

[mister-ben]

It's difficult to say without a reproducible test case. What errors are showing in the console?

[sshivi3]

It is saying compatible source not found and as soon as I add the rtmp link, it starts playing the video.

Thanks, Shivi Shukla

From: mister-ben [mailto:notifications@github.com] Sent: Wednesday, January 10, 2018 2:29 AM To: videojs/video.js Cc: Shukla, Shivi (Perkins Coie); Author Subject: Re: [videojs/video.js] Video-js not able to play rtmp videos in edge browser (#4857)

It's difficult to say without a reproducible test case. What errors are showing in the console?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_videojs_video.js_issues_4857-23issuecomment-2D356412079&d=DwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=Qbn17esuhIQTl2j5Qa9GTE2K-KFIxUGTjmhPpWu-jv4&s=RIWS5_E8sJ2XE_ycAggZOTfpObyHEVckWmn5Zlvk86s&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AhUUl1Yq-2DW-5FoSaMGZWP-5Fmv5TS78e298Vks5tI9MmgaJpZM4RRiQW&d=DwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=Qbn17esuhIQTl2j5Qa9GTE2K-KFIxUGTjmhPpWu-jv4&s=jHEzYGdmoKxoqDjrzNMcjl5fTBZlX-PVQWeZmh2YWT4&e=.

---

NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.

[mister-ben]

I suspect the code snippet above isn't quite representitive of what you have. The invalid HTML (unclosed script tabs) would cause both the Video.js and contrib-hls scripts not to load at all, so whilst you might get playback in browsers with native HLS support, HLS wouldn't work with Chrome as you describe. It's really important to include a valid reduced test case if you want someone to replicate be able to tell where you're going wrong. There are a couple of good articles on reduced test cases at CSS tricks and Stack Overflow.

Anyway, this is based on your code with correct HTML and working URLs, which should be useful as a baseline.

<!doctype html>
<html>
  <head>
    <title>HLS</title>
    <link href="https://unpkg.com/video.js@6.6.0/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js@6.6.0/dist/video.js"></script>
    <!-- Include Flash for HLS for IE 10, and IE 11 on Windows < 8.1 -->
    <script src="https://unpkg.com/videojs-flash@2.1.0/dist/videojs-flash.min.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls@5.12.2/dist/videojs-contrib-hls.js"></script>
    <script>
      /* This is too early, the element is not in the DOM yet.
       * However the player will still be initialised because
       * of the data-setup attribute
       */
      var player = videojs('example-video');
      player.play();
    </script>
  </head>
  <body>
    <video id="example-video" class="video-js vjs-default-skin" controls preload="auto" width="400" height="400" data-setup='{ "techOrder":["html5","flash"] }'>
      <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL"> Your browser does not support html5 videos</video>
  </body>
</html>

Demo: http://jsbin.com/xirupin/edit?html,output

[gkatsev]

Seems like you got RTMP working which is what the original issue is about and now you're having issues with HLS playback? I think following @mister-ben's example would be good. I'm going to close this issue but we can still continue the discussion here to get your page working.

[ROBERT-MCDOWELL]

Don't know if it can help, but this project https://github.com/lucaslorentz/AS3RtmpClient can be converted in JS without any problem I guess. also this As3 class:

/////////////
package{

    import flash.net.Socket;
    import flash.net.ObjectEncoding;
    import flash.text.TextField;
    import flash.utils.ByteArray;
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    import flash.events.ProgressEvent;
    import flash.events.SecurityErrorEvent;
    import flash.display.Sprite;
    import flash.system.Security;

    public class RTMPSocketByteArray extends Sprite{

        // connection status:inactive,pending,handshake,active
        public var status:String;
        public var socket:Socket;
        public var debug:TextField;
        private var serverURL:String = "storage.live-school.net";
        private var serverPolicyURL:String = "https://secure.live-school.net/crossdomainSocket.xml";

        public function RTMPSocketByteArray(){
            // reset status
            status = "inactive";
            // create new socket
            socket = new Socket();
            // initializing events
            socket.addEventListener(Event.CLOSE,onRtmpClose);
            socket.addEventListener(Event.CONNECT,onRtmpConnect);
            socket.addEventListener(IOErrorEvent.IO_ERROR,onRtmpIOError);
            socket.addEventListener(ProgressEvent.SOCKET_DATA,onRtmpData);
            socket.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onRtmpSecurityError);
            Security.loadPolicyFile(serverPolicyURL)
            // connect
            socket.connect(serverURL,1935);
        }

        public function onRtmpClose(event:Event):void{
            logTrace("onClose:"+event);
        }
        public function onRtmpIOError(event:IOErrorEvent):void{
            logTrace("onIOError:"+event.text);
        }
        public function onRtmpSecurityError(event:SecurityErrorEvent):void{
            logTrace("onSecurityError "+event.text);
        }
        public function onRtmpData(event:ProgressEvent):void{
            logTrace("onData "+status);
            switch (status){
                case "active":
                    break;
                case "pending":
                    send();
                    break;
                case "inactive":
                    break;
                case "handshake":
                    connect();
                    break;
            }
        }
        public function onRtmpConnect(event:Event):void{
            logTrace("onConnect");
            status = "pending";
            var count:int = -1;
            var bytes:ByteArray = new ByteArray();
            // send first handshake:0x03 followed by 1536 bytes
            // write header byte
            bytes.writeByte(0x03);
            // write 1536 random (zero in my case) bytes
            while (++count < 1536){
                bytes.writeByte(0x00);
            }
            socket.writeBytes(bytes);
            // send data
            socket.flush();
        }
        public function send():void{
            status = "handshake";
            // create instances
            var agentInfo:Object = new Object();
            var copyBytes:ByteArray = new ByteArray();
            var rtmpBytes:ByteArray = new ByteArray();
            var bodyBytes:ByteArray = new ByteArray();

            // CREATE PLAYER SETTINGS

            // application to connect to
            agentInfo["app"] = "milgra";
            // referrer
            agentInfo["swfUrl"] = "Kilroy was here...";
            // page url
            agentInfo["pageUrl"] = "She sells sea shells...";
            // agent
            agentInfo["flashVer"] = "DOS 5.00 with Norton Commander";
            agentInfo["tcUrl"] = "rtmp://localhost/milgra";
            agentInfo["audioCodecs"] = 615;
            agentInfo["videoCodecs"] = 76;
            agentInfo["videoFunction"] = 0;
            agentInfo["objectEncoding"] = 0;

            // CREATE BODY

            // we use ByteArray's built-in AMF encoder,amf0 is needed
            bodyBytes.objectEncoding = ObjectEncoding.AMF0;
            // write method id 
            // (AMF String id is 0x03 then string length on 2 bytes,then UTF-encoded string)
            bodyBytes.writeObject("connect");
            // a 64-bit double-precision floating point number is next 
            // (AMF Number is 0x00 then number on 8 bytes as a signed,little - endian encoded 
            // double precision floating point number)
            bodyBytes.writeObject(1);
            // encoding agent info 
            // (AMF object starts with the id 0x03,ends with 0x00 0x00 0x09,
            // keys are AMF strings without starting 0x03,values are standard AMF values
            bodyBytes.writeObject(agentInfo);

            // CREATE FIRST chunk

            // cloning second 1536 bytes from server respose
            socket.readByte();
            socket.readBytes(copyBytes,0,1536);
            socket.readBytes(copyBytes,0,1536);

            // CREATE RTMP header

            // first byte,header size is 12 byte
            rtmpBytes.writeByte(0x03);

            // next three bytes
            rtmpBytes.writeByte(0x00);
            rtmpBytes.writeByte(0x00);
            rtmpBytes.writeByte(0x00);

            // body size in three bytes
            var firstByte:int = bodyBytes.length >> 16;

            rtmpBytes.writeByte(firstByte);
            rtmpBytes.writeShort(bodyBytes.length);

            // body type in one byte = 0x14 == invoke
            rtmpBytes.writeByte(0x14);

            // last four bytes
            rtmpBytes.writeByte(0x00);
            rtmpBytes.writeByte(0x00);
            rtmpBytes.writeByte(0x00);
            rtmpBytes.writeByte(0x00);

            // split body into 128 byte chunks with zero-byte rtmp headers
            var counter:int = -1;
            var newBody:ByteArray = new ByteArray();

            bodyBytes.position = 0;
            while(++counter<bodyBytes.length){
                // write header
                if(counter % 128 == 0 && counter != 0){
                    newBody.writeByte(0xc3);
                }
                // copy byte
                newBody.writeByte(bodyBytes.readByte());
            }

            // CREATE MESSAGE
            socket.writeBytes(copyBytes);
            socket.writeBytes(rtmpBytes);
            socket.writeBytes(newBody);

            // SEND DATA
            socket.flush();
        }
        private function logTrace(msg:String):void{
            debug.text = msg;
            trace(msg);
        }
        public function connect():void{
            logTrace("connect");
        }
    }
}

[gkatsev]

You cannot connect to the rtmp protocol via javascript in the browser.

[sshivi3]

RTMP is still not working in edge browser. That is why I have to use HLS as another source so that the browsers can pick up whatever protocol suits them. Some are working with rtmp and some are with HLS.

Shivi Shukla | Perkins Coie LLP E. SShukla@perkinscoie.commailto:%20SShukla@perkinscoie.com

From: Gary Katsevman [mailto:notifications@github.com] Sent: Thursday, January 11, 2018 10:06 PM To: videojs/video.js video.js@noreply.github.com Cc: Shukla, Shivi (Perkins Coie) SShukla@perkinscoie.com; Author author@noreply.github.com Subject: Re: [videojs/video.js] Video-js not able to play rtmp videos in edge browser (#4857)

Seems like you got RTMP working which is what the original issue is about and now you're having issues with HLS playback? I think following @mister-benhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_mister-2Dben&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=6jeubKYnWoMMiRzGGdnE2CbAyVO0pECWfAIm8DPFZq4&s=-aDKg9yyLA-neC9qkn0-pGXuyzyAUgvVVmEx0mbnVno&e='s example would be good. I'm going to close this issue but we can still continue the discussion here to get your page working.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_videojs_video.js_issues_4857-23issuecomment-2D356984514&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=6jeubKYnWoMMiRzGGdnE2CbAyVO0pECWfAIm8DPFZq4&s=pk4m-QX9RXDJsxbuXe3ib5KrwEmJgyAtoW6TEmeCmBI&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AhUUl1XL5UrISvV-2DMGySb-5FkD5NjH8TU3ks5tJjiIgaJpZM4RRiQW&d=DwMFaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=OKoAUiULBUzgfXCGPiosfopxROjPmNz5pGMSBoDEAYY&m=6jeubKYnWoMMiRzGGdnE2CbAyVO0pECWfAIm8DPFZq4&s=kNgKPMXTB6t_WwKV9q2WkM5VGtMp5YaFPqQIT5YNTS8&e=.

---

NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.