WO2017084281A1 - 全景视频的显示方法和装置 - Google Patents

全景视频的显示方法和装置 Download PDF

Info

Publication number
WO2017084281A1
WO2017084281A1 PCT/CN2016/083150 CN2016083150W WO2017084281A1 WO 2017084281 A1 WO2017084281 A1 WO 2017084281A1 CN 2016083150 W CN2016083150 W CN 2016083150W WO 2017084281 A1 WO2017084281 A1 WO 2017084281A1
Authority
WO
WIPO (PCT)
Prior art keywords
video
panoramic video
sphere model
panoramic
server
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2016/083150
Other languages
English (en)
French (fr)
Inventor
杨可欣
王林虎
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Le Holdings Beijing Co Ltd
LeTV Information Technology Beijing Co Ltd
Original Assignee
Le Holdings Beijing Co Ltd
LeTV Information Technology Beijing Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Le Holdings Beijing Co Ltd, LeTV Information Technology Beijing Co Ltd filed Critical Le Holdings Beijing Co Ltd
Priority to US15/240,722 priority Critical patent/US20170142389A1/en
Publication of WO2017084281A1 publication Critical patent/WO2017084281A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/21—Server components or server architectures
    • H04N21/218—Source of audio or video content, e.g. local disk arrays
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85—Assembly of content; Generation of multimedia applications
    • H04N21/854—Content authoring
    • H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/21—Server components or server architectures
    • H04N21/218—Source of audio or video content, e.g. local disk arrays
    • H04N21/21805—Source of audio or video content, e.g. local disk arrays enabling multiple viewpoints, e.g. using a plurality of cameras
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/47202—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for requesting content on demand, e.g. video on demand
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/83—Generation or processing of protective or descriptive data associated with content; Content structuring
    • H04N21/835—Generation of protective data, e.g. certificates
    • H04N21/8355—Generation of protective data, e.g. certificates involving usage data, e.g. number of copies or viewings allowed
    • H04N21/83555—Generation of protective data, e.g. certificates involving usage data, e.g. number of copies or viewings allowed using a structured language for describing usage rules of the content, e.g. REL
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85—Assembly of content; Generation of multimedia applications
    • H04N21/858—Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot
    • H04N21/8586—Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot by using a URL

