首页 > 其他分享 >web播放本地流视频

web播放本地流视频

时间:2023-08-18 12:01:14浏览次数:32  
标签:web stream 视频 error video getUserMedia navigator 播放

<template>
  <div>
    <div class="video">
      <video></video>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.playVideo()
  },
  methods: {
    playVideo() {
      navigator.getUserMedia =
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia

      // 只获取video:
      var constraints = { audio: false, video: true }
      var video = document.querySelector('video')

      function successCallback(stream) {
        // Note: make the returned stream available to console for inspection
        window.stream = stream

        if (window.URL) {
          // Chrome浏览器
          video.srcObject = stream
        } else {
          // Firefox和Opera: 可以直接把视频源设置为stream
          video.src = stream
        }
        // 播放
        video.play()
      }

      function errorCallback(error) {
        console.log('navigator.getUserMedia error: ', error)
      }

      navigator.getUserMedia(constraints, successCallback, errorCallback)
    },
  },
}
</script>

<style lang="scss" scoped></style>

 

标签:web,stream,视频,error,video,getUserMedia,navigator,播放
From: https://www.cnblogs.com/sclweb/p/17640126.html

相关文章

  • 音视频FAQ(三):音画不同步
    摘要本文介绍了音画不同步问题的五个因素:编码和封装阶段、网络传输阶段、播放器中的处理阶段、源内容产生的问题以及转码和编辑。针对这些因素,提出了相应的解决方案,如使用标准化工具、选择强大的传输协议、自适应缓冲等。此外,介绍了第三方音视频服务商如即构的解决方案,包括优化的......
  • 优化视频流:利用美颜SDK提升直播质量的方法
    随着互联网的迅猛发展,视频直播已成为人们分享、交流和娱乐的重要方式。然而,在实际的直播过程中,视频画质可能受到诸多因素的影响,例如摄像头品质、网络状况等。为了提升观众的体验和吸引更多的观众,美颜技术逐渐成为了直播平台不可或缺的一部分。本文将探讨如何利用美颜SDK来优化视频......
  • 直播系统源码协议探索篇(二):网络套接字协议WebSocket
     上一篇我们分析了直播平台的会话初始化协议SIP,他关乎着直播平台的实时通信和多方互动技术的实现,今天我们来讲另一个协议,叫网络套接字协议WebSocket,WebSocket基于TCP在客户端与服务器建立双向通信的网络协议,并且可以通过单个长连接实现。在直播系统源码平台已经成为人们获取知识......
  • 直播系统源码协议探索篇(二):网络套接字协议WebSocket
    上一篇我们分析了直播平台的会话初始化协议SIP,他关乎着直播平台的实时通信和多方互动技术的实现,今天我们来讲另一个协议,叫网络套接字协议WebSocket,WebSocket基于TCP在客户端与服务器建立双向通信的网络协议,并且可以通过单个长连接实现。在直播系统源码平台已经成为人们获取知识、放......
  • 【Web开发指南】MyEclipse XML编辑器的高级功能简介
    1.在MyEclipse中编辑XML本文档介绍MyEclipse XML编辑器中的一些可用的函数,MyEclipse XML编辑器包括高级XML编辑,例如:语法高亮显示标签和属性内容辅助实时验证(当您输入时)文档内容的源(Source)视图、设计(Design)视图和大纲(Outline)视图文档格式内容辅助模板2.编辑模式使用MyEclipse......
  • 【Web开发指南】MyEclipse XML编辑器的高级功能简介
    MyEclipsev2023.1.2离线版下载1.在MyEclipse中编辑XML本文档介绍MyEclipse XML编辑器中的一些可用的函数,MyEclipse XML编辑器包括高级XML编辑,例如:语法高亮显示标签和属性内容辅助实时验证(当您输入时)文档内容的源(Source)视图、设计(Design)视图和大纲(Outline)视图文档格......
  • 树莓派连接蓝牙遥控,控制播放音乐
    采用的树莓派zerow,根据按键切换音乐#!/usr/bin/envpython#-*-coding:utf-8-*-#[NEW]DeviceEC:22:05:15:24:0DRMT-EC220515240Dimporttimefrombluepy.btleimport*frombinasciiimporthexlifyimportstructfromMusicimport*classNotifyDelegate(De......
  • QtWebChannel和JavaScript进行通信(简单理解)
    说明在使用Qt(C++)和JavaScript之间实现通信时,通常会使用一些模块和技术来使两者能够交互和传递数据。这种通信通常用于在Qt应用程序中嵌入Web内容,或者在Web页面中嵌入Qt应用程序。以下是一些常用的模块和技术,以及它们的作用QtWebEngine模块:作用:QtWebEngine是Qt中的Web引擎,允......
  • OpenCV3.2图像分割 实例10:绿幕视频背景替换
    1#include<opencv2/opencv.hpp>2#include<iostream>34usingnamespacecv;5usingnamespacestd;67Matreplace_and_blend(Mat&frame,Mat&mask);8Matbackground_01;//背景19Matbackground_02;//背景210intma......
  • 第六章、web前端架构师
    目录十二、通用上传组件开发以及使用1、导学2、上传组件需求以及开发流程十二、通用上传组件开发以及使用1、导学*开发通用上传组件-通过TDD的方式,开发一个通用上传组件,然后将组件添加到编辑器中进行使用,从这个过程中衍生出很多的相关知识点*主要内容-模......