Vue使用jsmpeg拉流做视频直播-CSDN博客

本文链接：https://blog.csdn.net/m0_46627730/article/details/106132847

前端做视频直播有很多方法实现，可以通过video，video-player等等，接下来我就说说vue如何使用jsmpeg吧（前面介绍的都是我遇到的错误，可看可不看，切记看到最后的使用方法）

最近用jsmpeg来接收数据做视频直播，一开始是一脸懵逼的，上网搜了一天多，全是直接上html的方法，
例如这种：

<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>
	
</head>
<body>
	<canvas id="video-canvas"></canvas>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('video-canvas');
		var url = '你接收数据的地址';
		var player = new JSMpeg.Player(url, {canvas: canvas});
	</script>
</body>
</html>

我在vue中照葫芦画瓢，引入jsmpeg.min.js，可如何引入呢？我尝试过很多种错误的方法：
注意，是错误的！

import JSMpeg from './jsmpeg.min.js'

var JSMpeg  = require('./jsmpeg.min.js')

结果都是没有JSMpeg.Player方法

也曾尝试过通过npm来下载插件：

npm install jsmpeg

但均不能实现，一直报
在这里插入图片描述
尝试进行代理，却报426

困在这差不多两天，在我想放弃这种方法的时候，我终于找到问题关键了，我一直没有引入对的jsmpeg！！

！！！！！！！！！！！！！！！！！！！！！！！
！！！！！！！！！！！！！！！！！！！！！！！
Vue正确使用jsmpeg的方法：
之前忘了告诉你们在哪下载jsmpeg.min.js了，现在贴出来吧：jsmpeg下载链接（我们只需要其中的jsmpeg.min.js文件即可，其他的都不需要引入vue中）(https://github.com/phoboslab/jsmpeg)

在main.js全局引入jsmpeg.min.js

import '../jsmpeg.min'

打开jsmpeg.min.js，挂载JSMpeg：将var JSMpeg = {} 改为window.JSMpeg = {}
接下来就按上面html的方法用就行了

<template>
  <div class="myVideo">
    <canvas id="video-canvas" style="height: 590px;"></canvas>
  </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    data () {
      return {
        path:'ws://....',   //你拉取视频源地址
      }
    },
    methods: {
    },
    mounted () {
      var canvas = document.getElementById('video-canvas')
      var player = new JSMpeg.Player(this.path, {canvas: canvas})
    },
  }
</script>

<style lang="less">

</style>