How do I break the previous websocket connection when I need to repaint the canvas?

phoboslab / jsmpeg

MPEG1 Video Decoder in JavaScript

MIT License

6.35k stars 1.43k forks source link

How do I break the previous websocket connection when I need to repaint the canvas? #307

Closed xinchanghao closed 5 years ago

xinchanghao commented 5 years ago

When I change the page, I need to new JSMpeg.Player() again, but established two websocket connections....

so, how do I break the previous websocket connection ?

tinyXiongGG commented 5 years ago

When I change the page, I need to new JSMpeg.Player() again, but established two websocket connections....

so, how do I break the previous websocket connection ?

Hi ChhXin Have u solved this problem? i got a problem like u. this is my code:

<body>
    <div>
        <button onclick="play('wss://localhost:7072/live1')">live1</button>
        <button onclick="play('wss://localhost:7072/live2')">live2</button>
    </div>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
    var player;
    function play(url) {
        if (player) {
        player.destroy();
        }
            var canvas = document.getElementById('video-canvas');
            player = new JSMpeg.Player(url, {canvas: canvas});
    }
    </script>
</body>

when i first click，it played well. but when i chose other stream, there is no picture to display. Can u give me some help?

xinchanghao commented 5 years ago

When I change the page, I need to new JSMpeg.Player() again, but established two websocket connections.... so, how do I break the previous websocket connection ?

Hi ChhXin Have u solved this problem? i got a problem like u. this is my code:
<body>
    <div>
        <button onclick="play('wss://localhost:7072/live1')">live1</button>
        <button onclick="play('wss://localhost:7072/live2')">live2</button>
    </div>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
  var player;
  function play(url) {
      if (player) {
      player.destroy();
      }
            var canvas = document.getElementById('video-canvas');
            player = new JSMpeg.Player(url, {canvas: canvas});
  }
    </script>
</body>
when i first click，it played well. but when i chose other stream, there is no picture to display. Can u give me some help?

player.destroy() 可以断掉ws连接，但是需要重新new JSMpeg.Player。

tinyXiongGG commented 5 years ago

When I change the page, I need to new JSMpeg.Player() again, but established two websocket connections.... so, how do I break the previous websocket connection ?

Hi ChhXin Have u solved this problem? i got a problem like u. this is my code:
<body>
    <div>
        <button onclick="play('wss://localhost:7072/live1')">live1</button>
        <button onclick="play('wss://localhost:7072/live2')">live2</button>
    </div>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
    var player;
    function play(url) {
        if (player) {
        player.destroy();
        }
            var canvas = document.getElementById('video-canvas');
            player = new JSMpeg.Player(url, {canvas: canvas});
    }
    </script>
</body>
when i first click，it played well. but when i chose other stream, there is no picture to display. Can u give me some help?
player.destroy() 可以断掉ws连接，但是需要重新new JSMpeg.Player。

我的 js 方法里面是有重新 new ，但是重新 new 的不能播放，没有任何画面

xinchanghao commented 5 years ago

When I change the page, I need to new JSMpeg.Player() again, but established two websocket connections.... so, how do I break the previous websocket connection ?

Hi ChhXin Have u solved this problem? i got a problem like u. this is my code:
<body>
    <div>
        <button onclick="play('wss://localhost:7072/live1')">live1</button>
        <button onclick="play('wss://localhost:7072/live2')">live2</button>
    </div>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
  var player;
  function play(url) {
      if (player) {
      player.destroy();
      }
            var canvas = document.getElementById('video-canvas');
            player = new JSMpeg.Player(url, {canvas: canvas});
  }
    </script>
</body>
when i first click，it played well. but when i chose other stream, there is no picture to display. Can u give me some help?
player.destroy() 可以断掉ws连接，但是需要重新new JSMpeg.Player。
我的 js 方法里面是有重新 new ，但是重新 new 的不能播放，没有任何画面

尝试一下不销毁，不重新new呢？因为你的场景好像是同一个canvas

tinyXiongGG commented 5 years ago

When I change the page, I need to new JSMpeg.Player() again, but established two websocket connections.... so, how do I break the previous websocket connection ?

Hi ChhXin Have u solved this problem? i got a problem like u. this is my code:
<body>
    <div>
        <button onclick="play('wss://localhost:7072/live1')">live1</button>
        <button onclick="play('wss://localhost:7072/live2')">live2</button>
    </div>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
    var player;
    function play(url) {
        if (player) {
        player.destroy();
        }
            var canvas = document.getElementById('video-canvas');
            player = new JSMpeg.Player(url, {canvas: canvas});
    }
    </script>
</body>
when i first click，it played well. but when i chose other stream, there is no picture to display. Can u give me some help?
player.destroy() 可以断掉ws连接，但是需要重新new JSMpeg.Player。
我的 js 方法里面是有重新 new ，但是重新 new 的不能播放，没有任何画面
尝试一下不销毁，不重新new呢？因为你的场景好像是同一个canvas

因为是用了不同的 url 流，所以还是需要重新 new 的，但是不销毁的话，会导致两个流画同一个 canvas

tinyXiongGG commented 5 years ago

When I change the page, I need to new JSMpeg.Player() again, but established two websocket connections.... so, how do I break the previous websocket connection ?

Hi ChhXin Have u solved this problem? i got a problem like u. this is my code:
<body>
    <div>
        <button onclick="play('wss://localhost:7072/live1')">live1</button>
        <button onclick="play('wss://localhost:7072/live2')">live2</button>
    </div>
    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
  var player;
  function play(url) {
      if (player) {
      player.destroy();
      }
            var canvas = document.getElementById('video-canvas');
            player = new JSMpeg.Player(url, {canvas: canvas});
  }
    </script>
</body>
when i first click，it played well. but when i chose other stream, there is no picture to display. Can u give me some help?
player.destroy() 可以断掉ws连接，但是需要重新new JSMpeg.Player。
我的 js 方法里面是有重新 new ，但是重新 new 的不能播放，没有任何画面
尝试一下不销毁，不重新new呢？因为你的场景好像是同一个canvas
因为是用了不同的 url 流，所以还是需要重新 new 的，但是不销毁的话，会导致两个流画同一个 canvas

谢谢你的耐心解答，这个问题解决了，因为 destroy 方法把 canvas 元素也干掉了，后来我 destroy 之后动态添加一个 canvas 元素，解决了问题