Definitions

  • the present invention belongs to the field of the Internet, and in particular, to a display method and apparatus for panoramic video.
  • the visible area of the video content is fixed due to the shooting reason (such as the angle of view and range of the camera lens), that is, the user can only view the current area, and the video picture follows the camera lens movement. And the change, the user lacks a sense of presence when watching, can not be immersed.
  • the shooting reason such as the angle of view and range of the camera lens
  • Panoramic video refers to a video with a 360-degree view.
  • the panoramic video has a better three-dimensional and realistic feel, which provides a good visual experience.
  • Flash 360-degree panoramic player written by ActionScript can realize panoramic video playback of web pages.
  • Flash animation-based features due to its Flash animation-based features, it is not available in browsers that do not support Flash or have Flash plug-ins installed, which limits the user's viewing of panoramic video.
  • the embodiments of the present invention provide a method and a device for displaying a panoramic video, which are used to solve the technical problem that the user cannot view the panoramic video in a browser that does not support Flash or does not have a Flash plug-in.
  • the present invention discloses a method for displaying a panoramic video, the method comprising: loading a panoramic video from a server through a video tag of Html5 in a play page; Mapping the panoramic video to an inner surface of a sphere model within the scene as a texture image of the sphere model, wherein the scene is created by a 3D engine, further comprising a camera object disposed inside the sphere model; A video image of an inner surface of the sphere model captured by the camera object at a current viewing angle is displayed in the play page.
  • the present invention also discloses a display device for panoramic video, the device comprising: a video loading module, configured to load a panoramic video from a server through a video tag of Html5 in a play page; an image mapping module An inner surface for mapping the panoramic video to a sphere model within the scene as a texture image of the sphere model, wherein the scene is created by a 3D engine, further comprising a camera disposed inside the sphere model a video display module, configured to display, in the play page, a video image of an inner surface of the sphere model captured by the camera object at a current viewing angle.
  • the present invention also discloses a display device for panoramic video, comprising: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to: in a play page, Loading a panoramic video from a server through a video tag of Html5; mapping the panoramic video to an inner surface of a sphere model within the scene as a texture image of the sphere model, wherein the scene is created by a 3D engine, further including a camera object disposed inside the sphere model; a video image of an inner surface of the sphere model captured by the camera object at a current angle of view is displayed in the play page.
  • the method and device for displaying panoramic video provided by the embodiment of the present invention loads the panoramic video from the server through the video tag of Html5 and completes the playback by using the browser's 3D engine, and views the panorama in the webpage through the browser.
  • video it is no longer limited to the way of Flash animation, and no need to install third-party plug-ins, so that panoramic video can be widely used in Internet video, which is convenient for Internet users to watch panoramic video.
  • FIG. 1 is a flowchart of a method for displaying a panoramic video according to an embodiment of the present invention
  • FIG. 2 is a flowchart of a method for displaying a panoramic video according to an embodiment of the present invention
  • FIG. 3 is a flowchart of a method for displaying a panoramic video according to an embodiment of the present invention
  • FIG. 4 is a block diagram of a display device for panoramic video according to an embodiment of the present invention.
  • FIG. 5 is a block diagram of a display device for panoramic video according to an embodiment of the present invention.
  • the video of Html5 (HTML5 is the core language of the World Wide Web, and the fifth major modification of a hypertext markup language under the standard universal markup language) is used.
  • the (video) tag loads the panoramic video captured by the panoramic camera from the server, and the 3D engine constructs a 3D scene, which includes a sphere and a camera object inside the sphere, and maps the panoramic video to the inner surface of the sphere as the sphere.
  • the texture image is displayed when the browser plays the panoramic video, and the video image captured by the camera object at the current viewing angle is displayed in the playback page.
  • a method for displaying a panoramic video is a method for displaying a panoramic video according to an embodiment of the present invention, which is applicable to a terminal device, which may be a mobile phone, a computer, a smart TV, a digital broadcast terminal, a messaging device, a game console, a car console, Tablet devices, medical equipment, fitness equipment, personal digital assistants, etc. As shown in FIG. 1, the method includes the following steps S10-S12.
  • step S10 in the play page, the panoramic video is loaded from the server through the video tag of Html5.
  • the video tag is a new element defined by HTML5 to specify the standard way. To insert video files into web pages without having to install any third-party plug-ins in your browser, for example, you don't need to install a third-party plug-in based on Flash: Adobe Flash Player.
  • the Video tag includes a source (scr) attribute whose value is the URL address of the panoramic video loaded by the page, for example:
  • the video tag may at least include the following attribute information.
  • the attribute "preload” means that the video is loaded when the page is loaded, and is ready to play. If the attribute "autoplay” appears at the same time, the attribute "preload” will be ignored.
  • the browser loads the video player in the page and loads the panoramic video from the server according to the URL address of the scr attribute.
  • the format of the panoramic video can be Ogg format, MPEG4 format or WebM format.
  • the Ogg format is an Ogg file with Thedora video encoding and Vorbis audio encoding
  • the MPEG4 format is an MPEG 4 file with H.264 video encoding and AAC audio encoding
  • the WebM format is with VP8 video encoding and Vorbis audio encoding. WebM file.
  • the panoramic video is separately transcoded into the above three formats on the server to adapt to different browsers, and the browser used by the terminal device is determined according to the user agent string in the request message from the terminal device, and the browser is used.
  • the video format that can be played is sent to the terminal device.
  • step S11 the panoramic video is mapped to the inner surface of the sphere model within the scene as a texture image of the sphere model, wherein the scene is created by the 3D engine, and further includes a camera object disposed inside the sphere model.
  • a 3D scene is built by a 3D engine running in a browser, for example, a 3D engine three.js.
  • Three.js is a third-party WebGL written in JavaScript. It is a 3D engine running in a browser.
  • the construction function of the perspective projection camera is as follows:
  • PerspectiveCamera (fov, aspect, near, far), set the four parameters are the horizon (fov), aspect ratio (aspect), near plane (near) and far plane (far).
  • the horizon is the angle of view of the camera object, which can be understood as the angle of the eye opening.
  • the image of the object located in the center of the screen is smaller.
  • the aspect ratio represents the aspect ratio of the camera object's captured picture, that is, the width divided by the height. The larger the value, the larger the picture width.
  • the near plane represents the closest distance the camera object can capture, and the far plane represents the farthest distance the camera object has captured.
  • the camera object has a field of view of 75 degrees, an aspect ratio of cw(camerawidth)/ch(cameraheigt), a near plane of 0.1, and a far plane of 1000.
  • a renderer is created in order to render the scene captured by the camera object.
  • the two commonly used renderers for three.js are WebGLRenderer and CanvasRenderer.
  • WebGLRenderer can get better visual effects and higher hardware requirements for terminal devices. Otherwise, the terminal device cannot support WebGLRenderer, but the terminal device that CanvasRenderer can support. More, its compatibility is stronger.
  • the code to create a renderer WebGLRenderer and add a Canvas tag to an element in the page is as follows:
  • the image of the video tag is set as the texture image of the inner surface of the sphere model.
  • Create a texture object for example, use the Texture class of three.js to create a texture object, and pass the video tag to the texture object as the rendered image.
  • the implementation code is as follows:
  • THREE.Texture is a texture constructor whose standard format is:
  • THREE.Texture function(image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy); wherein, the first parameter image is used to receive an image of the image type, or a video tag, and the parameter mapping represents The mapping mode, THREE.SphericalReflectionMapping in the above example represents the mapping of 3D sphere reflection; if other parameters are not set, the THREE.Texture constructor will be automatically filled with default values.
  • THREE.MeshBasicMaterial can be done with the following code:
  • THREE.SphereGeometry is the constructor of the sphere. Its standard format is THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength). Where radius is the radius; segmentsWidth is the number of slices in the longitude; segmentsHeight is the number of slices in the latitude; phiStart is the radians at the beginning of the longitude; phiLength is the radians across the longitude; thetaStart is the radians at the beginning of the latitude; and thetaLength is the latitude across the latitude radian. In the above example, the radius of the constructed sphere is 80, and the number of slices in longitude and the number of slices in latitude are both 64.
  • the process can be implemented with the following code:
  • Var sphere new THREE.Mesh(geometry,material);
  • the model consists of faces, which are divided into triangular faces and quadrilateral faces.
  • the triangular faces and quadrilateral faces form the mesh model.
  • the THREE.Mesh constructor is:
  • THREE.Mesh function(geometry,material);
  • the first parameter geometry is an object of type THREE.Geometry, which is an object containing the connection between vertices and vertices.
  • the second parameter, Material is the defined material. The material affects the effect of lighting and texture on the mesh.
  • the camera object is placed inside the sphere model, so that the camera object can capture the texture image of the inner surface of the sphere, that is, the panoramic image loaded by the video tag.
  • step S12 a video image of the inner surface of the sphere model captured by the camera object at the current angle of view is displayed in the play page.
  • requestAnimationFrame will collect all the Document Object Model (DOM) operations in each frame, complete in a redraw or reflow And the time interval for redrawing or reflowing closely follows the refresh rate of the browser. In general, this frequency is 60 frames per second; B. In hidden or invisible elements, requestAnimationFrame There will be no redrawing or reflow, which of course means less CPU, GPU and memory usage.
  • DOM Document Object Model
  • the NeedsUpdate property is used to inform the renderer that this frame needs to update the cache.
  • the picture to be displayed is different for each frame, so each frame needs to set the needsUpdate to true. Update the texture data cached in the graphics card.
  • the panoramic video is loaded from the server through the video tag of the Html5 and is played by the browser's 3D engine.
  • the browser's 3D engine When viewing the panoramic video in the webpage through the browser, it is no longer necessary to install a third-party plug-in to make the panoramic video on the Internet.
  • a wider range of applications are available in the video, making it easier for users to watch panoramic video.
  • the method for displaying the panoramic video further includes the following steps S13-S14.
  • step S13 a control operation of adjusting the angle of view is detected
  • step S14 the video image captured by the camera object at the adjusted angle of view is displayed.
  • the panoramic video is mapped to the inner surface of the sphere model.
  • the user In order to enable the user to view the 360-degree panoramic video through the browser page, the user needs to be allowed to adjust the viewing angle of the camera object in the scene by controlling operations, thereby realizing viewing the panoramic video from various angles.
  • the control operation can be an operation from a mouse or gesture.
  • the control action of the user to adjust the angle of view triggers corresponding system events, such as mouse clicks and movement events.
  • the user controls the adjustment of the viewing angle by monitoring the corresponding system event.
  • the lookAt method of the camera object is called to implement the adjustment of the angle of view, and then the video image under the adjusted perspective is rendered.
  • the corresponding implementation code is as follows:
  • the user can adjust the viewing direction and angle of the panoramic video at any time by using a mouse or a gesture operation, so that the user can view the various angles of the panoramic video in all directions.
  • step S10 is further implemented as the following steps S101-S102.
  • step S101 a panoramic video is requested from the server, and the cross-origin attribute of the video tag is set to be anonymous.
  • the CrossOrigin attribute is used to set Cross-Origin Resource Sharing (CORS). When set to anonymous, it means that cross-domain resource sharing is allowed.
  • CORS Cross-Origin Resource Sharing
  • step S102 the panoramic video returned by the server is received, wherein the http response header of the panoramic video includes the declaration information.
  • the server that saves the panoramic video also needs to declare which domains are allowed to share cross-domain resources.
  • the domain information that allows cross-domain resource sharing is recorded in the declaration information, such as Access-Control-Allow. -Origin.
  • This declaration information is included in the http response header returned by the server.
  • the claim information may be a list, and if the received claim information includes domain information of the domain in which the play page is located, the data of the panoramic video can be obtained from the server.
  • the declaration information of the http response header returned by the server is set to the wildcard "*", for example, Access-Control-Allow-Origin:*, which means that cross-domain resource requests from any domain are allowed.
  • cross-domain resource sharing for panoramic video resources is implemented, so that more websites and platforms can request to play panoramic video, increasing the audience of the panoramic video service, and enabling more networks.
  • the network user has the opportunity to experience the service, and at the same time, the server of the panoramic video service can provide users with richer content.
  • the angle of view of the camera object in the scene can be set as a fisheye lens, and the angle of view of the fisheye lens is large, which is suitable for shooting a wide range of scenes and scenes in close proximity.
  • the angle of view of the fisheye lens is 180 degrees to 220 degrees.
  • the fisheye lens can produce a very strong perspective when approaching the subject, giving the shot a powerful appeal.
  • the panoramic image of the inner surface of the sphere model taken by the fisheye lens captures a wider range of images and enhances the visual impact of the image.
  • the method for displaying a panoramic video is more suitable for a scene in which a live video is broadcasted.
  • a live video is captured by the panoramic camera.
  • the user can browse the live video image in the default view and can adjust the angle of view to view the live view from other perspectives by mouse or gesture operation. Users can view live scenes 360 degrees and experience more realistic live effects.
  • FIG. 4 is a display device of a panoramic video according to an embodiment of the present invention, the device includes:
  • the video loading module 20 is configured to load the panoramic video from the server through the video tag of the Html5 in the play page;
  • An image mapping module 21 configured to map the panoramic video to an inner surface of the sphere model in the scene as a texture image of the sphere model, wherein the scene is created by a 3D engine, and further includes a camera disposed inside the sphere model Object
  • the video display module 22 is configured to display, in the play page, a video image of an inner surface of the sphere model captured by the camera object at the current viewing angle.
  • the apparatus further includes:
  • the operation detecting module 23 is configured to detect a control operation for adjusting a viewing angle
  • the angle of view adjustment module 24 is configured to display a video image captured by the camera object under the adjusted viewing angle.
  • the video loading module 20 further includes:
  • a requesting submodule configured to request the panoramic video from a server, where a cross-origin attribute of the video tag is set to be anonymous;
  • a receiving submodule configured to receive the panoramic video returned by the server, where the http response header of the panoramic video includes claim information.
  • each of the foregoing functional modules may be implemented by a hardware processor.
  • An embodiment of the present invention provides a display device for a panoramic video, including:
  • a memory for storing processor executable instructions
  • processor is configured to:
  • the panoramic video is loaded from the server through the video tag of Html5;
  • a video image of an inner surface of the sphere model captured by the camera object at a current viewing angle is displayed in the play page.
  • the processor is further configured to:
  • a control operation for adjusting the viewing angle is detected
  • a video image captured by the camera object at the adjusted viewing angle is displayed.
  • loading the panoramic video from the server through the video tag of the Html5 in the play page includes:
  • the cross-origin attribute of the video tag is set to be anonymous
  • the claim information includes domain information of the play page, or the claim information is a wildcard representing data that allows any domain to request.
  • the angle of view of the camera object is set to the angle of view of the fisheye lens.
  • the fisheye lens has a viewing angle of 180 degrees to 220 degrees.
  • the panoramic video is a live video captured by a panoramic camera.
  • the device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separate, and the components displayed as units may or may not be physical units, ie may be located A place, or it can be distributed to multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the embodiment. Those of ordinary skill in the art can understand and implement without deliberate labor.
  • the method and device for displaying the panoramic video provided by the application loading the panoramic video from the server through the video tag of the Html5 and using the browser's 3D engine to complete the playback, and watching the panoramic video in the webpage through the browser is no longer limited to the Flash animation.

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Databases & Information Systems (AREA)
  • Computer Security & Cryptography (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

公开了一种全景视频的显示方法和装置，所述方法包括：在播放页面中，通过Html5的video标签从服务端加载全景视频；将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。通过浏览器观看网页中的全景视频时，不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为互联网用户观看全景视频提供了便利。

Description

全景视频的显示方法和装置
交叉引用
本申请引用于2015年11月18日递交的名称为“全景视频的显示方法和装置”的第201510794513.9号中国专利申请，其通过引用被全部并入本申请。
技术领域
本发明属于互联网领域，具体地说，涉及一种全景视频的显示方法和装置。
背景技术
传统网络视频在播放时，视频内容的可视区域因拍摄的原因(如：摄像机镜头的取景角度、范围)导致其固定不可调，即用户只能观看到当前的区域，视频画面跟随摄像机镜头移动而变化，用户观看时缺乏现场感，不能身临其境。
随着近些年全景视频的出现，给网络视频用户带来了全新的视觉体验，全景视频指的是一种具有360度视角的视频。全景视频具有更佳的立体感和真实感，能够很好地提供视觉体验。目前已经出现了通过动作脚本语言(ActionScript)编写的Flash 360度全景播放器可以实现web页面的全景视频播放。但由于其基于Flash动画的特点，使得在不支持Flash或者未安装Flash插件的浏览器中无法使用，给用户观看网络全景视频造成了局限。
发明内容
有鉴于此，本发明实施例提供了一种全景视频的显示方法和装置，用以解决现有技术中在不支持Flash或者未安装Flash插件的浏览器中用户无法观看全景视频的技术问题。
为了解决上述技术问题，本发明公开了一种全景视频的显示方法，所述方法包括：在播放页面中，通过Html5的video标签从服务端加载全景视频； 将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。
为了解决上述技术问题，本发明还公开了一种全景视频的显示装置，所述装置包括：视频加载模块，用于在播放页面中，通过Html5的video标签从服务端加载全景视频；图像映射模块，用于将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；视频显示模块，用于在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。
为了解决上述技术问题，本发明还公开了一种全景视频的显示装置，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：在播放页面中，通过Html5的video标签从服务端加载全景视频；将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。
与现有技术相比，本发明实施例提供的全景视频的显示方法和装置，通过Html5的video标签从服务端加载全景视频并利用浏览器的3D引擎完成播放，通过浏览器观看网页中的全景视频时，不再局限于Flash动画的方式，也不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为互联网用户观看全景视频提供了便利。
附图概述
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种全景视频的显示方法的流程图；
图2是本发明实施例提供的一种全景视频的显示方法的流程图；
图3是本发明实施例提供的一种全景视频的显示方法的流程图；
图4是本发明实施例提供的一种全景视频的显示装置的框图；
图5是本发明实施例提供的一种全景视频的显示装置的框图。
本申请的较佳实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例，在终端设备的浏览器打开的网络视频播放页面中，通过Html5(HTML5是万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改)的视频(video)标签从服务端加载全景摄像机拍摄的全景视频，3D引擎构建一个3D场景，该场景内包括一个球体和在球体内部的摄像机对象，将全景视频映射到球体的内表面做为该球体的纹理图像，浏览器播放该全景视频时，在播放页面中显示摄像机对象在当前视角下拍摄到的视频图像。通过浏览器观看网页中的全景视频时，不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为用户观看全景视频提供了便利。
图1是本发明实施例提供的一种全景视频的显示方法，适用于终端设备，终端设备可以是移动电话，计算机，智能电视，数字广播终端，消息收发设备，游戏控制台，车载控制台，平板设备，医疗设备，健身设备，个人数字助理等。如图1所示，该方法包括以下步骤S10-S12。
在步骤S10中，在播放页面中，通过Html5的video标签从服务端加载全景视频。
视频(video)标签是HTML5定义的一个新的元素用来指定标准的方式 来插入视频文件到web页面中，而不需要在浏览器安装任何第三方插件，例如，不需要安装基于Flash的第三方插件：Adobe Flash Player。
Video标签包括源(Source，简称scr)属性，该属性的值为页面加载的全景视频的URL地址，例如：
<video id＝"media"src＝"http://www.123456.com/test.mp4"controls width＝"400px"heigt＝"400px"></video>。
其中，src＝http://www.123456.com/test.mp4，代表该全景视频所在服务端上的URL地址。属性“control”的出现，代表在页面中显示一个视频控件，比如播放按钮，进度条等。“width”代表页面中视频播放器的宽度，“heigt”代表页面中视频播放器的高度。
此外，video标签至少还可能包括以下属性信息。
属性“autoplay”出现时，代表页面加载该视频就绪后马上播放。
属性“loop”出现时，代表当视频文件完成播放后再次开始播放。
属性“preload”代表视频在页面加载时进行加载，并预备播放，如果同时出现属性“autoplay”，属性“preload”将被忽略。
根据video标签中定义的上述各个属性，浏览器在页面中加载视频播放器并根据scr属性的URL地址从服务端加载全景视频。
全景视频的格式可以是Ogg格式，MPEG4格式或者WebM格式。其中，Ogg格式是带有Thedora视频编码和Vorbis音频编码的Ogg文件；MPEG4格式是带有H.264视频编码和AAC音频编码的MPEG 4文件；WebM格式是带有VP8视频编码和Vorbis音频编码的WebM文件。或者，在服务端将全景视频分别转码为以上三种格式，以适应不同浏览器，根据来自终端设备的请求报文中的用户代理字符串确定终端设备使用的浏览器，并将该浏览器能够播放的视频格式发送至终端设备。
在步骤S11中，将全景视频映射到场景内的球体模型的内表面做为球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在球体模型内部的摄像机对象。
通过运行在浏览器中的3D引擎构建出三维场景，例如，3D引擎three.js。 three.js是JavaScript编写的WebGL第三方库，是一款运行在浏览器中的3D引擎。
可以使用three.js的场景(Scene)类和透视投影相机(PerspectiveCamera)类来创建3D场景和该3D场景中的摄像机对象，例如：
this.scene＝new THREE.Scene()；
this.camera＝new THREE.PerspectiveCamera(75,cw/ch,0.1,1000)。
其中，透视投影相机的构造函数如下所示：
PerspectiveCamera(fov,aspect,near,far)，设置的四个参数分别为视界(fov)，纵横比(aspect)，近平面(near)和远平面(far)。其中，视界是指摄像机对象的视界角度，可以理解为类似眼睛睁开的角度，眼睛睁得越大，视线的范围越广，因此，视界值越大，摄像机对象拍摄的画面就越广阔，相应的，位于画面中央的物体的图像就越小。纵横比代表摄像机对象拍摄画面的纵横比，即宽度除以高度，这个值越大，说明画面宽度越大。近平面，代表摄像机对象能拍摄到的最近距离，远平面则代表摄像机对象拍摄到的最远距离。上例中，摄像机对象的视界为75度，纵横比为cw(camerawidth)/ch(cameraheigt)，近平面为0.1，远平面为1000。
在场景和摄像机对象创建完毕后，为了能够渲染出摄像机对象拍摄到的场景，还要创建一个渲染器。three.js常用的两个渲染器是WebGLRenderer和CanvasRenderer，使用WebGLRenderer能够得到更好的视觉效果，并且对终端设备的硬件条件要求更高，否则终端设备无法支持WebGLRenderer，而采用CanvasRenderer能够支持的终端设备更多，其兼容性更强。例如，创建渲染器WebGLRenderer并将Canvas标签添加到页面中的元素的代码如下：
this.renderer＝window.WebGLRenderingContext？new THREE.WebGLRenderer():new THREE.CanvasRenderer()；
this.renderer.setSize(cw,ch)；
this.canvas＝vjs(this.renderer.domElement)；
this.playerCon[0].appendChild(this.canvas[0])。
接下来，将video标签的图像设置为球体模型内表面的纹理图像。首先， 创建纹理对象，例如，利用three.js的Texture类创建纹理对象，并将video标签传递至该纹理对象做为被渲染的图像，实现的代码如下：
this.textureReflection＝newTHREE.Texture(this.video,THREE.SphericalRefl ectionMapping)。
THREE.Texture是一种纹理构造函数，其标准格式是：
THREE.Texture＝function(image,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)；其中，第一个参数image，用于接收一个image类型的图像，或者是video标签，参数mapping代表映射模式，上例中的THREE.SphericalReflectionMapping代表三维球体反射的映射方式；如果对其他参数不进行设置，THREE.Texture构造函数会以默认值自动填充。
然后再创建材质对象，将纹理图像传递给材质对象。例如，将纹理传递给THREE.MeshBasicMaterial可通过以下代码实现：
var material＝new THREE.MeshBasicMaterial({
map:this.textureReflection,
side:THREE.BackSide
})。
接下来，在场景中创建球体模型，并设置球体模型在场景中的坐标。首先创建球体，例如：
var geometry＝new THREE.SphereGeometry(80,64,64)；
THREE.SphereGeometry是球体的构造函数，其标准格式为THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart,phiLength,thetaStart,thetaLength)。其中，radius是半径；segmentsWidth表示经度上的切片数；segmentsHeight表示纬度上的切片数；phiStart表示经度开始的弧度；phiLength表示经度跨过的弧度；thetaStart表示纬度开始的弧度；thetaLength表示纬度跨过的弧度。在上例中，构造的球体的半径是80，经度上的切片数和纬度上的切片数都是64。
然后，为上述球体创建相应的模型，设置该球体模型在场景中的坐标，并将该球体模型添加到场景中。例如，该过程可以通过以下代码实现：
var sphere＝new THREE.Mesh(geometry,material)；
sphere.position.x＝0；
sphere.position.y＝0；
sphere.position.z＝0；
sphere.rotation.x＝Math.PI；
this.scene.add(sphere)。
模型由面组成，面分为三角形面和四边形面，三角形面和四边形面组成了网格(Mesh)模型。在Three.js中用THREE.Mesh来表示网格模型。
THREE.Mesh构造函数是：
THREE.Mesh＝function(geometry,material)；其中第一个参数geometry是一个THREE.Geometry类型的对象，他是一个包含顶点和顶点之间连接关系的对象。第二个参数Material就是定义的材质，材质会影响光照、纹理对网格的作用效果。
在构建的场景中，摄像机对象设置在球体模型的内部，使摄像机对象能够拍摄到球体内表面的纹理图像，即通过video标签加载的全景图像。
在步骤S12中，在播放页面中显示摄像机对象在当前视角下拍摄到的球体模型的内表面的视频图像。
加载的全景视频开始自动播放或者用户通过控件触发播放时，开始对摄像机对象拍摄到的球体模型的内表面的视频图像进行渲染。在Three.js中，可以对加载全景图像逐帧进行渲染，通常，我们会利用setTimeout或setInterval这两个函数或者层叠样式表(Cascading StyleSheet，css)3来实现。但是，css3动画存在一些局限性，比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等，而setTimeout和setInterval有着严重的性能问题。因此，使用requestAnimationFrame函数来实现逐帧渲染，它的优势包括：A、requestAnimationFrame会把每一帧中的所有文档对象模型(Document Object Model，DOM)操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧；B、在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的CPU，GPU和内存使用量。
例如，利用requestAnimationFrame函数进行逐帧渲染，同时，将纹理对象的needsUpdate属性设置为true即可，相应的代码如下：
this.renderer.render(this.scene,this.camera)；
requestAnimationFrame(this.animate)；
this.textureReflection.needsUpdate＝true。
NeedsUpdate属性用于通知渲染器这一帧需要更新缓存，对于视频纹理来说，因为视频是一个图片流，每一帧要显示的画面都不一样，所以每一帧都需要将needsUpdate设为true来更新显卡中缓存的纹理数据。
本实施例中，通过Html5的video标签从服务端加载全景视频并利用浏览器的3D引擎完成播放，通过浏览器观看网页中的全景视频时，不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为用户观看全景视频提供了便利。
在一个实施例中，如图2所示，该全景视频的显示方法进一步包括以下步骤S13-S14。
在步骤S13中，检测到调整视角的控制操作；
在步骤S14中，显示摄像机对象在调整后的视角下拍摄到的视频图像。
全景视频被映射到了球体模型的内表面，为了使用户能够通过浏览器页面观看360度全景视频，需要允许用户通过控制操作来调整场景中摄像机对象的视角，实现从各种角度观看全景视频，该控制操作可以是来自鼠标或者手势的操作。
用户调整视角的控制操作会触发相应的系统事件，例如鼠标的点击和移动事件。通过监听相应的系统事件来检测到用户调整视角的控制操作。例如，在Three.js中，调用摄像机对象的lookAt方法实现视角的调整，然后对调整后的视角下的视频图像进行渲染，相应的实现代码如下：
this.cameraTarget.x＝1*Math.sin(phi)*Math.cos(theta)；
this.cameraTarget.y＝1*Math.cos(phi)；
this.cameraTarget.z＝1*Math.sin(phi)*Math.sin(theta)；
this.camera.position.copy(this.cameraTarget).negate()；
this.camera.lookAt(this.cameraTarget)。
本实施例中，浏览器页面显示全景视频后，用户可通过鼠标或者手势操作来随时调整全景视频的观看方向和角度，使用户能够全方位的观看到全景视频的各个角度的画面。
在一个实施例中，全景视频与播放页面之间会存在跨域问题。跨域问题是指由于JavaScript同源策略的限制，a.com域名下的js脚本无法操作b.com或是c.a.com域名下的对象，即使同一域名下的不同端口，不同协议或者不同子域也不允许数据通信。如果加载全景视频的URL地址与浏览器所访问页面的URL地址存在以上的跨域问题，如图3所示，步骤S10进一步实施为以下步骤S101-S102。
在步骤S101中，向服务端请求全景视频，video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)。
CrossOrigin属性用来对跨域资源共享(Cross-Origin Resource Sharing，CORS)进行设置，设置为匿名时，代表允许跨域资源共享。
在步骤S102中，接收到服务端返回的全景视频，其中，全景视频的http响应头包括声明信息。
若需要实现跨域资源共享，保存全景视频的服务端也需要声明允许与哪些域之间实现跨域资源共享，将允许跨域资源共享的域信息记录在声明信息中，例如Access-Control-Allow-Origin。
在服务端返回的http响应头中包括该声明信息。声明信息可以是一个列表，如果接收到的声明信息包括播放页面所在域的域信息，则能够从服务端获取到全景视频的数据。在一些情况下，服务端返回的http响应头的声明信息被设置为通配符“*”，例如，Access-Control-Allow-Origin：*，则代表允许来自任何域的跨域资源请求。
本实施例中，实现了针对全景视频资源的跨域资源共享，使更多网站和平台都能够请求播放全景视频，增加了全景视频业务的受众群体，使更多网 络用户能有机会体验到该业务，同时，也使全景视频业务的服务端能够为用户提供更丰富的内容。
在一个实施例中，场景中的摄像机对象的视角可以被设置为鱼眼镜头，鱼眼镜头视角范围大，适合近距离拍摄大范围景物和场景，在本实施例中，鱼眼镜头的视角为180度至220度。鱼眼镜头在接近被摄物拍摄时能造成非常强烈的透视效果，使所摄画面具有一种震撼人心的感染力。通过鱼眼镜头拍摄的球体模型内表面的全景图像，拍摄到的图像范围更广并且增强了图像的视觉冲击力。
本发明实施例提供的全景视频的显示方法，更适合用于网络视频直播的场景，例如，对会议、联欢会、演唱会、大型仪式等进行现场直播时，通过全景摄像装置拍摄现场画面，将现场画面加载到网络直播页面后，用户可以浏览到默认视角下的现场视频图像并且可以通过鼠标或者手势操作来调整视角从其他视角观看现场画面。用户能够360度的浏览现场画面并体验到更逼真的现场效果。
以下为本发明的装置实施例，用以执行本发明实施例的上述方法。
图4是本发明实施例提供的一种全景视频的显示装置，该装置包括：
视频加载模块20，用于在播放页面中，通过Html5的video标签从服务端加载全景视频；
图像映射模块21，用于将全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；
视频显示模块22，用于在播放页面中显示摄像机对象在当前视角下拍摄到的球体模型的内表面的视频图像。
在一个实施例中，如图5所示，该装置还包括：
操作检测模块23，用于检测到调整视角的控制操作；
视角调整模块24，用于显示摄像机对象在调整后的视角下拍摄到的视频图像。
在一个实施例中，该视频加载模块20进一步包括：
请求子模块，用于向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；
接收子模块，用于接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。
此外，本发明实施例中可以通过硬件处理器(hardware processor)来实现上述各个功能模块。
本发明实施例提供了一种全景视频的显示装置，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为：
在播放页面中，通过Html5的video标签从服务端加载全景视频；
将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；
在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。
在一个实施例中，所述处理器进一步被配置为：
检测到调整所述视角的控制操作；
显示所述摄像机对象在所述调整后的视角下拍摄到的视频图像。
当所述全景视频与播放页面之间存在跨域问题时，所述在播放页面中，通过Html5的video标签从服务端加载全景视频包括：
向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；
接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。
所述声明信息包括所述播放页面的域信息，或者，所述声明信息是代表允许任何域请求数据的通配符。
所述摄像机对象的视角被设置为鱼眼镜头视角。
所述鱼眼镜头视角为180度至220度。
所述全景视频是由全景摄像装置拍摄的直播视频。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务端，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
工业实用性
本申请提供的全景视频的显示方法和装置，通过Html5的video标签从服务端加载全景视频并利用浏览器的3D引擎完成播放，通过浏览器观看网页中的全景视频时，不再局限于Flash动画的方式，也不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为互联网用户观看全景视频提供了便利。

