Web
RTC (Web Real Time Communication) là tập hợp các tiêu chuẩn và giao thức cho phép các trình lưu ý Web triển khai trực tiếp các tính năng truyền thông media đa phương tiện thời hạn thực như gọi điện, tin nhắn hình, truyền tài liệu bằng các API Java
Script.

I. Giới Thiệu

*

Web
RTC là gì ?

Web
RTC (Web Real Time Communication) là tập hợp các tiêu chuẩn chỉnh và giao thức cho phép các trình để ý Web thực hiện trực tiếp những tính năng truyền thông media đa phương tiện thời hạn thực như điện thoại tư vấn điện, tin nhắn hình, truyền tài liệu bằng những API Java
Script.

Bạn đang xem: Url.createobjecturl là gì

Lịch sử Web
RTC

Ý tưởng về Web
RTC được gửi ra bởi nhóm cách tân và phát triển Google Hangouts từ năm 2009. Tại thời gian đó, nhằm thực hiện truyền thông media đa phương tiện trên nền Web, người sử dụng phải cài đặt Flash và các plugin khác. Năm 2010, Google thâu tóm về hai doanh nghiệp là On2 cùng Global IP Solutions (GIPS). Tiếp đến họ gửi các công nghệ liên quan mang lại RTC của hai doanh nghiệp này thành mã nguồn mở cùng kết hợp với IETF và W3C để lấy ra Web
RTC vào năm 2011.

Ưu điểm
Điểm đột phá của Web
RTC là ta hoàn toàn có thể tham gia cuộc hội thoại tức thì trên trình cẩn thận mà không phải cài thêm bất cứ một trong những phần mềm giỏi plugin làm sao khác, được hỗ trợ bởi những trình chú tâm Google Chrome, Mozilla Firefox và Opera trên PC cùng Android.

*

Web
RTC bao gồm thể hoạt động trên bất cứ thiết bị nào gồm cài một trong những trình duyệt cung cấp Web
RTC.Đối với bên phát triển, với Web
RTC vớ cả công việc để tạo ra một cuộc hội thoại chỉ bên trong vài chục dòng lệnh. Việc cải tiến và phát triển ứng dụng với công dụng gọi điện, đoạn clip chat và chia sẻ file,.. Là rất đơn giản dễ dàng khi sử dụng Web
RTC phối kết hợp giữa Java
Script và HTML5.Đối với người tiêu dùng cuối chỉ cần thông qua trình coi sóc Web. Ví dụ, hai fan dùng chỉ cần truy cập vào thuộc một đường dẫn web để gọi đoạn clip với nhau thực hiện trình lưu ý Google Chrome tốt Mozilla Firefox.

II. Bí quyết sử dụng như thế nào?

Web
RTC cung cấp 3 API Java
Script :

Get
User
Media: có thể chấp nhận được trình duyệt truy vấn vào camera cùng microphone nhằm thu dữ liệu
RTCPeer
Connection: tạo thành và truyền dữ liệu cho cuộc call audio/video
RTCData
Channels: kênh truyền dữ liệu ngẫu nhiên cho text, gaming,…

Để viết một áp dụng Web
RTC ta áp dụng 3 API này để mang được dữ liệu từ camera, microphone, cấu hình thiết lập phiên truyền thông media và truyền tải tài liệu audio, video clip cũng như dữ liệu bất kỳ. Ngoại trừ ra, bước đặc trưng là thông báo cho phiên truyền thông được thực hiện bên ngoài Web
RTC bởi một thủ tục do bạn lập trình lựa chọn.

Sau đó là 1 vài ba demo:

1. Truy vấn sử dụng webcam bởi Web
RTC get
User
Media

STEP 1: Create index.html

User
Mediatitle> link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css"> links rel="stylesheet" href="https://webrtc.cachseo.com.io/samples/src/css/main.css"> script src="https://webrtc.cachseo.com.io/adapter/adapter-latest.js">script>head>body>div id="container"> h1> a href="#" title="Web
RTC samples homepage">Web
RTC samplesa> span>get
User
Mediaspan>h1> video id="gum-local" autoplay playsinline>video> button id="show
Video">Open camerabutton> div id="error
Msg">div> p. Class="warning">strong>Warning:strong> if you"re not using headphones, pressing play will cause feedback.p> p>Display the đoạn phim stream from code>get
User
Media()code> in a video clip element.p> p>The code>Media
Streamcode> object code>streamcode> passed to lớn the code>get
User
Media()code> callback is in global scope, so you can inspect it from the console.p>div>Layout

*

STEP 2: add javascript

