Vue使用jsmpeg拉流做视频直播

前端做视频直播有很多方法实现,可以通过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)

  1. main.js全局引入jsmpeg.min.js
import '../jsmpeg.min'
  1. 打开jsmpeg.min.js,挂载JSMpeg:将var JSMpeg = {} 改为window.JSMpeg = {}
    Vue使用jsmpeg拉流做视频直播_第1张图片
  2. 接下来就按上面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>

你可能感兴趣的:(vue,直播)