Claims (11)

  1. 一种全景视频的显示方法，其特征在于，所述方法包括：
    在播放页面中，通过Html5的video标签从服务端加载全景视频；
    将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；
    在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。
  2. 根据权利要求1所述的方法，其特征在于，所述方法还包括：
    检测到调整所述视角的控制操作；
    显示所述摄像机对象在所述调整后的视角下拍摄到的视频图像。
  3. 根据权利要求1所述的方法，其特征在于，当所述全景视频与播放页面之间存在跨域问题时，所述在播放页面中，通过Html5的video标签从服务端加载全景视频包括：
    向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；
    接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。
  4. 根据权利要求3所述的方法，其特征在于，所述声明信息包括所述播放页面的域信息，或者，所述声明信息是代表允许任何域请求数据的通配符。
  5. 根据权利要求1所述的方法，其特征在于，所述摄像机对象的视角被设置为鱼眼镜头视角。
  6. 根据权利要求5所述的方法，其特征在于，所述鱼眼镜头视角为180度至220度。
  7. 根据权利要求1所述的方法，其特征在于，所述全景视频是由全景摄像装置拍摄的直播视频。
  8. 一种全景视频的显示装置，其特征在于，所述装置包括：
    视频加载模块，用于在播放页面中，通过Html5的video标签从服务端加载全景视频；
    图像映射模块，用于将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；
    视频显示模块，用于在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。
  9. 根据权利要求8所述的装置，其特征在于，所述装置还包括：
    操作检测模块，用于检测到调整所述视角的控制操作；
    视角调整模块，用于显示所述摄像机对象在所述调整后的视角下拍摄到的视频图像。
  10. 根据权利要求8所述的装置，其特征在于，所述视频加载模块包括：
    请求子模块，用于向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；
    接收子模块，用于接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。
  11. 一种全景视频的显示装置，其特征在于，包括：
    处理器；
    用于存储处理器可执行指令的存储器；
    其中，所述处理器被配置为：
    在播放页面中，通过Html5的video标签从服务端加载全景视频；
    将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；
    在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。