script type="text/javascript">"use strict";// Put variables in global scope to make them available lớn the browser console.const constraints = window.constraints = audio: false, video: true;function handle
Success(stream) const đoạn phim = document.query
Selector("video"); const video
Tracks = stream.get
Video
Tracks(); console.log("Got stream with constraints:", constraints); console.log(`Using đoạn phim device: $video
Tracks<0>.label`); window.stream = stream; // make variable available to browser console video.src
Object = stream;function handle
Error(error) if (error.name === "Constraint
Not
Satisfied
Error") let v = constraints.video; error
Msg(`The resolution $v.width.exactx$v.height.exact px is not supported by your device.`); else if (error.name === "Permission
Denied
Error") error
Msg("Permissions have not been granted to use your camera & " + "microphone, you need khổng lồ allow the page access khổng lồ your devices in " + "order for the thử nghiệm to work."); error
Msg(`get
User
Media error: $error.name`, error);function error
Msg(msg, error) const error
Element = document.query
Selector("#error
Msg"); error
Element.inner
HTML += `$msg

`; if (typeof error !== "undefined") console.error(error); async function init(e) try const stream = await navigator.media
Devices.get
User
Media(constraints); handle
Success(stream); e.target.disabled = true; catch (e) handle
Error(e); document.query
Selector("#show
Video").add
Event
Listener("click", e => init(e));/script>

Giải say đắm chút:

Khi click vào "Open Camera" thì function init() được gọi, vào function này còn có gọi cho get
User
Media() , function này có nhiệm vụ yêu ước lấy đoạn phim từ webcam.Nếu truy cập webcam thành công, video stream truy tìm xuất trường đoản cú webcam sẽ được gắn vào thẻ clip mà bạn đã chèn vào trang HTML5, bằng hàm handle
Success
Nếu truy vấn webcam lỗi, hoặc vật dụng k bao gồm webcam ví dụ điển hình thì function handle
Error() sẽ tiến hành gọi, và hiển thị thông tin lỗi.

Xem thêm: Top 9 Cách Mở Url Bị Chặn Trên Android, Iphone Mới Nhất 2023

STEP3: DEMO

Web worker (còn tên thường gọi khác là worker) là một trong những phương thức 1-1 giản được cho phép website chạy những script ngầm. Quy trình của worker rất có thể được tiến hành mà không có bất cứ tương tác làm sao với giao diện fan dùng. Trong nội dung bài viết này, bọn họ sẽ khám phá một số cách sử dụng cơ bạn dạng của website worker.
Mục lục
Vấn đề: giám sát và đo lường song tuy vậy của Java
Script
Web worker: thread cho Java
Script
Sử dụng web worker
Dedicated worker
Kiểm tra worker tất cả được cung ứng không
Sinh một dedicated worker
Gửi message đến worker
Ngừng worker đang chạy
Xử lý lỗi
Sinh ra các worker con
Import các script khác
Shared worker
Sinh một shared worker
Gửi nhà nhận message từ shared worker
Inline worker
Worker scope
Khi nào thì nên cần sử dụng website worker
Một vài sự việc khác
Kết luận

Vấn đề: đo lường và tính toán song tuy vậy của Java
Script

Có rất nhiều vấn đề với khiến một vận dụng có thể gặp mặt phải “tắc cổ chai”, khiến cho một vận dụng web cho tốt tới mức nào cũng khá khó tiếp cận người dùng do năng suất thấp. Những vấn đề này có thể đến tự phía server (xử lý nhiều, tối ưu kém) hoặc ngay ngơi nghỉ Java
Script của phía client.Trong bài viết này, chúng ta sẽ tạm thời chỉ bàn về sự việc của Java
Script, những điều này có thể bao gồm việc cân xứng với các trình duyệt, năng suất của Java
Script engine. Khôn xiết may là những sự việc này ngày nay hầu hết không còn nữa vì chưng CPU đã mạnh mẽ hơn khôn cùng nhiều, đồng thời các trình duyệt văn minh cũng cải thiện hiệu suất của Java
Script engine không ít rồi. Thậm chí kể cả nỗi gớm hoàng so với các developer là trình coi sóc của Microsoft đã và đang chuyển mình.Chỉ còn một sự việc duy nhất vẫn còn tồn tại của Java
Script là chính bạn dạng thân ngôn ngữ. Java
Script là 1 trong ngôn ngữ solo luồng, tức là code Java
Script gần như không thể chạy song song.Hãy tưởng tượng rằng một website cần phải thực thi không hề ít thứ trên client bởi Java
Script: cách xử trí các event trên giao diện, truy vấn vấn và xử lý các phản hồi trường đoản cú API, đổi khác giao diện tuỳ theo thao tác của tín đồ dùng, v.v… Đây là những công việc hết sức đa dạng của một vận dụng web. Vắt nhưng, thật ko may, gần như điều trên không thể được tiến hành đồng thời vì tiêu giảm của chính ngôn từ Java
Script. Việc triển khai script phải tuần tự trong một quá trình duy nhất.Các developer thường xuyên sử dụng một trong những kỹ thuật để “giả lập” đo lường và thống kê song tuy vậy trong Java
Script như sử dụng set
Timeout, set
Interval, XMLHttp
Request và event trigger. Vâng, tất cả những sản phẩm công nghệ trên gần như được chạy “bất đồng bộ” với trông “có vẻ như” việc thực thi code là song song. Mặc dù thế “bất đồng bộ” không trọn vẹn là “song song”, chính vì các chuyển động bất đồng bộ chỉ được thực hiện sau khoản thời gian code nhất quán được thực hiện xong.Rất may là HTML 5 đã cung cấp cho họ một phương thức mới giúp cho việc đo lường và tính toán song song thuận lợi hơn cực kỳ nhiều.

web worker: thread mang đến Java
Script

Web worker (còn được call ngắn là worker) cung ứng cho họ một số API để sinh các tiểu trình nhằm chạy ngầm. Website worker cho phép chúng ta có thể thực thi một vài tác vụ như khởi sinh sản script chạy ngầm để thực hiện các làm việc nâng cao, dẫu vậy không có tác dụng gián đoạn bất cứ thao tác nào trên UI tương tự như các script khác tác động đến trải nghiệm tín đồ dùng. Nó sẽ giúp các website tránh được tình trạng “unresponsive script” vẫn thỉnh thoảng xuất hiện thêm khi Java
Script thực hiện thống kê giám sát quá lớn.unresponsiveEwv9m
E9x
VPh
Ry.png width=360>Worker cùng với cơ chế hoạt động multithread cho phép chúng ta thực hiện tính toán song song. Nó là phương án cực tốt để duy trì UI hoạt động trong khi những tác vụ nặng vẫn được thực thi.Có các phương thức đến phép chúng ta làm bài toán này như web worker, service worker, v.v… Trong nội dung bài viết này, bọn họ chỉ đề cập mang đến một các loại duy nhất, sẽ là web worker (có thể điện thoại tư vấn tắt là worker). Các loại worker khác, xin giành cho các nội dung bài viết sau.

sử dụng web worker

Web worker là một phương thức dễ dàng cho phép họ thực thi script ngầm bằng thread. Chú ý rằng, web worker không liên can trực tiếp với DOM mà việc liên can phải thực hiện thông qua post
Message.Một worker là 1 trong những object được tạo ra từ class Worker (hoặc Shared
Worker), nó sẽ thực thi một file Java
Script. File Java
Script vẫn chứa toàn thể code chạy trong thread của worker, thread được thực thi trong ngữ cảnh trả khác cùng với ngữ cảnh hiện nay tại. Bởi vì vậy, nếu sử dụng biến window để truy vấn đến những biến, hằng của ngữ cảnh lúc này từ worker sẽ gặp gỡ lỗi.Ngữ cảnh của worker được đặt trong object Dedicated
Worker
Global
Scope (trong ngôi trường hợp thực hiện dedicated worker) hoặc Shared
Worker
Global
Scope (nếu sử dụng shared worker). Dedicated worker là worker chỉ tương tác từ 1 script duy nhất, nó chỉ hoàn toàn có thể tương tác cùng với script mà nó được sinh ra, trong lúc shared worker có thể tương tác từ rất nhiều script khác nhau.Một worker rất có thể thực thi bất cứ code Java
Script làm sao (có một số ít nước ngoài lệ). Ví dụ, worker không thể ảnh hưởng với DOM, hoặc một vài phương thức cũng như thuộc tính của window ko thể truy cập được. Nhưng chúng ta có thể sử dụng một lượng lớn những cơ chế khác như Web socket, các cơ chế tàng trữ dữ liệu như Indexed
DB, Data Store API (chỉ có ở Firefox).Dữ liệu được gửi với nhận giữa worker với thread bao gồm của trình duyệt trải qua message. Cả nhị phía đều gửi message thông qua phương thức post
Message và xử trí khi nhấn message này thông qua sự kiện onmessage.Một worker có thể sinh ra một worker khác, miễn là những worker này đều phải sở hữu chung nguồn gốc với phụ thân gốc của chúng. Ngoài ra, worker hoàn toàn có thể sử dụng XMLHttp
Request nhằm thực thi những tác vụ liên quan đến tróc nã vấn mạng. Mặc dù nhiên, khi ấy response
XML cùng channel của request luôn luôn luôn trống.

Dedicated worker

Dedicated worker (worker dành riêng riêng), đúng như cái tên gọi của nó, là worker chỉ có ảnh hưởng bởi script thứ nhất đã có mặt nó. Vào phần này, bọn họ sẽ tập trung tìm hiển về dedicated worker (tất nhiên là chỉ khoảng cơ bản).Chúng ta sẽ khám phá dedicated worker thông qua một ví dụ như sau: Nhập vào hai số, các số này sẽ tiến hành gửi tới dedicated worker, triển khai phép nhân chúng với nhau sau đó hiệu quả sẽ được gởi lại thread chủ yếu và hiển thị.Bạn rất có thể xem một kiểm tra của ví dụ như này nghỉ ngơi đây.Ví dụ này hơi cơ bản, và có vẻ không thực tế lắm (chỉ nhân thì không phải đến worker chạy multithread làm cái gi cả). Tuy nhiên nó là 1 trong những ví dụ xuất sắc để chúng ta tìm gọi worker, không quá phức tạp và cũng dễ code. soát sổ worker có được hỗ trợ không
Để dễ dàng hơn trong việc chạy thử trên website riêng, chúng ta nên viết script thành những file riêng, và phần đa code trong phần này buộc phải để trong một file.