Vue Yingshi Camera Live Video Example Code

Vue Yingshi camera live video code.

HTML code:

<div class="mainClass" v-show="rtmp_url!=''">
 <video  controls playsinline webkit-playsinline autoplay>
  <source type="application/x-mpegURL" :src="http_url"/>
  <source :src="rtmp_url"/>
 </video>   
</div>

The live broadcast address is obtained by calling the interface.

&lt;script&gt;
export default {
  data(){
   return{
    player:"",
    rtmp_url:"",
    http_url:"",
    message:'loading...',
   }
  },
  mounted(){ 
   ();
  },
  methods:{
   GetLiveUrl(){
    //Asynchronously obtain the live broadcast address and assign it to rtmp_url, http_url   }
  },
  updated() {
   if(this.rtmp_url!=""){
    //If declared in mounted, the live broadcast address has not been retrieved, resulting in the video not being displayed.  So put it here     = new EZUIPlayer('myPlayer'); 
   }
  }
}
&lt;/script&gt;

Supplement: vue H5 project calls mobile phone camera to record and upload it

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
 &lt;title&gt;Upload file&lt;/title&gt;
 &lt;script src="/npm/[email protected]/dist/"&gt;&lt;/script&gt;
 &lt;script src="/axios/dist/"&gt;&lt;/script&gt;
 &lt;style&gt;
   
  {
   position: relative;
   -moz-opacity:0 ;
   filter:alpha(opacity: 0);
   opacity: 0;
   z-index: 2;
  } 
  .wrapper{
   color: #fff;
   background-color: #31b0d5;
   border-color: #269abc;
   margin-top: 5px;
   margin-bottom: 5px;
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
  }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div  v-cloak&gt;
  &lt;h4&gt;Upload videodemo&lt;/h4&gt;
  &lt;div&gt;
   &lt;span type="primary" class="wrapper"&gt;
    &lt;label class="btn" for="fileUpload"&gt;Upload videodemo&lt;/label&gt;
   &lt;/span&gt;
   &lt;input type="file" accept="video/*"  style="position:absolute; clip:rect(0 0 0 0);" @change="uploadVideo($event)"&gt;
  &lt;/div&gt;
 &lt;/div&gt;
 &lt;script&gt;
 var app = new Vue({
  el: '#app',
  data: {
  },
  methods: {
   uploadVideo(e) {
    //file name    var file = [0];
    var formdata = new FormData();
    ('fileStream', file);
    ('Uploading video...')
    (formdata);
   },
   doUpload(formdata) {
    ('/teacher/doUpload', formdata).then(res =&gt; {
     if () {
      ('Uploaded successfully');
     } else {
      ('Upload failed');
     }
    }).catch(err =&gt; {
     (err);
    })
   }
  }
 });
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Summarize

The above is the example code of Vue Yingshi camera live video introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!