PCT/CN2016/083150 2015-11-18 2016-05-24 全景视频的显示方法和装置 Ceased WO2017084281A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US15/240,722 US20170142389A1 (en) 2015-11-18 2016-08-18 Method and device for displaying panoramic videos

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201510794513.9 2015-11-18
CN201510794513.9A CN105898337A (zh) 2015-11-18 2015-11-18 全景视频的显示方法和装置

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US15/240,722 Continuation US20170142389A1 (en) 2015-11-18 2016-08-18 Method and device for displaying panoramic videos

Publications (1)

Publication Number Publication Date
WO2017084281A1 true WO2017084281A1 (zh) 2017-05-26

Family

ID=57002812

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2016/083150 Ceased WO2017084281A1 (zh) 2015-11-18 2016-05-24 全景视频的显示方法和装置

Country Status (2)

Country Link
CN (1) CN105898337A (zh)
WO (1) WO2017084281A1 (zh)

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108681987A (zh) * 2018-05-10 2018-10-19 广州腾讯科技有限公司 生成全景切片图的方法和装置
CN109741431A (zh) * 2018-12-31 2019-05-10 航天精一(广东)信息科技有限公司 一种二三维一体化电子地图框架
CN110458929A (zh) * 2019-08-12 2019-11-15 西安建筑科技大学 一种基于Three.js的室内布景渲染方法及系统
CN112596655A (zh) * 2020-12-28 2021-04-02 深圳壹账通创配科技有限公司 全景图展示及操作方法、装置、计算机设备及存储介质
CN113194326A (zh) * 2021-04-28 2021-07-30 平安国际智慧城市科技股份有限公司 全景直播方法、装置、计算机设备及计算机可读存储介质
CN113608713A (zh) * 2021-07-30 2021-11-05 Oppo广东移动通信有限公司 变频显示方法、ddic、显示屏模组及终端
CN114283233A (zh) * 2021-12-29 2022-04-05 弘成科技发展有限公司 一种在3d环境中纹理表面播放视频的实现方法
CN114374869A (zh) * 2022-01-05 2022-04-19 烽火通信科技股份有限公司 一种全景视频播放方法、装置及计算机存储介质
CN118488314A (zh) * 2024-07-12 2024-08-13 深圳市卓锐通电子有限公司 一种全景摄像头图像处理系统及方法

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP7017045B2 (ja) * 2016-09-30 2022-02-08 株式会社リコー 通信端末、表示方法、及びプログラム
CN108235143B (zh) * 2016-12-15 2020-07-07 广州市动景计算机科技有限公司 视频播放模式转换方法、装置及移动终端
CN106600676A (zh) * 2016-12-20 2017-04-26 飞狐信息技术（天津）有限公司 在三维虚拟场景中使用曲面播放3d视频的方法、装置及手机
CN106658212A (zh) * 2017-01-20 2017-05-10 北京红马传媒文化发展有限公司 一种基于html5的vr在线播放方法、系统及播放器
CN107045730B (zh) * 2017-03-06 2023-10-24 青岛鹏海软件有限公司 一种数字文化场景或图像的多维展现系统和方法
CN107040792A (zh) * 2017-05-05 2017-08-11 暴风集团股份有限公司 全景视频播放方法、全景视频播放装置及播放器
CN108965929B (zh) * 2017-05-23 2021-10-15 华为技术有限公司 一种视频信息的呈现方法、呈现视频信息的客户端和装置
CN107376360B (zh) * 2017-06-19 2021-01-01 深圳市铂岩科技有限公司 游戏直播方法及游戏直播系统
CN107241653A (zh) * 2017-08-03 2017-10-10 湖南全晰科技有限公司 一种在全景视频中可视化动态添加热点的技术方法
CN108470037A (zh) * 2018-02-07 2018-08-31 链家网（北京）科技有限公司 一种多维度的三维场景展示方法及装置
CN110109552B (zh) * 2019-05-23 2020-06-05 重庆大学 基于真实环境的虚拟驾驶场景建模方法
CN110097799B (zh) * 2019-05-23 2020-12-11 重庆大学 基于真实场景建模的虚拟驾驶系统
CN110188689B (zh) * 2019-05-30 2022-11-29 重庆大学 基于真实场景建模的虚拟驾驶目标碰撞检测方法
CN112073675A (zh) * 2020-09-17 2020-12-11 中邮科通信技术股份有限公司 一种基于浏览器的全景视频会议的系统及其工作方法
CN112242002B (zh) * 2020-10-09 2022-07-08 同济大学 基于深度学习的物体识别和全景漫游方法
CN112533002A (zh) * 2020-11-17 2021-03-19 南京邮电大学 一种用于vr全景直播的动态图像融合方法及系统
CN112702522B (zh) * 2020-12-25 2022-07-12 李灯 一种基于vr直播系统的自适应控制播放方法
CN113132708B (zh) * 2021-04-22 2022-02-22 贝壳找房(北京)科技有限公司 利用鱼眼相机获取三维场景图像的方法和装置、设备和介质
CN114245228B (zh) * 2021-11-08 2024-06-11 阿里巴巴（中国）有限公司 页面链接投放方法、装置及电子设备
CN114285994A (zh) * 2021-12-21 2022-04-05 众信方智(苏州)智能技术有限公司 基于全景工作空间显示设备信息的方法、装置及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6559846B1 (en) * 2000-07-07 2003-05-06 Microsoft Corporation System and process for viewing panoramic video
CN101458824A (zh) * 2009-01-08 2009-06-17 浙江大学 一种基于web的全景图的光照渲染方法
CN103020340A (zh) * 2012-11-29 2013-04-03 上海量维信息科技有限公司 基于web的3D家居设计系统
CN103426202A (zh) * 2013-07-24 2013-12-04 江苏物联网络科技发展有限公司 三维全景互动移动终端展示系统及展示方法
WO2014135022A1 (zh) * 2013-03-04 2014-09-12 腾讯科技（深圳）有限公司 街景地图展现方法及系统
CN104517001A (zh) * 2014-02-27 2015-04-15 绿地控股集团有限公司 一种基于浏览器的用于展示待建成建筑信息的方法

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101325797B (zh) * 2007-06-15 2012-12-12 华为技术有限公司 Iptv业务选择信息获取方法和功能实体
US20100231687A1 (en) * 2009-03-16 2010-09-16 Chase Real Estate Services Corporation System and method for capturing, combining and displaying 360-degree "panoramic" or "spherical" digital pictures, images and/or videos, along with traditional directional digital images and videos of a site, including a site audit, or a location, building complex, room, object or event
CN101561988B (zh) * 2009-05-20 2012-06-27 北京水晶石数字科技股份有限公司 一种全景图展示方法
CN101852980B (zh) * 2010-06-09 2011-10-05 长春理工大学 一种在cave投影系统上交互式播放全景视频流的方法
CN104867175A (zh) * 2015-06-02 2015-08-26 孟君乐 一种虚拟效果图实景展示装置及其实现方法

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6559846B1 (en) * 2000-07-07 2003-05-06 Microsoft Corporation System and process for viewing panoramic video
CN101458824A (zh) * 2009-01-08 2009-06-17 浙江大学 一种基于web的全景图的光照渲染方法
CN103020340A (zh) * 2012-11-29 2013-04-03 上海量维信息科技有限公司 基于web的3D家居设计系统
WO2014135022A1 (zh) * 2013-03-04 2014-09-12 腾讯科技（深圳）有限公司 街景地图展现方法及系统
CN103426202A (zh) * 2013-07-24 2013-12-04 江苏物联网络科技发展有限公司 三维全景互动移动终端展示系统及展示方法
CN104517001A (zh) * 2014-02-27 2015-04-15 绿地控股集团有限公司 一种基于浏览器的用于展示待建成建筑信息的方法

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108681987A (zh) * 2018-05-10 2018-10-19 广州腾讯科技有限公司 生成全景切片图的方法和装置
CN109741431A (zh) * 2018-12-31 2019-05-10 航天精一(广东)信息科技有限公司 一种二三维一体化电子地图框架
CN110458929A (zh) * 2019-08-12 2019-11-15 西安建筑科技大学 一种基于Three.js的室内布景渲染方法及系统
CN110458929B (zh) * 2019-08-12 2022-10-11 西安建筑科技大学 一种基于Three.js的室内布景渲染方法及系统
CN112596655A (zh) * 2020-12-28 2021-04-02 深圳壹账通创配科技有限公司 全景图展示及操作方法、装置、计算机设备及存储介质
CN113194326A (zh) * 2021-04-28 2021-07-30 平安国际智慧城市科技股份有限公司 全景直播方法、装置、计算机设备及计算机可读存储介质
CN113608713A (zh) * 2021-07-30 2021-11-05 Oppo广东移动通信有限公司 变频显示方法、ddic、显示屏模组及终端
CN113608713B (zh) * 2021-07-30 2023-09-26 Oppo广东移动通信有限公司 变频显示方法、ddic、显示屏模组及终端
CN114283233A (zh) * 2021-12-29 2022-04-05 弘成科技发展有限公司 一种在3d环境中纹理表面播放视频的实现方法
CN114374869A (zh) * 2022-01-05 2022-04-19 烽火通信科技股份有限公司 一种全景视频播放方法、装置及计算机存储介质
CN114374869B (zh) * 2022-01-05 2023-05-23 烽火通信科技股份有限公司 一种全景视频播放方法、装置及计算机存储介质
CN118488314A (zh) * 2024-07-12 2024-08-13 深圳市卓锐通电子有限公司 一种全景摄像头图像处理系统及方法

Also Published As

Publication number Publication date
CN105898337A (zh) 2016-08-24

Similar Documents

Publication Publication Date Title
WO2017084281A1 (zh) 全景视频的显示方法和装置
US20170142389A1 (en) Method and device for displaying panoramic videos
US11303881B2 (en) Method and client for playing back panoramic video
CN107835436B (zh) 一种基于WebGL的实时虚实融合直播系统及方法
US10909761B1 (en) 2D video with option for projected viewing in modeled 3D space
CN109327727B (zh) 一种WebRTC中的直播流处理方法及推流客户端
US20140087877A1 (en) Compositing interactive video game graphics with pre-recorded background video content
CN112312111A (zh) 虚拟图像的显示方法、装置、电子设备及存储介质
CN106231205B (zh) 增强现实移动终端
WO2017193576A1 (zh) 一种视频分辨率的适应方法、装置及虚拟现实终端
KR20190008325A (ko) 가상 현실 미디어 콘텐트의 적응적 스트리밍을 위한 방법, 디바이스, 및 컴퓨터 프로그램
WO2018059034A1 (zh) 一种全景视频播放方法及装置
EP3646284A1 (en) Screen sharing for display in vr
JP7447266B2 (ja) ボリュメトリック画像データに関するビューの符号化及び復号
JP7769818B2 (ja) エスエフエックスビデオの決定方法、装置、電子機器及び記憶媒体
CN114245228B (zh) 页面链接投放方法、装置及电子设备
US20130120371A1 (en) Interactive Communication Virtual Space
WO2023207516A1 (zh) 直播视频处理方法、装置、电子设备及存储介质
WO2021088973A1 (zh) 直播流显示方法、装置、电子设备及可读存储介质
CN118413745A (zh) 一种播放全景视频的方法、装置、设备及存储介质
CN107493503A (zh) 播放终端的虚拟现实视频呈像方法、系统及存储介质
US11483492B2 (en) Immersive video experience including rotation
CN107948759B (zh) 一种业务对象的交互方法和装置
CN116684540A (zh) 一种用于呈现增强现实数据的方法、设备及介质
CN110662099A (zh) 用于显示弹幕的方法和装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 16865463

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 16865463

Country of ref document: EP

Kind code of ref document: A1